From 1a97c68c71f5d96b9217e5c418aa874cf85520b2 Mon Sep 17 00:00:00 2001 From: GeekaholicLin Date: Tue, 5 Jan 2021 11:27:21 +0800 Subject: [PATCH] add devtools support. Fixed #17 --- .gitignore | 1 + src/manifest.json | 13 ++++++++----- src/pages/Devtools/index.html | 9 +++++++++ src/pages/Devtools/index.js | 1 + src/pages/Panel/Panel.css | 7 +++++++ src/pages/Panel/Panel.tsx | 13 +++++++++++++ src/pages/Panel/index.css | 0 src/pages/Panel/index.html | 11 +++++++++++ src/pages/Panel/index.tsx | 7 +++++++ webpack.config.js | 16 +++++++++++++++- 10 files changed, 72 insertions(+), 6 deletions(-) create mode 100644 src/pages/Devtools/index.html create mode 100644 src/pages/Devtools/index.js create mode 100644 src/pages/Panel/Panel.css create mode 100644 src/pages/Panel/Panel.tsx create mode 100644 src/pages/Panel/index.css create mode 100644 src/pages/Panel/index.html create mode 100644 src/pages/Panel/index.tsx diff --git a/.gitignore b/.gitignore index a525d369f..3fc60c911 100644 --- 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 index e939080af..8fb61d26e 100755 --- a/src/manifest.json +++ b/src/manifest.json @@ -14,11 +14,14 @@ "icons": { "128": "icon-128.png" }, - "content_scripts": [{ - "matches": ["http://*/*", "https://*/*", ""], - "js": ["contentScript.bundle.js"], - "css": ["content.styles.css"] - }], + "content_scripts": [ + { + "matches": ["http://*/*", "https://*/*", ""], + "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 new file mode 100644 index 000000000..a47b2fe0d --- /dev/null +++ b/src/pages/Devtools/index.html @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/pages/Devtools/index.js b/src/pages/Devtools/index.js new file mode 100644 index 000000000..72b169625 --- /dev/null +++ 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 new file mode 100644 index 000000000..843f23e8c --- /dev/null +++ b/src/pages/Panel/Panel.css @@ -0,0 +1,7 @@ +body { + background-color: #242424; +} + +.container { + color: #ffffff; +} \ No newline at end of file diff --git a/src/pages/Panel/Panel.tsx b/src/pages/Panel/Panel.tsx new file mode 100644 index 000000000..072467c51 --- /dev/null +++ b/src/pages/Panel/Panel.tsx @@ -0,0 +1,13 @@ +import React from 'react'; + +import './Panel.css'; + +const Panel = (): JSX.Element => { + return ( +
+

Dev Tools Panel

+
+ ); +}; + +export default Panel; diff --git a/src/pages/Panel/index.css b/src/pages/Panel/index.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/pages/Panel/index.html b/src/pages/Panel/index.html new file mode 100644 index 000000000..94f6582d6 --- /dev/null +++ b/src/pages/Panel/index.html @@ -0,0 +1,11 @@ + + + + + Panel + + + +
+ + diff --git a/src/pages/Panel/index.tsx b/src/pages/Panel/index.tsx new file mode 100644 index 000000000..cd6e3e611 --- /dev/null +++ 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(, window.document.querySelector('#app-container')); diff --git a/webpack.config.js b/webpack.config.js index 6bf39972a..ff1ed0a55 100755 --- 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',