me/vytal-redux
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Initial setup

Browse source
This commit is contained in:
z0ccc 2022-04-10 14:17:38 -04:00
parent 8ffe72ff97
commit 6442e8fc31
21 changed files with 83 additions and 200 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
package.json
View file

@ -1,11 +1,11 @@
{ {
"name": "chrome-extension-boilerplate-react", "name": "vytal",
"version": "4.3.5", "version": "1.0.0",
"description": "A chrome extension boilerplate built with React 17, Webpack 5, and Webpack Dev Server 4", "description": "Vytal",
"license": "MIT", "license": "MIT",
"repository": { "repository": {
"type": "git", "type": "git",
"url": "https://github.com/lxieyang/chrome-extension-boilerplate-react.git" "url": "https://github.com/z0ccc/Vytal.git"
}, },
"scripts": { "scripts": {
"build": "node utils/build.js", "build": "node utils/build.js",

BIN
src/assets/img/icon-128.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 7.6 KiB

BIN
src/assets/img/icon-32.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
src/assets/img/icon-34.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.2 KiB

13
src/manifest.json
View file

@ -1,15 +1,13 @@
{ {
"manifest_version": 3, "manifest_version": 3,
"name": "Chrome Extension with React & Webpack", "name": "Vytal",
"description": "A chrome extension boilerplate built with React 17, Webpack 5, and Webpack Dev Server 4", "description": "Vytal",
"options_page": "options.html", "options_page": "options.html",
"permissions": ["debugger", "activeTab"],
"background": { "service_worker": "background.bundle.js" }, "background": { "service_worker": "background.bundle.js" },
"action": { "action": {
"default_popup": "popup.html", "default_popup": "popup.html",
"default_icon": "icon-34.png" "default_icon": "icon-32.png"
},
"chrome_url_overrides": {
"newtab": "newtab.html"
}, },
"icons": { "icons": {
"128": "icon-128.png" "128": "icon-128.png"
@ -21,10 +19,9 @@
"css": ["content.styles.css"] "css": ["content.styles.css"]
} }
], ],
"devtools_page": "devtools.html",
"web_accessible_resources": [ "web_accessible_resources": [
{ {
"resources": ["content.styles.css", "icon-128.png", "icon-34.png"], "resources": ["content.styles.css", "icon-128.png", "icon-32.png"],
"matches": [] "matches": []
} }
] ]

73
src/pages/Background/index.js
View file

@ -1,2 +1,71 @@
console.log('This is the background page.'); const attachTab = (tabId) =>{
console.log('Put the background scripts here.'); chrome.debugger.attach({ tabId: tabId }, "1.3", function () {
if (!chrome.runtime.lastError) {
// console.log("attached debugger to tab: " + tabId);
// // https://chromedevtools.github.io/devtools-protocol/tot/ - "geolocation"
chrome.debugger.sendCommand(
{ tabId: tabId },
"Emulation.setTimezoneOverride",
{ timezoneId: "Asia/Shanghai" }
);
chrome.debugger.sendCommand(
{ tabId: tabId },
"Emulation.setLocaleOverride",
{ locale: "zh-Hans-CN" }
);
const london = {
latitude: 31.230416,
longitude: 121.473701,
accuracy: 1,
};
chrome.debugger.sendCommand(
{ tabId: tabId },
"Emulation.setGeolocationOverride",
london,
function (result) {
console.log(result);
}
);
// chrome.debugger.sendCommand(
// { tabId: tabId },
// "Emulation.setUserAgentOverride",
// {
// userAgent:
// "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.51 Safari/537.35",
// },
// { acceptLanguage: "mr-IN" }
// );
// chrome.debugger.sendCommand(
// { tabId: tabId },
// "[Emulation.setLocaleOverride](https://chromedevtools.github.io/devtools-protocol/tot/Emulation/#method-setLocaleOverride)",
// { locale: "mr-IN" }
// );
//chrome.debugger.sendCommand({tabId: tabId}, "Emulation.clearGeolocationOverride");
// chrome.debugger.detach({ tabId: tabId });
}
});
}
// Detects if there are posts for current url
chrome.tabs.onUpdated.addListener((tabId, change, tab) => {
attachTab(tabId);
});
// chrome.tabs.onUpdated.addListener((tabId, change, tab) => {
// chrome.debugger.attach({ tabId: tabId }, "1.3", function () {
// if (!chrome.runtime.lastError) {
// // console.log("attached debugger to tab: " + tabId);
// // // https://chromedevtools.github.io/devtools-protocol/tot/ - "geolocation"
// chrome.debugger.sendCommand(
// { tabId: tabId },
// "Emulation.setTimezoneOverride",
// { timezoneId: "Asia/Shanghai" }
// );
// }
// });
// });

9
src/pages/Devtools/index.html
View file

@ -1,9 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body></body>
</html>

5
src/pages/Devtools/index.js
View file

@ -1,5 +0,0 @@
chrome.devtools.panels.create(
'Dev Tools from chrome-extension-boilerplate-react',
'icon-34.png',
'panel.html'
);

38
src/pages/Newtab/Newtab.css
View file

@ -1,38 +0,0 @@
.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);
}
}

28
src/pages/Newtab/Newtab.jsx
View file

@ -1,28 +0,0 @@
import React from 'react';
import logo from '../../assets/img/logo.svg';
import './Newtab.css';
import './Newtab.scss';
const Newtab = () => {
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
View file

@ -1,10 +0,0 @@
$myColor: red;
h1,
h2,
h3,
h4,
h5,
h6 {
color: $myColor;
}

13
src/pages/Newtab/index.css
View file

@ -1,13 +0,0 @@
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
View file

@ -1,11 +0,0 @@
<!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>

9
src/pages/Newtab/index.jsx
View file

@ -1,9 +0,0 @@
import React from 'react';
import { render } from 'react-dom';
import Newtab from './Newtab';
import './index.css';
render(<Newtab />, window.document.querySelector('#app-container'));
if (module.hot) module.hot.accept();

7
src/pages/Panel/Panel.css
View file

@ -1,7 +0,0 @@
body {
background-color: #242424;
}
.container {
color: #ffffff;
}

12
src/pages/Panel/Panel.tsx
View file

@ -1,12 +0,0 @@
import React from 'react';
import './Panel.css';
const Panel: React.FC = () => {
return (
<div className="container">
<h1>Dev Tools Panel</h1>
</div>
);
};
export default Panel;

0
src/pages/Panel/index.css
View file

11
src/pages/Panel/index.html
View file

@ -1,11 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Dev Tools Panel</title>
</head>
<body>
<div id="app-container"></div>
</body>
</html>

9
src/pages/Panel/index.jsx
View file

@ -1,9 +0,0 @@
import React from 'react';
import { render } from 'react-dom';
import Panel from './Panel';
import './index.css';
render(<Panel />, window.document.querySelector('#app-container'));
if (module.hot) module.hot.accept();

2
src/pages/Popup/Popup.jsx
View file

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import logo from '../../assets/img/logo.svg'; import logo from '../../assets/img/logo.svg';
import Greetings from '../../containers/Greetings/Greetings'; // import Greetings from '../../containers/Greetings/Greetings';
import './Popup.css'; import './Popup.css';
const Popup = () => { const Popup = () => {

25
webpack.config.js
View file

@ -36,16 +36,13 @@ 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'),
contentScript: path.join(__dirname, 'src', 'pages', 'Content', '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.jsx'),
}, },
chromeExtensionBoilerplate: { chromeExtensionBoilerplate: {
notHotReload: ['background', 'contentScript', 'devtools'], notHotReload: ['background', 'contentScript'],
}, },
output: { output: {
filename: '[name].bundle.js', filename: '[name].bundle.js',
@ -154,18 +151,12 @@ var options = {
new CopyWebpackPlugin({ new CopyWebpackPlugin({
patterns: [ patterns: [
{ {
from: 'src/assets/img/icon-34.png', from: 'src/assets/img/icon-32.png',
to: path.join(__dirname, 'build'), to: path.join(__dirname, 'build'),
force: true, force: true,
}, },
], ],
}), }),
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src', 'pages', 'Newtab', 'index.html'),
filename: 'newtab.html',
chunks: ['newtab'],
cache: false,
}),
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
template: path.join(__dirname, 'src', 'pages', 'Options', 'index.html'), template: path.join(__dirname, 'src', 'pages', 'Options', 'index.html'),
filename: 'options.html', filename: 'options.html',
@ -178,18 +169,6 @@ var options = {
chunks: ['popup'], chunks: ['popup'],
cache: false, 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: { infrastructureLogging: {
level: 'info', level: 'info',