Merge pull request #1010 from madfish-solutions/TW-881-not-found-erro…

…r-appears-after-clicking-on-decline-or-confirm-after-waiting-on-the-confirm-operation-page-for-30-s

TW-881 Make background worker keeper script come back

src/app/App.tsx

@@ -3,6 +3,7 @@ import React, { ComponentProps, FC, Suspense } from 'react';
 import 'lib/local-storage/migrations';
 import 'lib/lock-up/run-checks';
 import 'lib/ledger/proxy/foreground';
+import 'lib/keep-bg-worker-alive/script';
 
 import AwaitFonts from 'app/a11y/AwaitFonts';
 import AwaitI18N from 'app/a11y/AwaitI18N';

src/background.ts

@@ -2,6 +2,8 @@ import { initializeApp } from 'firebase/app';
 import { getMessaging } from 'firebase/messaging/sw';
 import browser from 'webextension-polyfill';
 
+import 'lib/keep-bg-worker-alive/background';
+
 import { EnvVars } from 'lib/env';
 import { start } from 'lib/temple/back/main';
 

src/keepBackgroundWorkerAlive.ts

@@ -0,0 +1 @@
+import 'lib/keep-bg-worker-alive/script';

src/lib/keep-bg-worker-alive/background.ts

@@ -0,0 +1,24 @@
+/*
+  Inject this script into ServiceWorker.
+*/
+
+import browser from 'webextension-polyfill';
+
+import { BACKGROUND_IS_WORKER, KEEP_BACKGROUND_WORKER_ALIVE } from './utils';
+
+if (BACKGROUND_IS_WORKER) {
+  browser.runtime.onMessage.addListener((message: unknown) =>
+    isKeepAliveMessage(message) ? Promise.resolve(true) : void 0
+  );
+
+  browser.runtime.onConnect.addListener(port => {
+    if (port.name !== KEEP_BACKGROUND_WORKER_ALIVE) return;
+
+    port.onMessage.addListener((message: unknown) => {
+      if (isKeepAliveMessage(message)) port.postMessage(true);
+    });
+  });
+}
+
+const isKeepAliveMessage = (message: any) =>
+  typeof message === 'object' && message !== null && message.type === KEEP_BACKGROUND_WORKER_ALIVE;

src/lib/keep-bg-worker-alive/script.ts

@@ -0,0 +1,19 @@
+/*
+  Inject this script into Content Script of every possible opened tab.
+*/
+
+import type Browser from 'webextension-polyfill';
+
+import { browser, BACKGROUND_IS_WORKER, KEEP_BACKGROUND_WORKER_ALIVE, ping } from './utils';
+
+if (BACKGROUND_IS_WORKER) {
+  let port: Browser.Runtime.Port;
+  (function connect() {
+    port = browser.runtime.connect({ name: KEEP_BACKGROUND_WORKER_ALIVE });
+    port.onDisconnect.addListener(connect);
+  })();
+
+  ping(port);
+
+  setInterval(() => ping(port), 1_000);
+}

src/lib/keep-bg-worker-alive/utils.ts

@@ -0,0 +1,29 @@
+import type Browser from 'webextension-polyfill';
+
+export const browser = (() => {
+  // @ts-ignore
+  const browser: typeof Browser | undefined = globalThis.chrome || globalThis.browser;
+  if (browser == null) throw new Error('Not browser extension');
+  return browser;
+})();
+
+const MANIFEST_VERSION = browser.runtime.getManifest().manifest_version;
+
+export const BACKGROUND_IS_WORKER = MANIFEST_VERSION === 3;
+
+export const KEEP_BACKGROUND_WORKER_ALIVE = 'KEEP_BACKGROUND_WORKER_ALIVE';
+
+/**
+ * Avoiding "Extension context invalidated" error logs.
+ */
+const contentScriptIsStillValid = () => Boolean(browser.runtime.id);
+
+export const ping = (port?: Browser.Runtime.Port) => {
+  if (contentScriptIsStillValid() === false) return;
+
+  const message = { type: KEEP_BACKGROUND_WORKER_ALIVE };
+
+  browser.runtime.sendMessage(message);
+
+  port?.postMessage(message);
+};

src/options.tsx

@@ -8,6 +8,7 @@ import browser from 'webextension-polyfill';
 
 import 'lib/lock-up/run-checks';
 import 'lib/ledger/proxy/foreground';
+import 'lib/keep-bg-worker-alive/script';
 
 import DisableOutlinesForClick from 'app/a11y/DisableOutlinesForClick';
 import Dialogs from 'app/layouts/Dialogs';

webpack.config.ts

@@ -43,6 +43,7 @@ const HTML_TEMPLATES = PAGES_NAMES.map(name => {
 });
 
 const CONTENT_SCRIPTS = ['contentScript'];
+if (BACKGROUND_IS_WORKER) CONTENT_SCRIPTS.push('keepBackgroundWorkerAlive');
 
 const mainConfig = (() => {
   const config = buildBaseConfig();
@@ -161,6 +162,9 @@ const scriptsConfig = (() => {
     contentScript: Path.join(PATHS.SOURCE, 'contentScript.ts')
   };
 
+  if (BACKGROUND_IS_WORKER)
+    config.entry.keepBackgroundWorkerAlive = Path.join(PATHS.SOURCE, 'keepBackgroundWorkerAlive.ts');
+
   config.output = {
     ...config.output,
     filename: 'scripts/[name].js',

webpack/manifest.ts

@@ -25,6 +25,19 @@ export const buildManifest = (vendor: string) => {
 const buildManifestV3 = (vendor: string): Manifest.WebExtensionManifest => {
   const commons = buildManifestCommons(vendor);
 
+  commons.content_scripts!.push({
+    matches: [
+      /* For all URLs from `HOST_PERMISSIONS` & active tabs (with `activeTab` permission) */
+      '<all_urls>'
+    ],
+    js: ['scripts/keepBackgroundWorkerAlive.js'],
+    run_at: 'document_start',
+    all_frames: true,
+    match_about_blank: true,
+    // @ts-ignore
+    match_origin_as_fallback: true
+  });
+
   return {
     manifest_version: 3,