Committing work in progress changes. Currently investigating content script security.

Author: RobbyTipton

src/extension/background.js

@@ -199,12 +199,12 @@ chrome.runtime.onConnect.addListener(port => {
         return true;
       case 'launchContentScript':
         // !!! in Manifest Version 3 this will need to be changed to the commented out code below !!!
-        // chrome.scripting.executeScript({
-        //   target: { tabId },
-        //   files: ['bundles/content.bundle.js'],
-        // });
+        chrome.scripting.executeScript({
+          target: { tabId },
+          files: ['bundles/content.bundle.js'],
+        });
         // This line below will need to be removed
-        chrome.tabs.executeScript(tabId, { file: 'bundles/content.bundle.js' });
+        // chrome.tabs.executeScript(tabId, { file: 'bundles/content.bundle.js' });
         return true;
       case 'jumpToSnap':
         chrome.tabs.sendMessage(tabId, msg);
@@ -282,20 +282,34 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     // This injects a script into the app that you're testing Reactime on,
     // so that Reactime's backend files can communicate with the app's DOM.
     case 'injectScript': {
-      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');
-      `,
+      chrome.scripting.executeScript({
+        target: { tabId },
+        func: () => {
+          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');
+        },
       });
+      // 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': {

src/extension/build/manifest.json

@@ -3,14 +3,12 @@
   "version": "13.0.0",
   "devtools_page": "devtools.html",
   "description": "A Chrome extension that helps debug React applications by memorizing the state of components with every render.",
-  "manifest_version": 2,
-  "content_security_policy": "script-src 'self' https://www.gstatic.com:* 'unsafe-eval'; object-src 'self'",
+  "manifest_version": 3,
+  "content_security_policy": {
+    "extension_pages": "script-src 'self'; object-src 'self'"
+  },
   "background": {
-    "scripts": [
-      "bundles/background.bundle.js",
-      "bundles/content.bundle.js"
-    ],
-    "persistent": false
+    "service-worker": "bundles/background.bundle.js"
   },
   "icons": {
     "48": "assets/icon48.png",
@@ -27,13 +25,19 @@
       ]
     }
   ],
-  "web_accessible_resources": [
-    "bundles/backend.bundle.js"
-  ],
+  "web_accessible_resources": [{
+    "resources": ["bundles/backend.bundle.js"],
+    "matches": [
+      "http://localhost/*",
+      "https://localhost/*"
+    ]
+  }],
   "permissions": [
     "contextMenus",
     "tabs",
-    "activeTab",
+    "activeTab"
+  ],
+  "host_permissions": [
     "http://localhost/*",
     "https://localhost/*",
     "<all_urls>"

src/extension/build/panel.html

@@ -10,6 +10,6 @@
   <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>
+    <!-- <script type="text/javascript" src="https://www.gstatic.com/charts/49/loader.js"></script> -->
   </body>
 </html>