Merge pull request #7 from oslabs-beta/robby/manifest-migration

Robby/manifest migration - all updates to the Manifest now compliant with V3 policies. Request for approval on Chrome Store being submitted.

Author: khobread

src/extension/background.js

@@ -1,5 +1,6 @@
 // Import snapshots from "../app/components/snapshots".
-import 'core-js';
+// import 'core-js';
+
 // Store ports in an array.
 const portsArr = [];
 const reloaded = {};
@@ -198,13 +199,10 @@ chrome.runtime.onConnect.addListener(port => {
         tabsObj[tabId].mode.persist = payload;
         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'],
-        // });
-        // This line below will need to be removed
-        chrome.tabs.executeScript(tabId, { file: 'bundles/content.bundle.js' });
+        chrome.scripting.executeScript({
+          target: { tabId },
+          files: ['bundles/content.bundle.js'],
+        });
         return true;
       case 'jumpToSnap':
         chrome.tabs.sendMessage(tabId, msg);
@@ -282,19 +280,20 @@ 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');
-      `,
+      const injectScript = (file, tab) => {
+        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 = tab + '-' + document.title;
+        htmlBody.appendChild(script);
+      };
+
+      chrome.scripting.executeScript({
+        target: { tabId },
+        function: injectScript,
+        args: [chrome.runtime.getURL('bundles/backend.bundle.js'), tabId],
       });
       break;
     }

src/extension/build/manifest.json

@@ -1,41 +1,28 @@
 {
   "name": "Reactime",
-  "version": "13.0.0",
+  "version": "14.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,
   "background": {
-    "scripts": [
-      "bundles/background.bundle.js",
-      "bundles/content.bundle.js"
-    ],
-    "persistent": false
+    "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": [
-    "bundles/backend.bundle.js"
+    {
+      "resources": ["bundles/backend.bundle.js"],
+      "matches": ["<all_urls>"]
+    }
   ],
-  "permissions": [
-    "contextMenus",
-    "tabs",
-    "activeTab",
-    "http://localhost/*",
-    "https://localhost/*",
-    "<all_urls>"
-  ]
+  "permissions": ["contextMenus", "tabs", "activeTab", "scripting"],
+  "host_permissions": ["<all_urls>"]
 }

src/extension/build/panel.html

@@ -4,12 +4,11 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>Reactime 12.0</title>
+    <title>Reactime 14.0</title>
   </head>
 
   <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>

webpack.config.js

@@ -82,6 +82,7 @@ const config = {
 
 module.exports = (env, argv) => {
   if (argv.mode === 'development') {
+    config.devtool = 'cheap-module-source-map';
     config.plugins.push(
       new ChromeExtensionReloader({
         entries: {