Start writing code
This commit is contained in:
a
parent
efee2595d5
commit
e300cb2e74
10 changed files with 2817 additions and 86 deletions
|
|
@ -7,20 +7,26 @@
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"clean-webpack-plugin": "^3.0.0",
|
"clean-webpack-plugin": "^3.0.0",
|
||||||
"copy-webpack-plugin": "^6.0.3",
|
"copy-webpack-plugin": "^6.0.3",
|
||||||
|
"css-loader": "^3.6.0",
|
||||||
"html-loader": "^1.1.0",
|
"html-loader": "^1.1.0",
|
||||||
"html-webpack-plugin": "3.2.0",
|
"html-webpack-plugin": "3.2.0",
|
||||||
"husky": ">=4",
|
"husky": ">=4",
|
||||||
"lint-staged": ">=10",
|
"lint-staged": ">=10",
|
||||||
"prettier": "^2.0.5",
|
"prettier": "^2.0.5",
|
||||||
|
"sass": "^1.26.10",
|
||||||
|
"sass-loader": "^9.0.2",
|
||||||
|
"style-loader": "^1.2.1",
|
||||||
"ts-loader": "^8.0.1",
|
"ts-loader": "^8.0.1",
|
||||||
"typescript": "^3.9.7",
|
"typescript": "^3.9.7",
|
||||||
|
"web-ext": "^4.3.0",
|
||||||
|
"webextension-polyfill-ts": "^0.19.0",
|
||||||
"webpack": "^4.43.0",
|
"webpack": "^4.43.0",
|
||||||
"webpack-cli": "^3.3.12",
|
"webpack-cli": "^3.3.12",
|
||||||
"zip-webpack-plugin": "^3.0.0"
|
"zip-webpack-plugin": "^3.0.0"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "webpack",
|
"build": "webpack",
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
"run:firefox": "web-ext run --source-dir ./dist"
|
||||||
},
|
},
|
||||||
"keywords": [],
|
"keywords": [],
|
||||||
"author": "",
|
"author": "",
|
||||||
|
|
|
||||||
14
src/content_script.ts
Normal file
14
src/content_script.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
import { browser } from "webextension-polyfill-ts";
|
||||||
|
|
||||||
|
interface WindowHack {
|
||||||
|
[index: string]: any;
|
||||||
|
}
|
||||||
|
(() => {
|
||||||
|
//Make sure our script only runs once
|
||||||
|
let name = <string>browser.runtime.getManifest().name;
|
||||||
|
if (name in window) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
(window as WindowHack)[name] = true;
|
||||||
|
console.log("loaded content_script");
|
||||||
|
})();
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
{
|
||||||
|
"name": "Lingo",
|
||||||
|
"manifest_version": 2,
|
||||||
|
"version": "0.1",
|
||||||
|
"browser_action": {
|
||||||
|
"browser_style": true,
|
||||||
|
"default_popup": "popup.html"
|
||||||
|
},
|
||||||
|
"permissions": ["activeTab"]
|
||||||
|
}
|
||||||
|
|
@ -4,5 +4,7 @@
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<title></title>
|
<title></title>
|
||||||
</head>
|
</head>
|
||||||
<body></body>
|
<body>
|
||||||
|
<button is="extension-toggle"></button>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
4
src/popup/popup.scss
Normal file
4
src/popup/popup.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
min-width: 320px;
|
||||||
|
}
|
||||||
28
src/popup/popup.ts
Normal file
28
src/popup/popup.ts
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
import { browser } from "webextension-polyfill-ts";
|
||||||
|
import "./popup.scss";
|
||||||
|
class ExtensionToggle extends HTMLButtonElement {
|
||||||
|
on: boolean = false;
|
||||||
|
innerHTML: string = "OFF";
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.addEventListener("click", this.toggle);
|
||||||
|
}
|
||||||
|
toggle() {
|
||||||
|
this.on = !this.on;
|
||||||
|
this.innerHTML = this.on ? "ON" : "OFF";
|
||||||
|
const toggleEvent = new CustomEvent("extensionToggled", {
|
||||||
|
detail: this.on,
|
||||||
|
});
|
||||||
|
this.dispatchEvent(toggleEvent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
customElements.define("extension-toggle", ExtensionToggle, {
|
||||||
|
extends: "button",
|
||||||
|
});
|
||||||
|
|
||||||
|
const toggle = document.querySelector("button[is=extension-toggle]");
|
||||||
|
toggle.addEventListener("extensionToggled", (e: CustomEvent) =>
|
||||||
|
console.log(`aaa: ${e.detail}`)
|
||||||
|
);
|
||||||
|
|
||||||
|
browser.tabs.executeScript({ file: "/content_script.bundle.js" });
|
||||||
|
|
@ -2,8 +2,8 @@
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"outDir": "./dist/",
|
"outDir": "./dist/",
|
||||||
"noImplicitAny": true,
|
"noImplicitAny": true,
|
||||||
"module": "es6",
|
"module": "CommonJS",
|
||||||
"target": "es5",
|
"target": "es6",
|
||||||
"jsx": "react",
|
"jsx": "react",
|
||||||
"allowJs": true,
|
"allowJs": true,
|
||||||
"sourceMap": true
|
"sourceMap": true
|
||||||
|
|
|
||||||
|
|
@ -5,15 +5,18 @@ const CopyPlugin = require("copy-webpack-plugin");
|
||||||
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
|
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
|
||||||
const ZipPlugin = require("zip-webpack-plugin");
|
const ZipPlugin = require("zip-webpack-plugin");
|
||||||
|
|
||||||
module.exports = {
|
let mode = process.env.NODE_ENV || "development";
|
||||||
|
|
||||||
|
let options = {
|
||||||
entry: {
|
entry: {
|
||||||
popup: path.join(__dirname, "src", "js", "popup.ts"),
|
popup: path.join(__dirname, "src", "popup", "popup.ts"),
|
||||||
|
content_script: path.join(__dirname, "src", "content_script.ts"),
|
||||||
},
|
},
|
||||||
output: {
|
output: {
|
||||||
path: path.resolve(__dirname, "dist"),
|
path: path.resolve(__dirname, "dist"),
|
||||||
filename: "[name].bundle.js",
|
filename: "[name].bundle.js",
|
||||||
},
|
},
|
||||||
mode: "development",
|
mode: mode,
|
||||||
devtool: "inline-source-map",
|
devtool: "inline-source-map",
|
||||||
module: {
|
module: {
|
||||||
rules: [
|
rules: [
|
||||||
|
|
@ -27,21 +30,41 @@ module.exports = {
|
||||||
use: "ts-loader",
|
use: "ts-loader",
|
||||||
exclude: /node_modules/,
|
exclude: /node_modules/,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
test: /\.s[ac]ss$/i,
|
||||||
|
use: [
|
||||||
|
// Creates `style` nodes from JS strings
|
||||||
|
"style-loader",
|
||||||
|
// Translates CSS into CommonJS
|
||||||
|
"css-loader",
|
||||||
|
// Compiles Sass to CSS
|
||||||
|
"sass-loader",
|
||||||
|
],
|
||||||
|
exclude: /node_modules/,
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
new CleanWebpackPlugin(),
|
|
||||||
new CopyPlugin({
|
new CopyPlugin({
|
||||||
patterns: [{ from: path.resolve(__dirname, "src", "manifest.json") }],
|
patterns: [{ from: path.resolve(__dirname, "src", "manifest.json") }],
|
||||||
}),
|
}),
|
||||||
new HtmlWebpackPlugin({
|
new HtmlWebpackPlugin({
|
||||||
template: path.join(__dirname, "src", "popup.html"),
|
template: path.join(__dirname, "src", "popup", "popup.html"),
|
||||||
filename: "popup.html",
|
filename: "popup.html",
|
||||||
chunks: ["popup"],
|
chunks: ["popup"],
|
||||||
}),
|
}),
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
if (mode !== "development") {
|
||||||
|
options.plugins.unshift(new CleanWebpackPlugin());
|
||||||
|
options.plugins.push(
|
||||||
new ZipPlugin({
|
new ZipPlugin({
|
||||||
filename: "addon",
|
filename: "addon",
|
||||||
extension: "xpi",
|
extension: "xpi",
|
||||||
}),
|
})
|
||||||
],
|
);
|
||||||
};
|
}
|
||||||
|
|
||||||
|
module.exports = options;
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue