mirror of
https://github.com/JosunLP/BrowserExtensionTemplate.git
synced 2025-06-21 18:11:08 +00:00
commit
41094cf6a9
18 changed files with 127 additions and 220 deletions
2
.gitignore
vendored
2
.gitignore
vendored
|
@ -688,7 +688,7 @@ FodyWeavers.xsd
|
|||
dist
|
||||
|
||||
tools/syncConfig.js
|
||||
tools/deploy.js
|
||||
tools/parse.js
|
||||
tools/v2.js
|
||||
tools/clean.js
|
||||
package-lock.json
|
||||
|
|
2
LICENSE
2
LICENSE
|
@ -1,6 +1,6 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2022 Jonas Pfalzgraf
|
||||
Copyright (c) 2024 Jonas Pfalzgraf
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
|
24
package.json
24
package.json
|
@ -3,25 +3,21 @@
|
|||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"deploy-v3": "npx rimraf ./dist/ && npm run build-tooling && node ./tools/deploy.js && npm run sync && npm run build-js && npm run build-css && node ./tools/clean.js",
|
||||
"deploy-v3": "npx rimraf ./dist/ && npm run build-tooling && npm run sync && npm run build && node ./tools/parse.js",
|
||||
"deploy-v2": "npm run deploy-v3 && node ./tools/v2.js",
|
||||
"build-js": "webpack --config ./webpack.config.ts && webpack --config ./webpack.config.settings.ts && webpack --config ./webpack.config.background.ts",
|
||||
"build-css": "sass ./src/sass/:./dist/css/",
|
||||
"build": "vite build",
|
||||
"build-tooling": "tsc --project ./tooling.tsconfig.json",
|
||||
"watch-ts": "tsc -w -p tsconfig.json",
|
||||
"watch-sass": "sass --watch ./src/sass/:./dist/css/",
|
||||
"sync": "npm run build-tooling && node ./tools/syncConfig.js"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/chrome": "^0.0.206",
|
||||
"@types/node": "^18.11.18",
|
||||
"@webcomponents/webcomponentsjs": "^2.7.0",
|
||||
"sass": "^1.39.0",
|
||||
"ts-loader": "^9.4.2",
|
||||
"ts-node": "^10.9.1",
|
||||
"typescript": "^4.2.4",
|
||||
"webpack": "^5.75.0",
|
||||
"webpack-cli": "^5.0.1"
|
||||
"@types/chrome": "^0.0.268",
|
||||
"@types/node": "^20.13.0",
|
||||
"@webcomponents/webcomponentsjs": "^2.8.0",
|
||||
"sass": "^1.77.4",
|
||||
"vite": "^5.2.12",
|
||||
"vite-tsconfig-paths": "^4.3.2"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
|
@ -45,7 +41,7 @@
|
|||
"url": "https://github.com/JosunLP/BrowserExtensionTemplate/issues"
|
||||
},
|
||||
"dependencies": {
|
||||
"@webcomponents/custom-elements": "^1.5.1",
|
||||
"bootstrap": "^5.2.3"
|
||||
"@webcomponents/custom-elements": "^1.6.0",
|
||||
"bootstrap": "^5.3.3"
|
||||
}
|
||||
}
|
|
@ -21,15 +21,6 @@
|
|||
"notifications"
|
||||
],
|
||||
"background": {
|
||||
"service_worker": "js/background.js"
|
||||
},
|
||||
"commands": {
|
||||
"_execute_browser_action": {
|
||||
"suggested_key": {
|
||||
"default": "Ctrl+Shift+F",
|
||||
"mac": "MacCtrl+Shift+F"
|
||||
},
|
||||
"description": "Opens popup.html"
|
||||
}
|
||||
"service_worker": "background.js"
|
||||
}
|
||||
}
|
|
@ -6,7 +6,6 @@
|
|||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="./favicon.ico">
|
||||
<title>{{BET}} Options</title>
|
||||
<link rel="stylesheet" href="css/app.css">
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
|
@ -20,7 +19,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<script type="module" src="./js/settings.js"></script>
|
||||
<script type="module" src="./settings.js"></script>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -6,7 +6,6 @@
|
|||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="./favicon.ico">
|
||||
<title>{{BET}}</title>
|
||||
<link rel="stylesheet" href="css/app.css">
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
|
@ -20,7 +19,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<script type="module" src="./js/app.js"></script>
|
||||
<script type="module" src="./app.js"></script>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import { Session } from "./classes/session"
|
||||
import "./sass/app.sass"
|
||||
|
||||
class App {
|
||||
|
||||
|
|
|
@ -1,12 +1,9 @@
|
|||
class Background {
|
||||
|
||||
constructor() {
|
||||
this.main();
|
||||
}
|
||||
|
||||
async main(): Promise<void> {
|
||||
|
||||
}
|
||||
async main(): Promise<void> {}
|
||||
}
|
||||
|
||||
new Background();
|
|
@ -1,5 +1,6 @@
|
|||
import { Session } from "./classes/session";
|
||||
import { BasicButton } from "./components/button";
|
||||
import "./sass/app.sass";
|
||||
|
||||
class Settings {
|
||||
|
||||
|
|
|
@ -1,6 +1,9 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"lib": [
|
||||
"ESNext"
|
||||
],
|
||||
"module": "ESNext",
|
||||
"outDir": "./tools/",
|
||||
"rootDir": "./tools/",
|
||||
|
|
|
@ -1,10 +0,0 @@
|
|||
// @ts-ignore
|
||||
const fs = require("fs");
|
||||
|
||||
function removeExport(file: string) {
|
||||
let content = fs.readFileSync(file, "utf8");
|
||||
content = content.replace("export {};", "");
|
||||
fs.writeFileSync(file, content);
|
||||
}
|
||||
|
||||
removeExport("./dist/js/background.js");
|
|
@ -1,86 +0,0 @@
|
|||
const path = require('path');
|
||||
// @ts-ignore
|
||||
const fs = require('fs');
|
||||
|
||||
const appConfigJson = JSON.parse(fs.readFileSync('./app.config.json', 'utf8'));
|
||||
const DEPLOY_ENTRY = "./public/";
|
||||
const DEPLOY_TARGET = "./dist/";
|
||||
|
||||
function deleteFolderRecursive(path: string) {
|
||||
if (fs.existsSync(path)) {
|
||||
fs.readdirSync(path).forEach(function (file: string) {
|
||||
const curPath = path + "/" + file;
|
||||
if (fs.lstatSync(curPath).isDirectory()) {
|
||||
deleteFolderRecursive(curPath);
|
||||
} else {
|
||||
fs.unlinkSync(curPath);
|
||||
}
|
||||
});
|
||||
fs.rmdirSync(path);
|
||||
}
|
||||
}
|
||||
|
||||
function findHtmlFilesRecursive(source: string): string[] {
|
||||
let files: string[] = [];
|
||||
const dir = fs.readdirSync(source);
|
||||
dir.forEach(function (file: string) {
|
||||
const sourceFile = path.join(source, file);
|
||||
const stat = fs.lstatSync(sourceFile);
|
||||
if (stat.isDirectory()) {
|
||||
files = files.concat(findHtmlFilesRecursive(sourceFile));
|
||||
} else {
|
||||
if (path.extname(sourceFile) == '.html') {
|
||||
files.push(sourceFile);
|
||||
}
|
||||
}
|
||||
});
|
||||
return files;
|
||||
}
|
||||
|
||||
function replaceKeywordsInHtmlFile(file: string) {
|
||||
let content = fs.readFileSync(file, 'utf8');
|
||||
const pairs = appConfigJson.htmlTemplatePairs;
|
||||
pairs.forEach(function (pair: object) {
|
||||
// @ts-ignore
|
||||
content = content.replaceAll(pair.key, pair.value);
|
||||
});
|
||||
file = file.replace("public\\", DEPLOY_TARGET);
|
||||
fs.writeFileSync(file, content);
|
||||
}
|
||||
|
||||
function buildHtmlFiles(source: string) {
|
||||
const files = findHtmlFilesRecursive(source);
|
||||
files.forEach(function (file: string) {
|
||||
replaceKeywordsInHtmlFile(file);
|
||||
});
|
||||
}
|
||||
|
||||
function mkdirSync(path: string) {
|
||||
try {
|
||||
fs.mkdirSync(path);
|
||||
} catch (e: any) {
|
||||
if (e.code != 'EEXIST') throw e;
|
||||
}
|
||||
}
|
||||
|
||||
function copyFiles(source: string, target: string) {
|
||||
const files = fs.readdirSync(source);
|
||||
files.forEach(function (file: string) {
|
||||
const sourceFile = path.join(source, file);
|
||||
const targetFile = path.join(target, file);
|
||||
const stat = fs.lstatSync(sourceFile);
|
||||
if (stat.isDirectory()) {
|
||||
mkdirSync(targetFile);
|
||||
copyFiles(sourceFile, targetFile);
|
||||
} else {
|
||||
fs.writeFileSync(targetFile, fs.readFileSync(sourceFile));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
deleteFolderRecursive(DEPLOY_TARGET);
|
||||
mkdirSync(DEPLOY_TARGET);
|
||||
copyFiles(DEPLOY_ENTRY, DEPLOY_TARGET);
|
||||
buildHtmlFiles(DEPLOY_ENTRY);
|
||||
|
||||
console.log("Deployed to " + DEPLOY_TARGET);
|
72
tools/parse.ts
Normal file
72
tools/parse.ts
Normal file
|
@ -0,0 +1,72 @@
|
|||
import * as fs from "fs";
|
||||
import * as path from "path";
|
||||
const appConfig = JSON.parse(fs.readFileSync("./app.config.json", "utf8"));
|
||||
const DEPLOY_TARGET = "./dist/";
|
||||
|
||||
function findCssFileNames(source: string): string[] {
|
||||
let files: string[] = [];
|
||||
const dir = fs.readdirSync(source);
|
||||
dir.forEach(function (file: string) {
|
||||
const sourceFile = path.join(source, file);
|
||||
const stat = fs.lstatSync(sourceFile);
|
||||
if (stat.isDirectory()) {
|
||||
files = files.concat(findCssFileNames(sourceFile));
|
||||
} else {
|
||||
if (path.extname(sourceFile) == ".css") {
|
||||
files.push(file);
|
||||
}
|
||||
}
|
||||
});
|
||||
return files;
|
||||
}
|
||||
|
||||
function findHtmlFilesRecursive(source: string): string[] {
|
||||
let files: string[] = [];
|
||||
const dir = fs.readdirSync(source);
|
||||
dir.forEach(function (file: string) {
|
||||
const sourceFile = path.join(source, file);
|
||||
const stat = fs.lstatSync(sourceFile);
|
||||
if (stat.isDirectory()) {
|
||||
files = files.concat(findHtmlFilesRecursive(sourceFile));
|
||||
} else {
|
||||
if (path.extname(sourceFile) == ".html") {
|
||||
files.push(sourceFile);
|
||||
}
|
||||
}
|
||||
});
|
||||
return files;
|
||||
}
|
||||
|
||||
function replaceKeywordsInHtmlFile(file: string) {
|
||||
let content = fs.readFileSync(file, "utf8");
|
||||
const pairs: { key: string; value: string }[] = appConfig.htmlTemplatePairs;
|
||||
pairs.forEach(function (pair: { key: string; value: string }) {
|
||||
//@ts-ignore
|
||||
content = content.replaceAll(pair.key, pair.value);
|
||||
});
|
||||
file = file.replace("public\\", DEPLOY_TARGET);
|
||||
fs.writeFileSync(file, content);
|
||||
}
|
||||
|
||||
function buildHtmlFiles(source: string) {
|
||||
const files = findHtmlFilesRecursive(source);
|
||||
files.forEach(function (file: string) {
|
||||
replaceKeywordsInHtmlFile(file);
|
||||
});
|
||||
}
|
||||
|
||||
findCssFileNames(DEPLOY_TARGET).forEach((file: string) => {
|
||||
const files = findHtmlFilesRecursive(DEPLOY_TARGET);
|
||||
files.forEach(function (htmlFile: string) {
|
||||
let content = fs.readFileSync(htmlFile, "utf8");
|
||||
content = content.replace(
|
||||
"</head>",
|
||||
`<link rel="stylesheet" href="./assets/${file}">\n</head>`
|
||||
);
|
||||
fs.writeFileSync(htmlFile, content);
|
||||
});
|
||||
});
|
||||
|
||||
buildHtmlFiles(DEPLOY_TARGET);
|
||||
|
||||
console.log("Parsed Files: ", findHtmlFilesRecursive(DEPLOY_TARGET));
|
|
@ -6,7 +6,7 @@
|
|||
// "incremental": true, /* Enable incremental compilation */
|
||||
"target": "ESNext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */,
|
||||
"module": "ESNext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
|
||||
// "lib": ["ESNext"], /* Specify library files to be included in the compilation. */
|
||||
"lib": ["ESNext", "DOM"], /* Specify library files to be included in the compilation. */
|
||||
// "allowJs": true, /* Allow javascript files to be compiled. */
|
||||
// "checkJs": true, /* Report errors in .js files. */
|
||||
// "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */
|
||||
|
|
28
vite.config.ts
Normal file
28
vite.config.ts
Normal file
|
@ -0,0 +1,28 @@
|
|||
import { defineConfig } from "vite";
|
||||
import { resolve } from "path";
|
||||
import tsconfigPaths from "vite-tsconfig-paths";
|
||||
|
||||
export default defineConfig({
|
||||
build: {
|
||||
rollupOptions: {
|
||||
input: {
|
||||
app: resolve(__dirname, "src/app.ts"),
|
||||
settings: resolve(__dirname, "src/settings.ts"),
|
||||
background: resolve(__dirname, "src/background.ts"),
|
||||
},
|
||||
output: {
|
||||
entryFileNames: "[name].js",
|
||||
dir: resolve(__dirname, "dist"),
|
||||
},
|
||||
},
|
||||
sourcemap: true,
|
||||
},
|
||||
plugins: [tsconfigPaths()],
|
||||
resolve: {
|
||||
extensions: [".tsx", ".ts", ".scss", ".sass"],
|
||||
},
|
||||
esbuild: {
|
||||
include: /.*\.tsx?$/,
|
||||
exclude: [/node_modules/, /dist/],
|
||||
},
|
||||
});
|
|
@ -1,28 +0,0 @@
|
|||
const path = require('path');
|
||||
|
||||
module.exports = {
|
||||
entry: './src/background.ts',
|
||||
mode: 'production',
|
||||
devtool: 'source-map',
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
use: 'ts-loader',
|
||||
exclude: [
|
||||
"/node_modules/",
|
||||
"/dist/",
|
||||
"/src/app.ts",
|
||||
"/src/settings.ts"
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['.tsx', '.ts'],
|
||||
},
|
||||
output: {
|
||||
filename: 'background.js',
|
||||
path: path.resolve(__dirname, 'dist/js'),
|
||||
},
|
||||
};
|
|
@ -1,28 +0,0 @@
|
|||
const path = require('path');
|
||||
|
||||
module.exports = {
|
||||
entry: './src/settings.ts',
|
||||
mode: 'production',
|
||||
devtool: 'source-map',
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
use: 'ts-loader',
|
||||
exclude: [
|
||||
"/node_modules/",
|
||||
"/dist/",
|
||||
"/src/background.ts",
|
||||
"/src/app.ts"
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['.tsx', '.ts'],
|
||||
},
|
||||
output: {
|
||||
filename: 'settings.js',
|
||||
path: path.resolve(__dirname, 'dist/js'),
|
||||
},
|
||||
};
|
|
@ -1,28 +0,0 @@
|
|||
const path = require('path');
|
||||
|
||||
module.exports = {
|
||||
entry: './src/app.ts',
|
||||
mode: 'production',
|
||||
devtool: 'source-map',
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
use: 'ts-loader',
|
||||
exclude: [
|
||||
"/node_modules/",
|
||||
"/dist/",
|
||||
"/src/background.ts",
|
||||
"/src/settings.ts"
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['.tsx', '.ts'],
|
||||
},
|
||||
output: {
|
||||
filename: 'app.js',
|
||||
path: path.resolve(__dirname, 'dist/js'),
|
||||
},
|
||||
};
|
Loading…
Add table
Reference in a new issue