#5666 Add initial support for Thunderbird (improved setup flow)

extension/chrome/settings/initial.htm

@@ -36,9 +36,13 @@
                   Click the <img src="/img/logo/flowcrypt-logo-64-64.png" style="filter: grayscale(0.75); position: relative; top: 15px" /> button in the
                   corner<br />
                 </div>
+                <div id="thunderbird-steps" style="display: none">
+                  Go to Thunderbird Mail and click the <img src="/img/logo/flowcrypt-logo-64-64.png" style="position: relative; top: 15px" /> button to get
+                  started
+                </div>
               </div>
             </td>
-            <td width="350" style="text-align: center; padding-right: 50px; padding-top: 25px">
+            <td id="img-setup-arrow" width="350" style="text-align: center; padding-right: 50px; padding-top: 25px">
               <img src="/img/fa/fa-location-arrow.png" />
             </td>
           </tr>

extension/chrome/settings/initial.ts

@@ -8,7 +8,10 @@ import { View } from '../../js/common/view.js';
 View.run(
   class InitialView extends View {
     public render = async () => {
-      const browserName = Catch.browser().name === 'chrome' && Number(Catch.browser().v) >= 76 ? 'chrome' : 'firefox';
+      const browserName = Catch.browser().name === 'chrome' && Number(Catch.browser().v) >= 76 ? 'chrome' : Catch.browser().name;
+      if (browserName === 'thunderbird') {
+        $('#img-setup-arrow').hide();
+      }
       const stepsEl = document.getElementById(`${browserName}-steps`);
       if (stepsEl) {
         stepsEl.style.display = 'block';

extension/js/common/browser/browser.ts

@@ -9,6 +9,7 @@ import { Attachment } from '../core/attachment.js';
 import { Catch } from '../platform/catch.js';
 import { Dict, Url, UrlParam } from '../core/common.js';
 import { GlobalStore } from '../platform/store/global-store.js';
+import { BgUtils } from '../../service_worker/bgutils.js';
 
 export class Browser {
   public static objUrlCreate = (content: Uint8Array | string) => {
@@ -55,13 +56,14 @@ export class Browser {
   public static openSettingsPage = async (path = 'index.htm', acctEmail?: string, page = '', rawPageUrlParams?: Dict<UrlParam>, addNewAcct = false) => {
     const basePath = chrome.runtime.getURL(`chrome/settings/${path}`);
     const pageUrlParams = rawPageUrlParams ? JSON.stringify(rawPageUrlParams) : undefined;
+    const preferedLinkOpener = Catch.browser().name === 'thunderbird' ? BgUtils : Browser;
     if (acctEmail || path === 'fatal.htm') {
-      Browser.openExtensionTab(Url.create(basePath, { acctEmail, page, pageUrlParams }));
+      await preferedLinkOpener.openExtensionTab(Url.create(basePath, { acctEmail, page, pageUrlParams }));
     } else if (addNewAcct) {
-      Browser.openExtensionTab(Url.create(basePath, { addNewAcct }));
+      await preferedLinkOpener.openExtensionTab(Url.create(basePath, { addNewAcct }));
     } else {
       const acctEmails = await GlobalStore.acctEmailsGet();
-      Browser.openExtensionTab(Url.create(basePath, { acctEmail: acctEmails[0], page, pageUrlParams }));
+      await preferedLinkOpener.openExtensionTab(Url.create(basePath, { acctEmail: acctEmails[0], page, pageUrlParams }));
     }
   };
 

extension/js/common/browser/env.ts

@@ -7,7 +7,7 @@
 
 import { Url } from '../core/common.js';
 
-export type WebMailName = 'gmail' | 'outlook' | 'settings';
+export type WebMailName = 'gmail' | 'thunderbird' | 'outlook' | 'settings';
 export type WebMailVersion = 'generic' | 'gmail2020' | 'gmail2022';
 
 export class Env {

extension/js/common/inject.ts

@@ -14,6 +14,7 @@ import { PassphraseStore } from './platform/store/passphrase-store.js';
 
 type Host = {
   gmail: string;
+  thunderbird: string;
   outlook: string;
   settings: string;
 };
@@ -26,11 +27,13 @@ export class Injector {
   private container: { [key: string]: Host } = {
     composeBtnSel: {
       gmail: 'div.aeN, div.aBO', // .aeN for normal look, .aBO for new look https://github.com/FlowCrypt/flowcrypt-browser/issues/4099
+      thunderbird: '', // todo in another issue
       outlook: 'div._fce_b',
       settings: '#does_not_have',
     },
     finishSesionBtnSel: {
       gmail: 'body',
+      thunderbird: '', // todo in another issue
       outlook: '#does_not_have',
       settings: '#settings > div.header',
     },

extension/js/common/platform/catch.ts

@@ -149,12 +149,14 @@ export class Catch {
   }
 
   public static browser(): {
-    name: 'firefox' | 'ie' | 'chrome' | 'opera' | 'safari' | 'unknown';
+    name: 'firefox' | 'thunderbird' | 'ie' | 'chrome' | 'opera' | 'safari' | 'unknown';
     v: number | undefined;
   } {
     // http://stackoverflow.com/questions/4825498/how-can-i-find-out-which-browser-a-user-is-using
     if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)) {
       return { name: 'firefox', v: Number(RegExp.$1) };
+    } else if (/Thunderbird[\/\s](\d+\.\d+)/.test(navigator.userAgent)) {
+      return { name: 'thunderbird', v: Number(RegExp.$1) };
     } else if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) {
       return { name: 'ie', v: Number(RegExp.$1) };
     } else if (/Chrome[\/\s](\d+\.\d+)/.test(navigator.userAgent)) {

extension/js/common/settings.ts

@@ -28,6 +28,7 @@ import { Api } from './api/shared/api.js';
 import { Time } from './browser/time.js';
 import { Google } from './api/email-provider/gmail/google.js';
 import { ConfiguredIdpOAuth } from './api/authentication/configured-idp-oauth.js';
+import { BgUtils } from '../service_worker/bgutils.js';
 
 declare const zxcvbn: Function; // eslint-disable-line @typescript-eslint/ban-types
 
@@ -430,8 +431,9 @@ export class Settings {
 
   public static async loginWithPopupShowModalOnErr(acctEmail: string, then: () => void = () => undefined) {
     if (window !== window.top && !chrome.windows) {
+      const preferedLinkOpener = Catch.browser().name === 'thunderbird' ? BgUtils : Browser;
       // Firefox, chrome.windows isn't available in iframes
-      Browser.openExtensionTab(Url.create(chrome.runtime.getURL(`chrome/settings/index.htm`), { acctEmail }));
+      await preferedLinkOpener.openExtensionTab(Url.create(chrome.runtime.getURL(`chrome/settings/index.htm`), { acctEmail }));
       await Ui.modal.info(`Reload after logging in.`);
       return window.location.reload();
     }

extension/js/content_scripts/webmail/thunderbird/thunderbird-element-replacer.ts

@@ -0,0 +1,13 @@
+/* ©️ 2016 - present FlowCrypt a.s. Limitations apply. Contact [email protected] */
+
+'use strict';
+
+import { IntervalFunction, WebmailElementReplacer } from '../generic/webmail-element-replacer';
+
+export class ThunderbirdElementReplacer extends WebmailElementReplacer {
+  public getIntervalFunctions: () => IntervalFunction[];
+  public setReplyBoxEditable: () => Promise<void>;
+  public reinsertReplyBox: (replyMsgId: string) => void;
+  public scrollToReplyBox: (replyMsgId: string) => void;
+  public scrollToCursorInReplyBox: (replyMsgId: string, cursorOffsetTop: number) => void;
+}

extension/js/content_scripts/webmail/thunderbird/thunderbird-webmail-startup.ts

@@ -0,0 +1,38 @@
+/* ©️ 2016 - present FlowCrypt a.s. Limitations apply. Contact [email protected] */
+import { ClientConfiguration } from '../../../common/client-configuration';
+import { Injector } from '../../../common/inject';
+import { Notifications } from '../../../common/notifications';
+import { contentScriptSetupIfVacant } from '../generic/setup-webmail-content-script';
+import { GmailElementReplacer } from '../gmail/gmail-element-replacer';
+import { ThunderbirdElementReplacer } from './thunderbird-element-replacer';
+
+export class ThunderbirdWebmailStartup {
+  private replacer: GmailElementReplacer;
+
+  public asyncConstructor = async () => {
+    await contentScriptSetupIfVacant({
+      name: 'thunderbird',
+      variant: undefined,
+      getUserAccountEmail: () => undefined, // todo, but can start with undefined
+      getUserFullName: () => undefined, // todo, but can start with undefined
+      getReplacer: () => new ThunderbirdElementReplacer(), // todo - add this class empty, methods do nothing
+      start: this.start,
+    });
+  };
+
+  private start = async (
+    acctEmail: string,
+    clientConfiguration: ClientConfiguration,
+    injector: Injector,
+    notifications: Notifications
+    // factory: XssSafeFactory, // todo in another issue
+    // relayManager: RelayManager // todo in another issue
+  ) => {
+    // injector.btns(); // todo in another issue - add compose button
+    this.replacer.runIntervalFunctionsPeriodically();
+    await notifications.showInitial(acctEmail);
+    await notifications.show(
+      'FlowCrypt Thunderbird support is still in early development, and not expected to function properly yet. Support will be gradually added in upcoming versions.'
+    );
+  };
+}

extension/js/content_scripts/webmail/webmail.ts

@@ -6,6 +6,7 @@
 
 import { Catch } from '../../common/platform/catch.js';
 import { GmailWebmailStartup } from './gmail/gmail-webmail-startup.js';
+import { ThunderbirdWebmailStartup } from './thunderbird/thunderbird-webmail-startup.js';
 
 declare global {
   interface Window {
@@ -16,5 +17,10 @@ declare global {
 
 Catch.try(async () => {
   // when we support more webmails, there will be if/else here to figure out which one to run
-  await new GmailWebmailStartup().asyncConstructor();
+  const browserName = Catch.browser().name;
+  if (browserName === 'thunderbird') {
+    await new ThunderbirdWebmailStartup().asyncConstructor();
+  } else {
+    await new GmailWebmailStartup().asyncConstructor();
+  }
 })();

scripts/build.sh

@@ -81,12 +81,13 @@ main() {
       synchronize_files "build/chrome-enterprise"
       synchronize_files "build/chrome-consumer"
       synchronize_files "build/firefox-consumer"
+      synchronize_files "build/thunderbird-consumer"
     }
     exit 0
   fi
 
   if [[ "$#" == 1 ]] && [[ "$1" == "--incremental" ]]; then
-    delete_directories $BUILD_DIRECTORY/firefox-consumer $BUILD_DIRECTORY/chrome-consumer $BUILD_DIRECTORY/chrome-consumer-mock $BUILD_DIRECTORY/chrome-enterprise $BUILD_DIRECTORY/chrome-enterprise-mock $BUILD_DIRECTORY/generic-extension-wip/js/content_scripts
+    delete_directories $BUILD_DIRECTORY/firefox-consumer $BUILD_DIRECTORY/thunderbird-consumer $BUILD_DIRECTORY/chrome-consumer $BUILD_DIRECTORY/chrome-consumer-mock $BUILD_DIRECTORY/chrome-enterprise $BUILD_DIRECTORY/chrome-enterprise-mock $BUILD_DIRECTORY/generic-extension-wip/js/content_scripts
     # build concurrently - using standard typescript compiler with --incremental flag
     mkdir -p $BUILD_DIRECTORY
     build_typescript_project false "./tsconfig.json" true "$BUILD_DIRECTORY/tsconfig.tsbuildinfo"
@@ -150,6 +151,7 @@ main() {
   cp -r $OUTPUT_DIRECTORY ./build/chrome-enterprise
   cp -r $OUTPUT_DIRECTORY ./build/chrome-consumer
   cp -r $OUTPUT_DIRECTORY ./build/firefox-consumer
+  cp -r $OUTPUT_DIRECTORY ./build/thunderbird-consumer
   node ./build/tooling/build-types-and-manifests
 }
 

test/source/patterns.ts

@@ -94,7 +94,7 @@ for (const buildType of ['chrome-consumer', 'chrome-enterprise']) {
   }
   for (const expectedPermission of expectedPermissions) {
     if (!manifest.permissions.includes(expectedPermission)) {
-      if (!(expectedPermission === 'unlimitedStorage' && buildType === 'firefox-consumer')) {
+      if (!(expectedPermission === 'unlimitedStorage' && (buildType === 'firefox-consumer' || buildType === 'thunderbird-consumer'))) {
         console.error(`Missing permission '${expectedPermission}' in ${buildType}/manifest.json`);
         errsFound++;
       }

tooling/build-types-and-manifests.ts

@@ -49,6 +49,43 @@ addManifest('firefox-consumer', manifest => {
   delete manifest.minimum_chrome_version;
 });
 
+addManifest('thunderbird-consumer', manifest => {
+  manifest.version = version;
+  manifest.manifest_version = 2;
+  manifest.browser_specific_settings = {
+    gecko: {
+      id: '[email protected]',
+      update_url: 'https://flowcrypt.com/api/update/firefox', // eslint-disable-line @typescript-eslint/naming-convention
+      strict_min_version: '102.0', // eslint-disable-line @typescript-eslint/naming-convention
+    },
+  };
+  manifest.browser_action = manifest.action;
+  delete manifest.action;
+  manifest.browser_action.default_title = 'FlowCrypt Encryption for Thunderbird';
+  manifest.name = 'FlowCrypt Encryption for Thunderbird';
+  manifest.description = 'Secure end-to-end encryption with FlowCrypt'; // needs to updated later
+  manifest.permissions = [...manifest.permissions, ...manifest.host_permissions];
+  manifest.permissions = manifest.permissions.filter((p: string) => p !== 'unlimitedStorage');
+  manifest.compose_action = {
+    default_title: 'FlowCrypt', // eslint-disable-line @typescript-eslint/naming-convention
+    default_icon: '/img/logo/flowcrypt-logo-64-64.png', // eslint-disable-line @typescript-eslint/naming-convention
+    // default_popup will be updated later
+    default_popup: '/chrome/popups/default.htm', // eslint-disable-line @typescript-eslint/naming-convention
+  };
+  manifest.message_display_action = {
+    default_title: 'FlowCrypt', // eslint-disable-line @typescript-eslint/naming-convention
+    default_icon: '/img/logo/flowcrypt-logo-64-64.png', // eslint-disable-line @typescript-eslint/naming-convention
+    // default_popup will be updated later
+    default_popup: '/chrome/popups/default.htm', // eslint-disable-line @typescript-eslint/naming-convention
+  };
+  manifest.web_accessible_resources = manifest.web_accessible_resources[0].resources;
+  manifest.content_security_policy = manifest.content_security_policy.extension_pages;
+  manifest.background.scripts = ['/js/service_worker/background.js'];
+  delete manifest.host_permissions;
+  delete manifest.background.service_worker;
+  delete manifest.minimum_chrome_version;
+});
+
 addManifest('chrome-enterprise', manifest => {
   manifest.version = version;
   manifest.name = 'FlowCrypt for Enterprise';