Committing a working version of Reactime using a V3 manifest. Current solution does not work in dev mode.

Author: RobbyTipton

src/extension/background.js

@@ -1,7 +1,6 @@
 // Import snapshots from "../app/components/snapshots".
-import 'core-js';
+// import 'core-js';
 
-console.log('Hello from line 4');
 // Store ports in an array.
 const portsArr = [];
 const reloaded = {};
@@ -288,35 +287,22 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     // so that Reactime's backend files can communicate with the app's DOM.
     case 'injectScript': {
       console.log('Hello from line 287');
+
+      const injectScript = (file, tabId) => {
+        const htmlBody = document.getElementsByTagName('body')[0];
+        const script = document.createElement('script');
+        script.setAttribute('type', 'text/javascript');
+        script.setAttribute('src', file);
+        // eslint-disable-next-line prefer-template
+        document.title = tabId + '-' + document.title;
+        htmlBody.appendChild(script);
+      };
+
       chrome.scripting.executeScript({
         target: { tabId },
-        func: tab => {
-          const injectScript = (file, tag) => {
-            const htmlBody = document.getElementsByTagName(tag)[0];
-            const script = document.createElement('script');
-            script.setAttribute('type', 'text/javascript');
-            script.setAttribute('src', file);
-            document.title = tab + '-' + document.title;
-            htmlBody.appendChild(script);
-          };
-          injectScript(chrome.runtime.getURL('bundles/backend.bundle.js'), 'body');
-        },
-        args: [tabId],
+        function: injectScript,
+        args: [chrome.runtime.getURL('bundles/backend.bundle.js'), tabId],
       });
-      // chrome.tabs.executeScript(tabId, {
-      //   code: `
-      //   // Function will attach script to the dom
-      //   const injectScript = (file, tag) => {
-      //     const htmlBody = document.getElementsByTagName(tag)[0];
-      //     const script = document.createElement('script');
-      //     script.setAttribute('type', 'text/javascript');
-      //     script.setAttribute('src', file);
-      //     document.title=${tabId} + '-' + document.title
-      //     htmlBody.appendChild(script);
-      //   };
-      //   injectScript(chrome.runtime.getURL('bundles/backend.bundle.js'), 'body');
-      // `,
-      // });
       break;
     }
     case 'recordSnap': {
@@ -442,6 +428,7 @@ chrome.runtime.onInstalled.addListener(() => {
     title: 'Reactime',
     contexts: ['page', 'selection', 'image', 'link'],
   });
+  console.log('Context Menu Created');
 });
 
 // when context menu is clicked, listen for the menuItemId,

src/extension/build/manifest.json

@@ -4,42 +4,25 @@
   "devtools_page": "devtools.html",
   "description": "A Chrome extension that helps debug React applications by memorizing the state of components with every render.",
   "manifest_version": 3,
-  "content_security_policy": {
-    "extension_pages": "script-src 'self'; object-src 'self'"
-  },
   "background": {
-    "service-worker": "bundles/background.bundle.js"
+    "service_worker": "bundles/background.bundle.js"
   },
   "icons": {
     "48": "assets/icon48.png",
     "128": "assets/icon128.png"
   },
   "content_scripts": [
     {
-      "matches": [
-        "http://localhost/*",
-        "https://localhost/*"
-      ],
-      "js": [
-        "bundles/content.bundle.js"
-      ]
+      "matches": ["<all_urls>"],
+      "js": ["bundles/content.bundle.js"]
     }
   ],
-  "web_accessible_resources": [{
-    "resources": ["bundles/backend.bundle.js"],
-    "matches": [
-      "http://localhost/*",
-      "https://localhost/*"
-    ]
-  }],
-  "permissions": [
-    "contextMenus",
-    "tabs",
-    "activeTab"
+  "web_accessible_resources": [
+    {
+      "resources": ["bundles/backend.bundle.js"],
+      "matches": ["<all_urls>"]
+    }
   ],
-  "host_permissions": [
-    "http://localhost/*",
-    "https://localhost/*",
-    "<all_urls>"
-  ]
+  "permissions": ["contextMenus", "tabs", "activeTab", "scripting"],
+  "host_permissions": ["<all_urls>"]
 }

src/extension/build/panel.html

@@ -10,6 +10,5 @@
   <body>
     <div id="root"></div>
     <script type="text/javascript" src="bundles/app.bundle.js"></script>
-    <!-- <script type="text/javascript" src="https://www.gstatic.com/charts/49/loader.js"></script> -->
   </body>
 </html>