Upgrade to manifest v3

tbranyen · Nov 27, 2022 · 0c4683e · 0c4683e
1 parent 3b75c18
commit 0c4683e
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 26 deletions.
diff --git a/packages/diffhtml-devtools/LICENSE b/packages/diffhtml-devtools/LICENSE
@@ -1,4 +1,4 @@
-Copyright (c) 2020 Tim Branyen
+Copyright (c) 2022 Tim Branyen
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in

diff --git a/packages/diffhtml-devtools/chrome-extension/manifest.json b/packages/diffhtml-devtools/chrome-extension/manifest.json
@@ -4,36 +4,38 @@
   "description": "Official diffHTML Chrome DevTools Extension",
   "permissions": [
     "tabs",
+    "scripting"
+  ],
+  "host_permissions": [
     "*://*/*",
+    "file://*/*",
     "http://*/*",
     "https://*/*"
   ],
   "background": {
-    "scripts": ["js/background.js"]
+    "service_worker": "js/background.js"
   },
-  "content_scripts": [{
-    "matches": ["<all_urls>", "*://*/*", "http://*/*", "https://*/*"],
-    "js": ["js/contentscript.js"],
-    "run_at": "document_start"
+  "web_accessible_resources": [{
+    "resources": [
+      "devtools.es5.js",
+      "scripts/*",
+      "scripts/**/*",
+      "styles/*",
+      "styles/**/*",
+      "node_modules/**/*",
+      "markup/*",
+      "markup/**/*",
+      "icons/*",
+      "icons/**/*"
+    ],
+    "matches": ["<all_urls>"]
   }],
-  "web_accessible_resources": [
-    "devtools.es5.js",
-    "scripts/*",
-    "scripts/**/*",
-    "styles/*",
-    "styles/**/*",
-    "node_modules/**/*",
-    "markup/*",
-    "markup/**/*",
-    "icons/*",
-    "icons/**/*"
-  ],
   "icons": {
     "16": "icons/logo-16.png",
     "48": "icons/logo-48.png",
     "128": "icons/logo-128.png"
   },
   "devtools_page": "markup/devtools.html",
-  "manifest_version": 2,
+  "manifest_version": 3,
   "default_locale": "en"
 }
diff --git a/packages/diffhtml-devtools/lib/scripts/background.js b/packages/diffhtml-devtools/lib/scripts/background.js
@@ -13,9 +13,14 @@ chrome.runtime.onConnect.addListener(port => {
       });
 
       if (message.name === 'init') {
-        chrome.tabs.executeScript(message.tabId, {
-          file: message.scriptToInject,
+        chrome.scripting.executeScript({
+          target: {tabId: message.tabId},
+          files: [message.scriptToInject]
         });
+
+        //chrome.tabs.executeScript(message.tabId, {
+        //  file: message.scriptToInject,
+        //});
       }
     };
 

diff --git a/packages/diffhtml-devtools/lib/scripts/contentscript.js b/packages/diffhtml-devtools/lib/scripts/contentscript.js
@@ -6,6 +6,7 @@
 // a better way to do this, but I haven't looked into it yet.
 const path = require('path');
 const fs = require('fs');
+// Import these directly, use ESM
 const bridgeModule = fs.readFileSync(path.join(__dirname, '/../../chrome-extension/dist/extension/js/bridge.js'), 'utf8');
 const injectorModule = fs.readFileSync(path.join(__dirname, '/injector.js'), 'utf8');
 const { parse } = JSON;

diff --git a/packages/diffhtml-devtools/lib/scripts/index.js b/packages/diffhtml-devtools/lib/scripts/index.js
@@ -167,9 +167,7 @@ const render = () => outerHTML(main, html`
       </devtools-panels>
     </devtools-split-view>
   </main>
-`).catch(ex => {
-  throw ex;
-});
+`);
 
 const clone = x => parse(stringify(x));
 

diff --git a/packages/diffhtml-devtools/lib/scripts/panels/mounts.js b/packages/diffhtml-devtools/lib/scripts/panels/mounts.js
@@ -19,7 +19,8 @@ class DevtoolsMountsPanel extends Component {
     const { isExpanded, activeTab } = this.state;
     const { styles, setActive } = this;
 
-    const options = mounts.map(({ selector }) => ({
+    // FIXME Shouldn't need to concat and filter.
+    const options = [].concat(mounts).filter(Boolean).map(({ selector }) => ({
       text: selector,
       value: selector,
     }));
@@ -52,7 +53,7 @@ class DevtoolsMountsPanel extends Component {
         <div class="ui attached tabular menu">
           ${options.map((option, i) => html`
             <div class="ui item ${activeTab === i && 'active'}">
-              <a href="#" onClick=${setActive(i)}>&lt;${option.text.trim()}&gt;</a>
+              <a href="#" onClick=${setActive(i)}>&lt;${String(option.text).trim()}&gt;</a>
             </div>
           `)}
         </div>

diff --git a/packages/diffhtml-devtools/package.json b/packages/diffhtml-devtools/package.json
@@ -2,6 +2,9 @@
   "name": "diffhtml-devtools",
   "private": true,
   "main": "module/devtools.es5.js",
+  "scripts": {
+    "build": "grunt"
+  },
   "devDependencies": {
     "@babel/core": "^7.17.8",
     "@babel/plugin-proposal-class-properties": "^7.16.7",
@@ -44,6 +47,13 @@
     "uglifyify": "^5.0.2",
     "unique-selector": "^0.5.0"
   },
+  "dependencies": {
+    "babel-plugin-transform-diffhtml": "^1.0.0-beta.29",
+    "diffhtml": "^1.0.0-beta.29",
+    "diffhtml-components": "^1.0.0-beta.29",
+    "diffhtml-react-compat": "^1.0.0-beta.29",
+    "diffhtml-middleware-synthetic-events": "^1.0.0-beta.29"
+  },
   "aliasify": {
     "aliases": {
       "react": "diffhtml-react-compat",