Merge pull request #186 from alphagov/update-manifest-to-v3-kml

Update Manifest to V3, include mixed-mode tudor crown icons
alphagov · Feb 19, 2024 · d1261f0 · d1261f0
2 parents 2a82d04 + 50bd343
commit d1261f0
Show file tree

Hide file tree

Showing 18 changed files with 105 additions and 70 deletions.
diff --git a/src/components/show-meta-tags-component/show-meta-tags-component.js b/src/components/show-meta-tags-component/show-meta-tags-component.js
@@ -75,7 +75,7 @@ ShowMetaTagsComponent.prototype.hideMetaTags = function () {
 
 ShowMetaTagsComponent.prototype.sendState = function () {
   chrome.runtime.sendMessage({
-    action: 'showMetaTagState',
-    showMetaTagsState: this.isMetaTagsDisplayed
+    action: 'showMetaTagsState',
+    metaTagsState: this.isMetaTagsDisplayed
   })
 }
diff --git a/src/events/icon.js b/src/events/icon.js
diff --git a/src/fetch-page-data.js b/src/fetch-page-data.js
@@ -11,7 +11,7 @@ chrome.runtime.sendMessage({
   renderingApplication: getMetatag('govuk:rendering-application'),
   abTestBuckets: getAbTestBuckets(),
   windowHeight: window.innerHeight,
-  highlightState: window.highlightComponent.state
+  highlightState: false // window.highlightComponent.state
 })
 
 function getMetatag (name) {

diff --git a/src/icons/crown-logo-19-active-dark-mode.png b/src/icons/crown-logo-19-active-dark-mode.png
diff --git a/src/icons/crown-logo-19-active.png b/src/icons/crown-logo-19-active.png
diff --git a/src/icons/crown-logo-19-inactive.png b/src/icons/crown-logo-19-inactive.png
diff --git a/src/icons/crown-logo-38-active-dark-mode.png b/src/icons/crown-logo-38-active-dark-mode.png
diff --git a/src/icons/crown-logo-38-active.png b/src/icons/crown-logo-38-active.png
diff --git a/src/icons/crown-logo-38-inactive.png b/src/icons/crown-logo-38-inactive.png
diff --git a/src/manifest.json b/src/manifest.json
@@ -1,14 +1,17 @@
 {
-  "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.23.0",
   "content_scripts": [
     {
-      "matches": ["https://*.gov.uk/*"],
+      "matches":
+       [
+         "https://*.gov.uk/*"
+        ],
+      "all_frames": true,
       "js": [
-        "popup/lib/jquery.min.js",
         "popup/lib/mustache.min.js",
         "components/highlight-component/highlight-component.js",
         "components/design-mode-component/design-mode-component.js",
@@ -27,26 +30,26 @@
     "128": "icons/128.png"
   },
   "permissions": [
-    "http://*.gov.uk/*",
-    "https://*.gov.uk/*",
     "cookies",
+    "declarativeContent",
+    "scripting",
     "tabs",
-    "webRequest",
-    "webRequestBlocking"
+    "webRequest"
   ],
-  "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/*"
+  ]
 }
diff --git a/src/popup.html b/src/popup.html
@@ -3,7 +3,6 @@
 <head>
   <meta charset="utf-8">
   <script src='popup/lib/mustache.min.js'></script>
-  <script src='popup/lib/jquery.min.js'></script>
 
   <script src='popup/ab_tests.js'></script>
   <script src='popup/content_links.js'></script>

diff --git a/src/popup/environment.js b/src/popup/environment.js
@@ -20,7 +20,15 @@ Popup.environment = function (location, host, origin) {
       allEnvironments: {
         name: 'GOV.UK',
         url: 'https://www.gov.uk'
+      },
+      currentEnvironment: {
+        name: 'Production',
+        protocol: 'https',
+        serviceDomain: 'publishing.service.gov.uk',
+        host: 'https://www.gov.uk',
+        origin: origin
       }
+
     }
   }
 

diff --git a/src/popup/lib/jquery.min.js b/src/popup/lib/jquery.min.js
diff --git a/src/popup/popup.js b/src/popup/popup.js
@@ -4,21 +4,24 @@ 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.
-  document.addEventListener('DOMContentLoaded', () => {
-    chrome.tabs.executeScript(null, {
-      code: 'window.highlightComponent = window.highlightComponent || new HighlightComponent; undefined;'
-    })
-
-    chrome.tabs.executeScript(null, {
-      code: 'window.designModeComponent = window.designModeComponent || new DesignModeComponent; undefined;'
-    })
 
-    chrome.tabs.executeScript(null, {
-      code: 'window.showMetaTagsComponent = window.showMetaTagsComponent || new ShowMetaTagsComponent; undefined;'
+  document.addEventListener('DOMContentLoaded', async () => {
+    let queryOptions = { active: true, lastFocusedWindow: true };
+    // `tab` will either be a `tabs.Tab` instance or `undefined`.
+    let [tab] = await chrome.tabs.query(queryOptions);
+
+    chrome.scripting.executeScript({
+      target: {tabId: tab.id},
+      func: () => {
+        window.highlightComponent = window.highlightComponent || new HighlightComponent
+        window.designModeComponent = window.designModeComponent || new DesignModeComponent
+        window.showMetaTagsComponent = window.showMetaTagsComponent || new ShowMetaTagsComponent
+      }
     })
 
-    chrome.tabs.executeScript(null, {
-      file: 'fetch-page-data.js'
+    chrome.scripting.executeScript({
+      target: {tabId: tab.id},
+      files: ['fetch-page-data.js']
     })
   })
 
@@ -29,8 +32,8 @@ var Popup = Popup || {};
     if (request.action === 'populatePopup') {
       // When we're asked to populate the popup, we'll first send the current
       // buckets back to the main thread, which "persists" them.
-      var abTestSettings = chrome.extension.getBackgroundPage().abTestSettings
-      var abTestBuckets = abTestSettings.initialize(request.abTestBuckets, request.currentLocation)
+      //var abTestSettings = chrome.extension.getBackgroundPage().abTestSettings
+      // var abTestBuckets = abTestSettings.initialize(request.abTestBuckets, request.currentLocation)
 
       renderPopup(
         request.currentLocation,
@@ -39,7 +42,7 @@ var Popup = Popup || {};
         request.currentPathname,
         request.renderingApplication,
         request.windowHeight,
-        abTestBuckets
+        null // abTestBuckets
       )
     }
   })
@@ -53,10 +56,10 @@ var Popup = Popup || {};
   })
 
   chrome.runtime.onMessage.addListener(function (request, _sender) {
-    if (request.action === 'showMetaTagState') {
+    if (request.action === 'showMetaTagsState') {
       // When we're asked to populate the popup, we'll first send the current
       // buckets back to the main thread, which "persists" them.
-      if (request.metaTags) { document.querySelector('#highlight-meta-tags').textContent = 'Hide meta tags' } else { document.querySelector('#highlight-meta-tags').textContent = 'Show meta tags' }
+      if (request.metaTagsState) { document.querySelector('#highlight-meta-tags').textContent = 'Hide meta tags' } else { document.querySelector('#highlight-meta-tags').textContent = 'Show meta tags' }
     }
   })
 
@@ -100,24 +103,25 @@ var Popup = Popup || {};
     }
   }
 
-  function renderView (view, currentUrl) {
+  async function renderView (view, currentUrl) {
     var template = document.querySelector('#template').innerHTML
     var popupContent = document.querySelector('#content')
     popupContent.innerHTML = Mustache.render(template, view)
     setupClicks()
 
     setupAbToggles(currentUrl)
 
-    chrome.tabs.executeScript(null, {
-      code: 'window.highlightComponent.sendState(); undefined;'
-    })
-
-    chrome.tabs.executeScript(null, {
-      code: 'window.showMetaTagsComponent.sendState(); undefined;'
-    })
-
-    chrome.tabs.executeScript(null, {
-      code: 'window.designModeComponent.sendState(); undefined;'
+    let queryOptions = { active: true, lastFocusedWindow: true };
+    // `tab` will either be a `tabs.Tab` instance or `undefined`.
+    let [tab] = await chrome.tabs.query(queryOptions);
+
+    chrome.scripting.executeScript({
+      target: {tabId: tab.id},
+      func: () => {
+        window.highlightComponent.sendState()
+        window.showMetaTagsComponent.sendState()
+        window.designModeComponent.sendState()
+      }
     })
   }
 
@@ -158,7 +162,7 @@ var Popup = Popup || {};
         // TODO: we're not actually re-rendering the popup correctly here, because
         // we don't have access to the DOM here. This is a temporary solution to
         // make most functionality work after the user clicks a button in the popup.
-        renderPopup(location, '', {})
+        renderPopup(location.href, location.host, location.origin, location.pathname, {})
       })
     })
 
@@ -201,10 +205,10 @@ 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 })
           }
         )
-      })
+1      })
     })
   }
 
@@ -214,15 +218,15 @@ var Popup = Popup || {};
   function createView (location, host, origin, pathname, renderingApplication, abTestBuckets) {
     var environment = Popup.environment(location, host, origin)
     var contentLinks = Popup.generateContentLinks(location, origin, pathname, environment.currentEnvironment, renderingApplication)
-    var abTests = Popup.findActiveAbTests(abTestBuckets)
+    // var abTests = Popup.findActiveAbTests(abTestBuckets)
 
     return {
       environments: environment.allEnvironments,
       currentEnvironment: environment.currentEnvironment,
       contentLinks: contentLinks,
       // external links will be populated by a call to the content store
       externalLinks: [],
-      abTests: abTests
+      abTests: [] // abTests
     }
   }
 

diff --git a/src/events/ab_bucket_store.js → src/service_utils/ab_bucket_store.js b/src/events/ab_bucket_store.js → src/service_utils/ab_bucket_store.js
diff --git a/src/events/ab_test_settings.js → src/service_utils/ab_test_settings.js b/src/events/ab_test_settings.js → src/service_utils/ab_test_settings.js
diff --git a/src/service_utils/icon.js b/src/service_utils/icon.js
@@ -0,0 +1,37 @@
+// This script runs in the service worker 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.
+chrome.declarativeContent.onPageChanged.removeRules(async () => {
+  chrome.declarativeContent.onPageChanged.addRules([{
+    conditions: [
+      new chrome.declarativeContent.PageStateMatcher({
+        pageUrl: { hostSuffix: 'www.gov.uk' },
+      }),
+      new chrome.declarativeContent.PageStateMatcher({
+        pageUrl: { hostSuffix: 'dev.gov.uk' },
+      }),
+      new chrome.declarativeContent.PageStateMatcher({
+        pageUrl: { hostSuffix: 'publishing.service.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(),
+    ],
+  }]);
+});
+
+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);
+}
diff --git a/src/service_worker.js b/src/service_worker.js
@@ -0,0 +1 @@
+importScripts("./service_utils/icon.js")