Add base example for iframe loading and stale service worker debugging

source/Background/index.ts

@@ -1,8 +1,74 @@
 import 'emoji-log';
-import {browser} from 'webextension-polyfill-ts';
+import {browser, Tabs} from 'webextension-polyfill-ts';
 
 browser.runtime.onInstalled.addListener((reason): void => {
-  console.log('browser.runtime.onInstalled', reason);
+  console.log('browser.runtime.onInstall (previousVersion)', reason.previousVersion);
+  console.log('browser.runtime.onInstall (reason)', reason.reason);
 });
 
-console.log('process.env.VERSION', process.env.VERSION);
+const setCurrentTabContext = (tabId: number, windowId: number) => {
+  console.log('contentScript.bundle.js - tabId: ', tabId);
+  console.log('contentScript.bundle.js - windowId: ', windowId);
+  // Original code below
+  // window.tabId = tabId;
+  // window.windowId = windowId;
+}
+
+const toggleIFrame = async (tab: Tabs.Tab) => {
+  try {
+    // TODO: NOTE - I removed logic to check if the content script is already loaded for the sake of demonstrating the problem
+
+    if (tab.id) {
+      // TODO: Note - Here's where I start to execute a script into a tab.
+      // TODO: Note - I'm using two strategies. Injecting a function and a javascript file
+      chrome.scripting.executeScript(
+        {
+          target: { tabId: tab.id },
+          func: setCurrentTabContext,
+          args: [tab.id, tab.windowId],
+        },
+        () => {
+          const error = chrome.runtime.lastError;
+          if (error?.message) {
+            browser.tabs.create({
+              url: `${chrome.runtime.getURL('iframe.html')}`,
+              index: tab.index,
+            });
+            return;
+          }
+
+          // TODO: Note - This is where the javascript file is executed into the tab
+          tab.id &&
+          chrome.scripting.executeScript({
+            target: { tabId: tab.id },
+            files: ['js/contentScript.bundle.js'],
+          });
+        },
+      );
+    }
+  } catch (error) {
+    console.error('background.toggleIFrame.error: ', error);
+  }
+}
+
+const toggleIFrameInActiveTab = async () => {
+  const tabs = await browser.tabs.query({
+    active: true,
+    currentWindow: true,
+  });
+
+  if (tabs.length > 0) {
+    await toggleIFrame(tabs[0]);
+  }
+};
+
+
+browser.commands.onCommand.addListener((command) => {
+  switch (command) {
+    case 'toggle-iframe':
+      toggleIFrameInActiveTab();
+      break;
+  }
+});
+
+console.log('Should reflect version in chrome://extension: => ', process.env.VERSION);

source/ContentScript/iframe.ts

@@ -0,0 +1,3 @@
+console.log('2. iframe.html executed');
+
+export {};

source/ContentScript/index.ts

@@ -1,3 +1,32 @@
-console.log('helloworld from content script');
+const DIV_ROOT_ID = 'div-root';
+const IFRAME_ID = 'main-iframe';
+
+let rootDiv = document.getElementById(DIV_ROOT_ID);
+
+const injectTurboNavIFrameApp = async () => {
+  const iFrameDivContainer = document.createElement('div');
+  const iframe = document.createElement('iframe');
+  iframe.src = `${chrome.runtime.getURL('iframe.html')}`;
+
+  iFrameDivContainer.id = DIV_ROOT_ID;
+  iframe.id = IFRAME_ID;
+
+  document.body.appendChild(iFrameDivContainer);
+  iFrameDivContainer.appendChild(iframe);
+
+  rootDiv = document.getElementById(DIV_ROOT_ID);
+  console.log('1. contentScript.bundle.js executed, next up iframe load');
+};
+
+const start = async () => {
+  const rootDivDoesNotExist = rootDiv === null;
+
+  if (rootDivDoesNotExist) {
+    await injectTurboNavIFrameApp();
+  }
+};
+
+start();
+
 
 export {};

source/manifest.json

@@ -16,7 +16,9 @@
 
   "permissions": [
     "activeTab",
-    "storage"
+    "storage",
+    "scripting",
+    "commands"
   ],
 
   "__chrome|firefox__author": "abhijithvijayan",
@@ -43,13 +45,24 @@
     "service_worker": "background.bundle.js"
   },
 
-  "content_scripts": [{
-    "matches": [
-      "http://*/*",
-      "https://*/*"
-    ],
-    "js": [
-      "js/contentScript.bundle.js"
-    ]
-  }]
+  "commands": {
+    "toggle-iframe": {
+      "suggested_key": {
+        "default": "Ctrl+Shift+Space",
+        "mac": "Command+Shift+Space"
+      },
+      "description": "Toggle iFrame ExecuteScript"
+    }
+  },
+
+  "web_accessible_resources": [
+    {
+      "resources": [
+        "iframe.html"
+      ],
+      "matches": [
+        "<all_urls>"
+      ]
+    }
+  ]
 }

tsconfig.json

@@ -8,10 +8,15 @@
 			"dom.iterable",
 			"esnext"
 		],
+		"types": [
+			"chrome",
+			"node"
+		],
 		"declaration": false,
 		"isolatedModules": true,
 		/* Additional Checks */
 		"useDefineForClassFields": true,
+		"noEmit": true,
 		"skipLibCheck": true,
 	},
 	"include": [

views/iframe.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=500" />
+    <title>IFrame</title>
+</head>
+<body>
+<div id="iframe-root"></div>
+</body>
+</html>

webpack.config.js

@@ -62,6 +62,7 @@ module.exports = {
     manifest: path.join(sourcePath, 'manifest.json'),
     '../background': path.join(sourcePath, 'Background', 'index.ts'),
     contentScript: path.join(sourcePath, 'ContentScript', 'index.ts'),
+    iframe: path.join(sourcePath, 'ContentScript', 'iframe.ts'),
     popup: path.join(sourcePath, 'Popup', 'index.tsx'),
     options: path.join(sourcePath, 'Options', 'index.tsx'),
   },
@@ -170,6 +171,13 @@ module.exports = {
       hash: true,
       filename: 'options.html',
     }),
+    new HtmlWebpackPlugin({
+      template: path.join(viewsPath, 'iframe.html'),
+      inject: 'body',
+      chunks: ['iframe'],
+      hash: true,
+      filename: 'iframe.html',
+    }),
     // write css file(s) to build folder
     new MiniCssExtractPlugin({filename: 'css/[name].css'}),
     // copy static assets

yarn.lock

@@ -1195,6 +1195,14 @@
   resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
   integrity sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==
 
+"@types/[email protected]":
+  version "0.0.154"
+  resolved "https://registry.yarnpkg.com/@types/chrome/-/chrome-0.0.154.tgz#7992e97364f4447e961028ad07ac843d0b052c2d"
+  integrity sha512-6QmP744MeMUZUIUHED4d4L2la5dIF1e6bcrkGF4yGQTyO94ER+r++Ss165wkzA5cAGUYt8kToDa6L9xtNqVMxg==
+  dependencies:
+    "@types/filesystem" "*"
+    "@types/har-format" "*"
+
 "@types/color-name@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
@@ -1205,6 +1213,18 @@
   resolved "https://registry.npmjs.org/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
   integrity sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag==
 
+"@types/filesystem@*":
+  version "0.0.32"
+  resolved "https://registry.yarnpkg.com/@types/filesystem/-/filesystem-0.0.32.tgz#307df7cc084a2293c3c1a31151b178063e0a8edf"
+  integrity sha512-Yuf4jR5YYMR2DVgwuCiP11s0xuVRyPKmz8vo6HBY3CGdeMj8af93CFZX+T82+VD1+UqHOxTq31lO7MI7lepBtQ==
+  dependencies:
+    "@types/filewriter" "*"
+
+"@types/filewriter@*":
+  version "0.0.29"
+  resolved "https://registry.yarnpkg.com/@types/filewriter/-/filewriter-0.0.29.tgz#a48795ecadf957f6c0d10e0c34af86c098fa5bee"
+  integrity sha512-BsPXH/irW0ht0Ji6iw/jJaK8Lj3FJemon2gvEqHKpCdDCeemHa+rI3WBGq5z7cDMZgoLjY40oninGxqk+8NzNQ==
+
 "@types/glob@^7.1.1":
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.2.tgz#06ca26521353a545d94a0adc74f38a59d232c987"
@@ -1213,6 +1233,11 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
+"@types/har-format@*":
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/@types/har-format/-/har-format-1.2.7.tgz#debfe36378f26c4fc2abca1df99f00a8ff94fd29"
+  integrity sha512-/TPzUG0tJn5x1TUcVLlDx2LqbE58hyOzDVAc9kf8SpOEmguHjU6bKUyfqb211AdqLOmU/SNyXvLKPNP5qTlfRw==
+
 "@types/html-minifier-terser@^5.0.0":
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz#3c9ee980f1a10d6021ae6632ca3e79ca2ec4fb50"