Migrate to manifest v3 in Chrome

Author: poeck

apps/browser/rules/csp.json

@@ -0,0 +1,26 @@
+[
+  {
+    "id": 1,
+    "priority": 1,
+    "condition": {
+      "urlFilter": "abc*d"
+    },
+    "action": {
+      "type": "modifyHeaders",
+      "responseHeaders": [
+        {
+          "header": "Content-Security-Policy",
+          "operation": "remove"
+        },
+        {
+          "header": "X-Webkit-CSP",
+          "operation": "remove"
+        },
+        {
+          "header": "X-Frame-Options",
+          "operation": "remove"
+        }
+      ]
+    }
+  }
+]

apps/browser/src/components/Frame.tsx

@@ -47,7 +47,7 @@ function Frame({ withMotion, children, dark, dispatch, onLoaded, ...props }) {
     const css = document.createElement("link");
     css.rel = "stylesheet";
     css.type = "text/css";
-    css.href = chrome.extension.getURL("css/app.css");
+    css.href = chrome.runtime.getURL("css/app.css");
     css.onload = () => {
       setCssLoading(false);
     };

apps/browser/src/entry/background.ts

@@ -22,7 +22,13 @@ if (App.isDev()) require("crx-hotreload");
     });
   }
 
-  if (chrome.webRequest) {
+  if (chrome.action) {
+    chrome.action.onClicked.addListener(() => {
+      Tab.send("action:click");
+    });
+  }
+
+  if (chrome.webRequest && !(!App.isDev() && App.isChrome())) {
     chrome.webRequest.onHeadersReceived.addListener(
       Events.onHttpRequest,
       {

apps/browser/src/util/policy.ts

@@ -81,8 +81,7 @@ export default class Policy {
     return (
       name == "CONTENT-SECURITY-POLICY" ||
       name == "X-WEBKIT-CSP" ||
-      name == "X-FRAME-OPTIONS" ||
-      name == "CONTENT_SECURITY_REPORT_ONLY"
+      name == "X-FRAME-OPTIONS"
     );
   }
 

apps/browser/webpack.config.js

@@ -80,9 +80,9 @@ module.exports = function (_, env) {
             to: "manifest.json",
           },
           { from: path.join(__dirname, "assets"), to: "assets" },
+          { from: path.join(__dirname, "rules"), to: "rules" },
         ],
       }),
-      // env.mode == "production" && new BundleAnalyzerPlugin(),
     ].filter((p) => p !== false),
   };
 };

gulpfile.js

@@ -46,7 +46,7 @@ function distChrome() {
   return dist("chrome", (manifest) => {
     manifest.version = package.version;
     manifest.externally_connectable.matches.pop();
-    return manifest;
+    return toV3(manifest);
   });
 }
 
@@ -58,6 +58,51 @@ function distEdge() {
   });
 }
 
+function toV3(manifest) {
+  manifest.manifest_version = 3;
+  manifest.background.service_worker = manifest.background.scripts[0];
+  manifest.action = manifest.browser_action;
+  manifest.host_permissions = ["*://*/*"];
+
+  manifest.web_accessible_resources = [
+    {
+      resources: manifest.web_accessible_resources,
+      matches: ["http://*/*", "https://*/*"],
+    },
+  ];
+
+  manifest.declarative_net_request = {
+    rule_resources: [
+      {
+        id: "CSP Change",
+        path: "rules/csp.json",
+        enabled: true,
+      },
+    ],
+  };
+
+  manifest.permissions = manifest.permissions.filter(
+    (p) =>
+      ![
+        "http://*/*",
+        "https://*/*",
+        "webRequest",
+        "webRequestBlocking",
+      ].includes(p)
+  );
+
+  manifest.permissions.push(
+    "declarativeNetRequest",
+    "declarativeNetRequestFeedback"
+  );
+
+  delete manifest.background.scripts;
+  delete manifest.background.persistent;
+  delete manifest.browser_action;
+
+  return manifest;
+}
+
 exports["dist:firefox"] = distFirefox;
 exports["dist:chrome"] = distChrome;
 exports["dist:opera"] = distOpera;