Convert to manifest v3 (#2111)

skeletons/web-extension/background-script.js → skeletons/web-extension/background.js

@@ -3,7 +3,7 @@
 /**
  * Long lived background script running in the browser, works in tandem with the
  * client-script to coordinate messaging between EmberDebug, EmberInspector and the
- * ClientApp.  The background-script serves as a proxy between the EmberInspector
+ * ClientApp. The background.js script serves as a proxy between the EmberInspector
  * and the content-script.
  *
  * It is also responsible for showing the Ember icon and tooltip in the url bar.
@@ -32,26 +32,26 @@
   }
 
   /**
-   * Creates the title for the pageAction for the current ClientApp
+   * Creates the title for the action for the current ClientApp
    * @param {Number} tabId - the current tab
    */
   function setActionTitle(tabId) {
-    chrome.pageAction.setTitle({
+    chrome.action.setTitle({
       tabId: tabId,
       title: generateVersionsTooltip(activeTabs[tabId])
     });
   }
 
   /**
-   * Update the tab's pageAction: https://developer.chrome.com/extensions/pageAction
+   * Update the tab's action: https://developer.chrome.com/extensions/pageAction
    * If the user has choosen to display it, the icon is shown and the title
    * is updated to display the ClientApp's information in the tooltip.
    * @param {Number} tabId - the current tab
    */
   function updateTabAction(tabId) {
     chrome.storage.sync.get("options", function(data) {
       if (!data.options || !data.options.showTomster) { return; }
-      chrome.pageAction.show(tabId);
+      chrome.action.show(tabId);
       setActionTitle(tabId);
     });
   }
@@ -66,7 +66,7 @@
       return;
     }
 
-    chrome.pageAction.hide(tabId);
+    chrome.action.hide(tabId);
   }
 
   /**

skeletons/web-extension/content-script.js

@@ -1,10 +1,10 @@
 /* global chrome*/
 
 /**
- * Content script injected into the app page by chrome, works in tandem with the
- * background-script to coordinate messaging between EmberDebug, EmberInspector and the
+ * Content script injected into the app page by chrome, works in tandem with
+ * background.js to coordinate messaging between EmberDebug, EmberInspector and the
  * ClientApp.  The content-script serves as a proxy between EmberDebug
- * and the background-script.
+ * and background.js.
  *
  * Content scripts are loaded into every page, and have access to the DOM.  This uses that
  * to inject the in-page-script to determine the ClientApp version onLoad.
@@ -18,7 +18,7 @@
    * that proxies between the content-script and EmberDebug using a MessagingChannel.
    *
    * All events from the window are filtered by checking that data and data.type
-   * properties exist before sending messages on to the background-script.
+   * properties exist before sending messages on to the background script.
    *
    * See:
    *     https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API
@@ -38,7 +38,7 @@
    * @param {Object} emberDebugPort
    */
   function listenToEmberDebugPort(emberDebugPort) {
-    // listen for messages from EmberDebug, and pass them on to the background-script
+    // listen for messages from EmberDebug, and pass them on to the background script
     emberDebugPort.addEventListener('message', function(event) {
       chrome.runtime.sendMessage(event.data);
     });

skeletons/web-extension/manifest.json

@@ -1,58 +1,61 @@
 {
-  "manifest_version": 2,
+  "manifest_version": 3,
 
   "name": "Ember Inspector",
   "description": "Tool for debugging Ember applications.",
   "version": "{{EMBER_INSPECTOR_VERSION}}",
 
   "icons": {
-    "16":  "{{PANE_ROOT}}/assets/images/icon16.png",
+    "16": "{{PANE_ROOT}}/assets/images/icon16.png",
     "32": "{{PANE_ROOT}}/assets/images/icon38.png",
-    "48":  "{{PANE_ROOT}}/assets/images/icon48.png",
+    "48": "{{PANE_ROOT}}/assets/images/icon48.png",
     "128": "{{PANE_ROOT}}/assets/images/icon128.png"
   },
 
-  "permissions": [
-    "<all_urls>",
-    "storage",
-    "contextMenus"
-  ],
-
-  "content_security_policy": "script-src 'self'; object-src 'self'",
-  "devtools_page": "devtools.html",
+  "permissions": ["<all_urls>", "storage", "contextMenus"],
 
-  "content_scripts": [{
-    "matches": ["<all_urls>"],
-    "js": ["boot.js"],
-    "run_at": "document_start",
-    "match_about_blank": true,
-    "all_frames": true
+  "content_security_policy": {
+    "extension_pages": "script-src 'self'; object-src 'self'"
   },
+
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["boot.js"],
+      "run_at": "document_start",
+      "match_about_blank": true,
+      "all_frames": true
+    },
     {
       "matches": ["<all_urls>"],
       "js": ["content-script.js"],
       "run_at": "document_end",
       "match_about_blank": true,
       "all_frames": true
-    }],
+    }
+  ],
 
-  "background": {
-    "scripts": ["background-script.js"]
-  },
+  "devtools_page": "devtools.html",
 
-  "page_action": {
+  "action": {
     "default_icon": {
       "19": "{{PANE_ROOT}}/assets/images/icon19.png",
       "38": "{{PANE_ROOT}}/assets/images/icon38.png"
     },
     "default_title": "This webpage is not running Ember.js"
   },
 
-  "web_accessible_resources": [
-    "scripts/in-page-script.js"
-  ],
+  "background": {
+    "service_worker": "background.js"
+  },
 
   "options_ui": {
     "page": "options-dialog.html"
-  }
+  },
+
+  "web_accessible_resources": [
+    {
+      "resources": ["scripts/in-page-script.js"]
+    }
+  ]
 }

tests/integration/injection-test.js

@@ -224,9 +224,7 @@ module('Integration | Injection', function (hooks) {
 
   async function inject(owner, assert) {
     if (injected) return;
-    const backgroundScript = await (
-      await fetch('/background-script.js')
-    ).text();
+    const backgroundScript = await (await fetch('/background.js')).text();
     {
       // eslint-disable-next-line no-unused-vars
       const chrome = backgroundChromeApi;