refactor!: manifest v3 support #1051

src/extension/background-script/actions/setup/setIcon.js

@@ -0,0 +1,27 @@
+import browser from "webextension-polyfill";
+
+const setIcon = async (message, sender) => {
+  // TODO: refactor names / rename files?
+  const names = {
+    active: "alby_icon_yellow",
+    off: "alby_icon_sleeping",
+  };
+  const name = names[message.args.icon];
+  return browser.action
+    .setIcon({
+      path: {
+        16: `assets/icons/${name}_16x16.png`,
+        32: `assets/icons/${name}_32x32.png`,
+        48: `assets/icons/${name}_48x48.png`,
+        128: `assets/icons/${name}_128x128.png`,
+      },
+      tabId: sender.tab.id,
+    })
+    .then(() => {
+      return {
+        data: true,
+      };
+    });
+};
+
+export default setIcon;

src/extension/background-script/index.ts

@@ -32,6 +32,7 @@ const extractLightningData = (
     // Adding a short delay because I've seen cases where this call has happened too fast
     // before the receiving side in the content-script was connected/listening
     setTimeout(() => {
+      // double check: https://developer.chrome.com/docs/extensions/mv3/migrating_to_service_workers/#alarms
       browser.tabs.sendMessage(tabId, {
         action: "extractLightningData",
       });
@@ -55,10 +56,26 @@ const updateIcon = async (
     .equalsIgnoreCase(url.host)
     .first();
 
-  await setIcon(
-    allowance ? ExtensionIcon.Active : ExtensionIcon.Default,
-    tabId
-  );
+  // TODO: move to some config file
+  const names = {
+    active: "alby_icon_yellow",
+    off: "alby_icon_sleeping",
+  };
+  let name;
+  if (allowance) {
+    name = names.active;
+  } else {
+    name = names.off;
+  }
+  return browser.action.setIcon({
+    path: {
+      16: `assets/icons/${name}_16x16.png`,
+      32: `assets/icons/${name}_32x32.png`,
+      48: `assets/icons/${name}_48x48.png`,
+      128: `assets/icons/${name}_128x128.png`,
+    },
+    tabId: tabId,
+  });
 };
 
 const debugLogger = (message: unknown, sender: Runtime.MessageSender) => {

src/extension/content-script/injectScript.js

@@ -13,7 +13,7 @@ export default function injectScript() {
     scriptEl.setAttribute("type", "text/javascript");
     scriptEl.setAttribute(
       "src",
-      browser.extension.getURL("js/inpageScript.bundle.js")
+      browser.extension.getURL("js/inpageScript.bundle.js") // https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/#sunset-deprecated-apis
     );
     container.appendChild(scriptEl);
   } catch (err) {

src/manifest.json

@@ -1,7 +1,7 @@
 {
-  "manifest_version": 2,
+  "manifest_version": 3,
   "name": "Alby - Bitcoin Lightning Wallet",
-  "version": "0.0.0",
+  "version": "1.0.0",
 
   "icons": {
     "16": "assets/icons/alby_icon_yellow_16x16.png",
@@ -11,18 +11,29 @@
   },
   "description": "The Bitcoin Lightning wallet for direct payments across the globe, Bitcoin Lightning applications and passwordless logins.",
   "homepage_url": "https://getAlby.com/",
-  "web_accessible_resources": ["js/inpageScript.bundle.js"],
+
+  "COMMENT_web_accessible_resources": "https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/#web-accessible-resources",
+  "web_accessible_resources": [
+    {
+      "resources": ["js/inpageScript.bundle.js"]
+    }
+  ],
+
   "permissions": [
     "notifications",
     "activeTab",
     "tabs",
     "storage",
-    "unlimitedStorage",
     "nativeMessaging",
-    "*://*/*"
+    "unlimitedStorage"
   ],
+  "host_permissions": ["*://*/*"],
 
-  "content_security_policy": "script-src 'self'; object-src 'self'",
+  "COMMENT_content_security_policy": [
+    "https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/#content-security-policy",
+    "https://developer.chrome.com/docs/extensions/mv3/mv3-migration-checklist/#security_checklist"
+  ],
+  "content_security_policy.extension_pages": "script-src 'self'; object-src 'self'",
 
   "__chrome|firefox__author": "Alby",
   "__opera__developer": {
@@ -35,10 +46,10 @@
     }
   },
 
-  "__chrome__minimum_chrome_version": "49",
+  "__chrome__minimum_chrome_version": "88",
   "__opera__minimum_opera_version": "36",
 
-  "browser_action": {
+  "action": {
     "default_popup": "popup.html",
     "default_icon": {
       "16": "assets/icons/alby_icon_yellow_16x16.png",
@@ -89,8 +100,7 @@
   },
 
   "background": {
-    "scripts": ["js/background.bundle.js"],
-    "__chrome|opera__persistent": true
+    "service_worker": "js/background.bundle.js"
   },
 
   "content_scripts": [