wip

src/events/icon.js

@@ -1,15 +1,31 @@
 // This script runs in the background in Chrome. It will activate the small
 // greyed out GOV.UK logo in the Chrome menu bar whenever we're on a gov.uk page.
-function showIconForGovukPages (tabId, changeInfo, tab) {
-  if (tab.url.match(/www\.gov\.uk/) || tab.url.match(/dev\.gov\.uk/) || tab.url.match(/.*publishing\.service\.gov\.uk/)) {
-    chrome.pageAction.show(tabId)
-    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      chrome.pageAction.setIcon({ tabId: tabId, path: { 19: 'icons/crown-logo-19-active-dark-mode.png', 38: 'icons/crown-logo-38-active-dark-mode.png' } })
-    } else {
-      chrome.pageAction.setIcon({ tabId: tabId, path: { 19: 'icons/crown-logo-19-active.png', 38: 'icons/crown-logo-38-active.png' } })
-    }
-  }
-}
+chrome.declarativeContent.onPageChanged.removeRules(async () => {
+  chrome.declarativeContent.onPageChanged.addRules([{
+    conditions: [
+      new chrome.declarativeContent.PageStateMatcher({
+        pageUrl: { hostSuffix: 'www.gov.uk' },
+      }),
+    ],
+    actions: [
+      new chrome.declarativeContent.SetIcon({
+        imageData: {
+          19: await loadImageData('icons/crown-logo-19-active.png'),
+          38: await loadImageData('icons/crown-logo-38-active.png'),
+        },
+      }),
+      chrome.declarativeContent.ShowAction
+        ? new chrome.declarativeContent.ShowAction()
+        : new chrome.declarativeContent.ShowPageAction(),
+    ],
+  }]);
+});
 
-chrome.tabs.onCreated.addListener(showIconForGovukPages)
-chrome.tabs.onUpdated.addListener(showIconForGovukPages)
+async function loadImageData(url) {
+  const img = await createImageBitmap(await (await fetch(url)).blob());
+  const {width: w, height: h} = img;
+  const canvas = new OffscreenCanvas(w, h);
+  const ctx = canvas.getContext('2d');
+  ctx.drawImage(img, 0, 0, w, h);
+  return ctx.getImageData(0, 0, w, h);
+}

src/manifest.json

@@ -1,12 +1,15 @@
 {
-  "manifest_version": 2,
+  "manifest_version": 3,
   "name": "GOV.UK Browser Extension",
   "description": "Switch between GOV.UK environments and content",
   "homepage_url": "https://github.com/alphagov/govuk-browser-extension",
-  "version": "1.22.0",
+  "version": "1.22.1",
   "content_scripts": [
     {
-      "matches": ["https://*.gov.uk/*"],
+      "matches":
+       [
+         "https://*.gov.uk/*"
+        ],
       "js": [
         "popup/lib/jquery.min.js",
         "popup/lib/mustache.min.js",
@@ -27,26 +30,26 @@
     "128": "icons/128.png"
   },
   "permissions": [
-    "http://*.gov.uk/*",
-    "https://*.gov.uk/*",
     "cookies",
+    "scripting",
     "tabs",
     "webRequest",
-    "webRequestBlocking"
+    "declarativeContent"
   ],
-  "page_action": {
+  "background": {
+    "service_worker": "service_worker.js"
+  },
+  "action": {
     "default_icon": {
       "19": "icons/crown-logo-19-inactive.png",
       "38": "icons/crown-logo-38-inactive.png"
     },
     "default_title": "GOV.UK",
     "default_popup": "popup.html"
   },
-  "background": {
-    "scripts": [
-      "events/icon.js",
-      "events/ab_bucket_store.js",
-      "events/ab_test_settings.js"
-    ]
-  }
+  "content_security_policy": {},
+  "host_permissions": [
+    "http://*.gov.uk/*",
+    "https://*.gov.uk/*"
+  ]
 }

src/popup/popup.js

@@ -4,21 +4,33 @@ var Popup = Popup || {};
 (function () {
   // Execute a script on the main thread (which has access to the currently
   // loaded page). This script will call back to us.
+  async function getCurrentTab() {
+    let queryOptions = { active: true, lastFocusedWindow: true };
+    // `tab` will either be a `tabs.Tab` instance or `undefined`.
+    let [tab] = await chrome.tabs.query(queryOptions);
+    return tab;
+  }
+  var tab = await getCurrentTab();
+  console.log(tab)
   document.addEventListener('DOMContentLoaded', () => {
-    chrome.tabs.executeScript(null, {
+    chrome.scripting.executeScript({
+      target: {tabId: tab.id},
       code: 'window.highlightComponent = window.highlightComponent || new HighlightComponent; undefined;'
     })
 
-    chrome.tabs.executeScript(null, {
+    chrome.scripting.executeScript({
+      target: {tabId: tab.id},
       code: 'window.designModeComponent = window.designModeComponent || new DesignModeComponent; undefined;'
     })
 
-    chrome.tabs.executeScript(null, {
+    chrome.scripting.executeScript({
+      target: {tabId: tab.id},
       code: 'window.showMetaTagsComponent = window.showMetaTagsComponent || new ShowMetaTagsComponent; undefined;'
     })
 
-    chrome.tabs.executeScript(null, {
-      file: 'fetch-page-data.js'
+    chrome.scripting.executeScript({
+      target: {tabId: tab.id},
+      files: ['fetch-page-data.js']
     })
   })
 
@@ -108,15 +120,18 @@ var Popup = Popup || {};
 
     setupAbToggles(currentUrl)
 
-    chrome.tabs.executeScript(null, {
+    chrome.scripting.executeScript({
+      target: {tabId: tab.id},
       code: 'window.highlightComponent.sendState(); undefined;'
     })
 
-    chrome.tabs.executeScript(null, {
+    chrome.scripting.executeScript({
+      target: {tabId: tab.id},
       code: 'window.showMetaTagsComponent.sendState(); undefined;'
     })
 
-    chrome.tabs.executeScript(null, {
+    chrome.scripting.executeScript({
+      target: {tabId: tab.id},
       code: 'window.designModeComponent.sendState(); undefined;'
     })
   }
@@ -201,7 +216,7 @@ var Popup = Popup || {};
               testBucket.classList.remove('ab-bucket-selected')
             }
             abTestBucket.classList.add('ab-bucket-selected')
-            chrome.tabs.reload(null, { bypassCache: true })
+            chrome.tabs.reload(tab.id, { bypassCache: true })
           }
         )
       })