Upgrade to Manifest v3 (#104)

* Mv3 (#87)

* migrate manifest from v2 to v3

* update manifest file

* bump extensino to v1.2

---------

Co-authored-by: Jérémy Riverain <[email protected]>

manifest.json

@@ -1,44 +1,42 @@
 {
   "name": "Web Vitals",
-  "version": "1.1.1",
-  "manifest_version": 2,
+  "version": "1.2.0",
+  "manifest_version": 3,
   "description": "Measure metrics for a healthy site",
   "homepage_url": "https://web.dev/vitals/",
   "icons": {
     "128": "icons/vitals128w.png",
     "256": "icons/vitals256w.png",
     "512": "icons/vitals512w.png"
   },
-  "browser_action": {
+  "action": {
     "default_icon": "icons/default256w.png",
     "default_title": "Web Vitals",
     "default_popup": "src/browser_action/popup.html"
   },
   "options_page": "src/options/options.html",
-  "permissions": [
-    "tabs",
-    "storage",
-    "activeTab",
-    "http://localhost/",
-    "http://*/*",
-    "https://*/*",
-    "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?*"
-  ],
+  "host_permissions": ["*://*/*"],
+  "permissions": ["tabs", "storage", "activeTab", "scripting"],
   "web_accessible_resources": [
-    "src/browser_action/viewer.css",
-    "src/browser_action/web-vitals.js",
-    "/node_modules/web-vitals/dist/web-vitals.js"
+    {
+      "resources": [
+        "src/browser_action/viewer.css",
+        "src/browser_action/web-vitals.js"
+      ],
+      "matches": ["*://*/*"]
+    }
   ],
   "content_scripts": [
     {
-      "matches": ["https://*/*", "http://*/*"],
+      "matches": ["*://*/*"],
       "css": ["src/browser_action/viewer.css"],
       "js": ["src/browser_action/lodash-debounce-custom.js"]
     }
   ],
   "background": {
-    "scripts": ["src/bg/background.js"],
-    "persistent": false
+    "service_worker": "service_worker.js"
   },
-  "content_security_policy": "script-src 'self' https://www.googleapis.com; object-src 'self'"
+  "content_security_policy": {
+    "extension_pages": "default-src 'self'; connect-src https://chromeuxreport.googleapis.com;"
+  }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-vitals-extension",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Instant Web Vitals metrics",
   "main": "src/browser_action/vitals.js",
   "repository": "https://github.com/googlechrome/web-vitals-extension",

src/bg/background.js → service_worker.js

@@ -41,8 +41,9 @@ function hashCode(str) {
  * @param {Number} tabId
  */
 function getWebVitals(tabId) {
-  chrome.tabs.executeScript({
-    file: 'src/browser_action/vitals.js',
+  chrome.scripting.executeScript({
+    target: { tabId: tabId },
+    files: ['src/browser_action/vitals.js'],
   }, (result) => {
     // Catch errors such as "This page cannot be scripted due
     // to an ExtensionsSettings policy."
@@ -90,27 +91,27 @@ function badgeOverallPerf(badgeCategory, tabid) {
 
     switch (badgeCategory) {
       case 'POOR':
-        chrome.browserAction.setIcon({
+        chrome.action.setIcon({
           path: '../../icons/slow128w.png',
           tabId: currentTab,
         });
-        chrome.browserAction.setBadgeText({
+        chrome.action.setBadgeText({
           text: '',
           tabId: currentTab,
         });
         break;
       case 'GOOD':
-        chrome.browserAction.setIcon({
+        chrome.action.setIcon({
           path: '../../icons/fast128w.png',
           tabId: currentTab,
         });
         break;
       default:
-        chrome.browserAction.setIcon({
+        chrome.action.setIcon({
           path: '../../icons/default128w.png',
           tabId: currentTab,
         });
-        chrome.browserAction.setBadgeText({
+        chrome.action.setBadgeText({
           text: '',
           tabId: currentTab,
         });
@@ -148,57 +149,57 @@ function badgeMetric(metric, value, tabid) {
 
     switch (metric) {
       case 'lcp':
-        chrome.browserAction.setIcon({
+        chrome.action.setIcon({
           path: '../../icons/slow128w-lcp.png',
           tabId: currentTab,
         });
-        chrome.browserAction.setBadgeBackgroundColor({
+        chrome.action.setBadgeBackgroundColor({
           color: bgColor,
           tabId: currentTab,
         });
-        chrome.browserAction.setBadgeText({
-          text: (value/1000).toFixed(2),
+        chrome.action.setBadgeText({
+          text: (value / 1000).toFixed(2),
           tabId: currentTab,
         });
         break;
       case 'cls':
-        chrome.browserAction.setIcon({
+        chrome.action.setIcon({
           path: '../../icons/slow128w-cls.png',
           tabId: currentTab,
         });
-        chrome.browserAction.setBadgeBackgroundColor({
+        chrome.action.setBadgeBackgroundColor({
           color: bgColor,
           tabId: currentTab,
         });
-        chrome.browserAction.setBadgeText({
+        chrome.action.setBadgeText({
           text: (value).toFixed(2),
           tabId: currentTab,
         });
         break;
       case 'fid':
-        chrome.browserAction.setIcon({
+        chrome.action.setIcon({
           path: '../../icons/slow128w-fid.png',
           tabId: currentTab,
         });
-        chrome.browserAction.setBadgeBackgroundColor({
+        chrome.action.setBadgeBackgroundColor({
           color: bgColor,
           tabId: currentTab,
         });
-        chrome.browserAction.setBadgeText({
+        chrome.action.setBadgeText({
           text: value.toFixed(2),
           tabId: currentTab,
         });
         break;
       default:
-        chrome.browserAction.setIcon({
+        chrome.action.setIcon({
           path: '../../icons/default128w.png',
           tabId: currentTab,
         });
-        chrome.browserAction.setBadgeBackgroundColor({
+        chrome.action.setBadgeBackgroundColor({
           color: '',
           tabId: currentTab,
         });
-        chrome.browserAction.setBadgeText({
+        chrome.action.setBadgeText({
           text: '',
           tabId: currentTab,
         });