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',