diff --git a/packages/diffhtml-devtools/LICENSE b/packages/diffhtml-devtools/LICENSE
index a48db318..78e28468 100644
--- 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
index f8f508e4..dc68a033 100644
--- 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": ["", "*://*/*", "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": [""]
}],
- "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
index 16bfddc5..87e30730 100644
--- 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
index b8159c6b..7cb9ff35 100644
--- 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
index 2a546f0f..933e6d5f 100644
--- 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`
-`).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
index f0e87d55..127026b2 100644
--- 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 {
diff --git a/packages/diffhtml-devtools/package.json b/packages/diffhtml-devtools/package.json
index fa12532c..c30eb290 100644
--- 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",