add devtools support. Fixed lxieyang#17

zurukumo · Jan 5, 2021 · ecb9b11 · ecb9b11
1 parent 7b14206
commit ecb9b11
Show file tree

Hide file tree

Showing 10 changed files with 72 additions and 6 deletions.
diff --git a/.gitignore b/.gitignore
@@ -15,6 +15,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.history
 
 # secrets
 secrets.*.js
diff --git a/src/manifest.json b/src/manifest.json
@@ -14,11 +14,14 @@
   "icons": {
     "128": "icon-128.png"
   },
-  "content_scripts": [{
-    "matches": ["http://*/*", "https://*/*", "<all_urls>"],
-    "js": ["contentScript.bundle.js"],
-    "css": ["content.styles.css"]
-  }],
+  "content_scripts": [
+    {
+      "matches": ["http://*/*", "https://*/*", "<all_urls>"],
+      "js": ["contentScript.bundle.js"],
+      "css": ["content.styles.css"]
+    }
+  ],
+  "devtools_page": "devtools.html",
   "web_accessible_resources": [
     "content.styles.css",
     "icon-128.png",

diff --git a/src/pages/Devtools/index.html b/src/pages/Devtools/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title></title>
+  </head>
+
+  <body></body>
+</html>
diff --git a/src/pages/Devtools/index.js b/src/pages/Devtools/index.js
@@ -0,0 +1 @@
+chrome.devtools.panels.create('Dev Tools', 'icon-34.png', 'panel.html');
diff --git a/src/pages/Panel/Panel.css b/src/pages/Panel/Panel.css
@@ -0,0 +1,7 @@
+body {
+  background-color: #242424;
+}
+
+.container {
+  color: #ffffff;
+}
diff --git a/src/pages/Panel/Panel.tsx b/src/pages/Panel/Panel.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import './Panel.css';
+
+const Panel = (): JSX.Element => {
+  return (
+    <div className="container">
+      <h1>Dev Tools Panel</h1>
+    </div>
+  );
+};
+
+export default Panel;
diff --git a/src/pages/Panel/index.css b/src/pages/Panel/index.css
diff --git a/src/pages/Panel/index.html b/src/pages/Panel/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Panel</title>
+  </head>
+
+  <body>
+    <div id="app-container"></div>
+  </body>
+</html>
diff --git a/src/pages/Panel/index.tsx b/src/pages/Panel/index.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+import Panel from './Panel';
+import './index.css';
+
+render(<Panel />, window.document.querySelector('#app-container'));
diff --git a/webpack.config.js b/webpack.config.js
@@ -41,9 +41,11 @@ var options = {
     popup: path.join(__dirname, 'src', 'pages', 'Popup', 'index.jsx'),
     background: path.join(__dirname, 'src', 'pages', 'Background', 'index.js'),
     contentScript: path.join(__dirname, 'src', 'pages', 'Content', 'index.js'),
+    devtools: path.join(__dirname, 'src', 'pages', 'Devtools', 'index.js'),
+    panel: path.join(__dirname, 'src', 'pages', 'Panel', 'index.tsx'),
   },
   chromeExtensionBoilerplate: {
-    notHotReload: ['contentScript'],
+    notHotReload: ['contentScript', 'devtools'],
   },
   output: {
     path: path.resolve(__dirname, 'build'),
@@ -172,6 +174,18 @@ var options = {
       chunks: ['background'],
       cache: false,
     }),
+    new HtmlWebpackPlugin({
+      template: path.join(__dirname, 'src', 'pages', 'Devtools', 'index.html'),
+      filename: 'devtools.html',
+      chunks: ['devtools'],
+      cache: false,
+    }),
+    new HtmlWebpackPlugin({
+      template: path.join(__dirname, 'src', 'pages', 'Panel', 'index.html'),
+      filename: 'panel.html',
+      chunks: ['panel'],
+      cache: false,
+    }),
   ],
   infrastructureLogging: {
     level: 'info',
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		chrome.devtools.panels.create('Dev Tools', 'icon-34.png', 'panel.html');