Added new tab page
This commit is contained in:
z0ccc
parent
5d33decc7d
commit
263d031783
8 changed files with 122 additions and 0 deletions
|
|
@ -12,6 +12,9 @@
|
||||||
"icons": {
|
"icons": {
|
||||||
"128": "icon-128.png"
|
"128": "icon-128.png"
|
||||||
},
|
},
|
||||||
|
"chrome_url_overrides": {
|
||||||
|
"newtab": "newtab.html"
|
||||||
|
},
|
||||||
"content_scripts": [
|
"content_scripts": [
|
||||||
{
|
{
|
||||||
"matches": ["http://*/*", "https://*/*", "<all_urls>"],
|
"matches": ["http://*/*", "https://*/*", "<all_urls>"],
|
||||||
|
|
|
||||||
38
src/pages/Newtab/Newtab.css
Normal file
38
src/pages/Newtab/Newtab.css
Normal file
|
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
29
src/pages/Newtab/Newtab.jsx
Normal file
29
src/pages/Newtab/Newtab.jsx
Normal file
|
|
@ -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 (
|
||||||
|
<div className="App">
|
||||||
|
<header className="App-header">
|
||||||
|
<img src={logo} className="App-logo" alt="logo" />
|
||||||
|
<p>
|
||||||
|
Edit <code>src/pages/Newtab/Newtab.js</code> and save to reload.
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
className="App-link"
|
||||||
|
href="https://reactjs.org"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
Learn React!
|
||||||
|
</a>
|
||||||
|
<h6>The color of this paragraph is defined using SASS.</h6>
|
||||||
|
</header>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Newtab;
|
||||||
10
src/pages/Newtab/Newtab.scss
Normal file
10
src/pages/Newtab/Newtab.scss
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
$myColor: red;
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
color: $myColor;
|
||||||
|
}
|
||||||
13
src/pages/Newtab/index.css
Normal file
13
src/pages/Newtab/index.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
11
src/pages/Newtab/index.html
Normal file
11
src/pages/Newtab/index.html
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<title>Chrome Extension Boilerplate (with React 16.6+ & Webpack 4+)</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="app-container"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
11
src/pages/Newtab/index.jsx
Normal file
11
src/pages/Newtab/index.jsx
Normal file
|
|
@ -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(<Newtab />, window.document.querySelector('#app-container'));
|
||||||
|
|
||||||
|
if (module.hot) module.hot.accept();
|
||||||
|
|
@ -36,6 +36,7 @@ if (fileSystem.existsSync(secretsPath)) {
|
||||||
var options = {
|
var options = {
|
||||||
mode: process.env.NODE_ENV || 'development',
|
mode: process.env.NODE_ENV || 'development',
|
||||||
entry: {
|
entry: {
|
||||||
|
newtab: path.join(__dirname, 'src', 'pages', 'Newtab', 'index.jsx'),
|
||||||
options: path.join(__dirname, 'src', 'pages', 'Options', 'index.jsx'),
|
options: path.join(__dirname, 'src', 'pages', 'Options', 'index.jsx'),
|
||||||
popup: path.join(__dirname, 'src', 'pages', 'Popup', 'index.jsx'),
|
popup: path.join(__dirname, 'src', 'pages', 'Popup', 'index.jsx'),
|
||||||
background: path.join(__dirname, 'src', 'pages', 'Background', 'index.js'),
|
background: path.join(__dirname, 'src', 'pages', 'Background', 'index.js'),
|
||||||
|
|
@ -169,6 +170,12 @@ var options = {
|
||||||
chunks: ['popup'],
|
chunks: ['popup'],
|
||||||
cache: false,
|
cache: false,
|
||||||
}),
|
}),
|
||||||
|
new HtmlWebpackPlugin({
|
||||||
|
template: path.join(__dirname, 'src', 'pages', 'Newtab', 'index.html'),
|
||||||
|
filename: 'newtab.html',
|
||||||
|
chunks: ['newtab'],
|
||||||
|
cache: false,
|
||||||
|
}),
|
||||||
],
|
],
|
||||||
infrastructureLogging: {
|
infrastructureLogging: {
|
||||||
level: 'info',
|
level: 'info',
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue