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": {
|
||||
"clean-webpack-plugin": "^3.0.0",
|
||||
"copy-webpack-plugin": "^6.0.3",
|
||||
"css-loader": "^3.6.0",
|
||||
"html-loader": "^1.1.0",
|
||||
"html-webpack-plugin": "3.2.0",
|
||||
"husky": ">=4",
|
||||
"lint-staged": ">=10",
|
||||
"prettier": "^2.0.5",
|
||||
"sass": "^1.26.10",
|
||||
"sass-loader": "^9.0.2",
|
||||
"style-loader": "^1.2.1",
|
||||
"ts-loader": "^8.0.1",
|
||||
"typescript": "^3.9.7",
|
||||
"web-ext": "^4.3.0",
|
||||
"webextension-polyfill-ts": "^0.19.0",
|
||||
"webpack": "^4.43.0",
|
||||
"webpack-cli": "^3.3.12",
|
||||
"zip-webpack-plugin": "^3.0.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "webpack",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
"run:firefox": "web-ext run --source-dir ./dist"
|
||||
},
|
||||
"keywords": [],
|
||||
"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" />
|
||||
<title></title>
|
||||
</head>
|
||||
<body></body>
|
||||
<body>
|
||||
<button is="extension-toggle"></button>
|
||||
</body>
|
||||
</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": {
|
||||
"outDir": "./dist/",
|
||||
"noImplicitAny": true,
|
||||
"module": "es6",
|
||||
"target": "es5",
|
||||
"module": "CommonJS",
|
||||
"target": "es6",
|
||||
"jsx": "react",
|
||||
"allowJs": true,
|
||||
"sourceMap": true
|
||||
|
|
|
|||
|
|
@ -5,15 +5,18 @@ const CopyPlugin = require("copy-webpack-plugin");
|
|||
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
|
||||
const ZipPlugin = require("zip-webpack-plugin");
|
||||
|
||||
module.exports = {
|
||||
let mode = process.env.NODE_ENV || "development";
|
||||
|
||||
let options = {
|
||||
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: {
|
||||
path: path.resolve(__dirname, "dist"),
|
||||
filename: "[name].bundle.js",
|
||||
},
|
||||
mode: "development",
|
||||
mode: mode,
|
||||
devtool: "inline-source-map",
|
||||
module: {
|
||||
rules: [
|
||||
|
|
@ -27,21 +30,41 @@ module.exports = {
|
|||
use: "ts-loader",
|
||||
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: [
|
||||
new CleanWebpackPlugin(),
|
||||
new CopyPlugin({
|
||||
patterns: [{ from: path.resolve(__dirname, "src", "manifest.json") }],
|
||||
}),
|
||||
new HtmlWebpackPlugin({
|
||||
template: path.join(__dirname, "src", "popup.html"),
|
||||
template: path.join(__dirname, "src", "popup", "popup.html"),
|
||||
filename: "popup.html",
|
||||
chunks: ["popup"],
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
||||
if (mode !== "development") {
|
||||
options.plugins.unshift(new CleanWebpackPlugin());
|
||||
options.plugins.push(
|
||||
new ZipPlugin({
|
||||
filename: "addon",
|
||||
extension: "xpi",
|
||||
}),
|
||||
],
|
||||
};
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = options;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue