Initial setup
This commit is contained in:
z0ccc
parent
ad3a42d040
commit
61d52ca16d
21 changed files with 83 additions and 200 deletions
|
|
@ -1,11 +1,11 @@
|
|||
{
|
||||
"name": "chrome-extension-boilerplate-react",
|
||||
"version": "4.3.5",
|
||||
"description": "A chrome extension boilerplate built with React 17, Webpack 5, and Webpack Dev Server 4",
|
||||
"name": "vytal",
|
||||
"version": "1.0.0",
|
||||
"description": "Vytal",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/lxieyang/chrome-extension-boilerplate-react.git"
|
||||
"url": "https://github.com/z0ccc/Vytal.git"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "node utils/build.js",
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 7.6 KiB |
BIN
src/assets/img/icon-32.png
Normal file
BIN
src/assets/img/icon-32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
|
|
@ -1,15 +1,13 @@
|
|||
{
|
||||
"manifest_version": 3,
|
||||
"name": "Chrome Extension with React & Webpack",
|
||||
"description": "A chrome extension boilerplate built with React 17, Webpack 5, and Webpack Dev Server 4",
|
||||
"name": "Vytal",
|
||||
"description": "Vytal",
|
||||
"options_page": "options.html",
|
||||
"permissions": ["debugger", "activeTab"],
|
||||
"background": { "service_worker": "background.bundle.js" },
|
||||
"action": {
|
||||
"default_popup": "popup.html",
|
||||
"default_icon": "icon-34.png"
|
||||
},
|
||||
"chrome_url_overrides": {
|
||||
"newtab": "newtab.html"
|
||||
"default_icon": "icon-32.png"
|
||||
},
|
||||
"icons": {
|
||||
"128": "icon-128.png"
|
||||
|
|
@ -21,10 +19,9 @@
|
|||
"css": ["content.styles.css"]
|
||||
}
|
||||
],
|
||||
"devtools_page": "devtools.html",
|
||||
"web_accessible_resources": [
|
||||
{
|
||||
"resources": ["content.styles.css", "icon-128.png", "icon-34.png"],
|
||||
"resources": ["content.styles.css", "icon-128.png", "icon-32.png"],
|
||||
"matches": []
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,2 +1,71 @@
|
|||
console.log('This is the background page.');
|
||||
console.log('Put the background scripts here.');
|
||||
const attachTab = (tabId) =>{
|
||||
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" }
|
||||
// );
|
||||
// }
|
||||
// });
|
||||
// });
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title></title>
|
||||
</head>
|
||||
|
||||
<body></body>
|
||||
</html>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
chrome.devtools.panels.create(
|
||||
'Dev Tools from chrome-extension-boilerplate-react',
|
||||
'icon-34.png',
|
||||
'panel.html'
|
||||
);
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
$myColor: red;
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $myColor;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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();
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
body {
|
||||
background-color: #242424;
|
||||
}
|
||||
|
||||
.container {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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>
|
||||
|
|
@ -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();
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react';
|
||||
import logo from '../../assets/img/logo.svg';
|
||||
import Greetings from '../../containers/Greetings/Greetings';
|
||||
// import Greetings from '../../containers/Greetings/Greetings';
|
||||
import './Popup.css';
|
||||
|
||||
const Popup = () => {
|
||||
|
|
|
|||
|
|
@ -36,16 +36,13 @@ 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'),
|
||||
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: {
|
||||
notHotReload: ['background', 'contentScript', 'devtools'],
|
||||
notHotReload: ['background', 'contentScript'],
|
||||
},
|
||||
output: {
|
||||
filename: '[name].bundle.js',
|
||||
|
|
@ -154,18 +151,12 @@ var options = {
|
|||
new CopyWebpackPlugin({
|
||||
patterns: [
|
||||
{
|
||||
from: 'src/assets/img/icon-34.png',
|
||||
from: 'src/assets/img/icon-32.png',
|
||||
to: path.join(__dirname, 'build'),
|
||||
force: true,
|
||||
},
|
||||
],
|
||||
}),
|
||||
new HtmlWebpackPlugin({
|
||||
template: path.join(__dirname, 'src', 'pages', 'Newtab', 'index.html'),
|
||||
filename: 'newtab.html',
|
||||
chunks: ['newtab'],
|
||||
cache: false,
|
||||
}),
|
||||
new HtmlWebpackPlugin({
|
||||
template: path.join(__dirname, 'src', 'pages', 'Options', 'index.html'),
|
||||
filename: 'options.html',
|
||||
|
|
@ -178,18 +169,6 @@ var options = {
|
|||
chunks: ['popup'],
|
||||
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',
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue