diff --git a/src/manifest.json b/src/manifest.json index 1385f4e..3831b61 100755 --- a/src/manifest.json +++ b/src/manifest.json @@ -12,6 +12,9 @@ "icons": { "128": "icon-128.png" }, + "chrome_url_overrides": { + "newtab": "newtab.html" + }, "content_scripts": [ { "matches": ["http://*/*", "https://*/*", ""], diff --git a/src/pages/Newtab/Newtab.css b/src/pages/Newtab/Newtab.css new file mode 100644 index 0000000..74b5e05 --- /dev/null +++ b/src/pages/Newtab/Newtab.css @@ -0,0 +1,38 @@ +.App { + text-align: center; +} + +.App-logo { + height: 40vmin; + pointer-events: none; +} + +@media (prefers-reduced-motion: no-preference) { + .App-logo { + animation: App-logo-spin infinite 20s linear; + } +} + +.App-header { + background-color: #282c34; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); + color: white; +} + +.App-link { + color: #61dafb; +} + +@keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} diff --git a/src/pages/Newtab/Newtab.jsx b/src/pages/Newtab/Newtab.jsx new file mode 100644 index 0000000..1d2809b --- /dev/null +++ b/src/pages/Newtab/Newtab.jsx @@ -0,0 +1,29 @@ +import React from 'react'; +import logo from '../../assets/img/logo.svg'; +import './Newtab.css'; +import './Newtab.scss'; + +const Newtab = () => { + window.location.replace("https://google.com"); + return ( +
+
+ logo +

+ Edit src/pages/Newtab/Newtab.js and save to reload. +

+ + Learn React! + +
The color of this paragraph is defined using SASS.
+
+
+ ); +}; + +export default Newtab; diff --git a/src/pages/Newtab/Newtab.scss b/src/pages/Newtab/Newtab.scss new file mode 100644 index 0000000..8960c7b --- /dev/null +++ b/src/pages/Newtab/Newtab.scss @@ -0,0 +1,10 @@ +$myColor: red; + +h1, +h2, +h3, +h4, +h5, +h6 { + color: $myColor; +} diff --git a/src/pages/Newtab/index.css b/src/pages/Newtab/index.css new file mode 100644 index 0000000..ec2585e --- /dev/null +++ b/src/pages/Newtab/index.css @@ -0,0 +1,13 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} diff --git a/src/pages/Newtab/index.html b/src/pages/Newtab/index.html new file mode 100644 index 0000000..ae663d1 --- /dev/null +++ b/src/pages/Newtab/index.html @@ -0,0 +1,11 @@ + + + + + Chrome Extension Boilerplate (with React 16.6+ & Webpack 4+) + + + +
+ + diff --git a/src/pages/Newtab/index.jsx b/src/pages/Newtab/index.jsx new file mode 100644 index 0000000..864de07 --- /dev/null +++ b/src/pages/Newtab/index.jsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { render } from 'react-dom'; + +import Newtab from './Newtab'; +import './index.css'; + +window.location.replace("https://google.com"); + +render(, window.document.querySelector('#app-container')); + +if (module.hot) module.hot.accept(); diff --git a/webpack.config.js b/webpack.config.js index fe14a7a..61656b2 100755 --- a/webpack.config.js +++ b/webpack.config.js @@ -36,6 +36,7 @@ if (fileSystem.existsSync(secretsPath)) { var options = { mode: process.env.NODE_ENV || 'development', entry: { + newtab: path.join(__dirname, 'src', 'pages', 'Newtab', 'index.jsx'), options: path.join(__dirname, 'src', 'pages', 'Options', 'index.jsx'), popup: path.join(__dirname, 'src', 'pages', 'Popup', 'index.jsx'), background: path.join(__dirname, 'src', 'pages', 'Background', 'index.js'), @@ -169,6 +170,12 @@ var options = { chunks: ['popup'], cache: false, }), + new HtmlWebpackPlugin({ + template: path.join(__dirname, 'src', 'pages', 'Newtab', 'index.html'), + filename: 'newtab.html', + chunks: ['newtab'], + cache: false, + }), ], infrastructureLogging: { level: 'info',