JosunLP/BrowserExtensionTemplate
1
0
Fork 0
mirror of https://github.com/JosunLP/BrowserExtensionTemplate.git synced 2025-06-21 18:11:08 +00:00
Code Issues Projects Releases Wiki Activity Actions

Merge branch 'feature/vite' into dev

Browse source
This commit is contained in:
Jonas Pfalzgraf 2024-06-01 03:35:46 +02:00
commit 1723196db6
18 changed files with 127 additions and 220 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored
View file

@ -688,7 +688,7 @@ FodyWeavers.xsd
dist dist
tools/syncConfig.js tools/syncConfig.js
tools/deploy.js tools/parse.js
tools/v2.js tools/v2.js
tools/clean.js tools/clean.js
package-lock.json package-lock.json

2
LICENSE
View file

@ -1,6 +1,6 @@
MIT License 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 Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal of this software and associated documentation files (the "Software"), to deal

26
package.json
View file

@ -3,25 +3,21 @@
"version": "0.0.1", "version": "0.0.1",
"private": true, "private": true,
"scripts": { "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", "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": "vite build",
"build-css": "sass ./src/sass/:./dist/css/",
"build-tooling": "tsc --project ./tooling.tsconfig.json", "build-tooling": "tsc --project ./tooling.tsconfig.json",
"watch-ts": "tsc -w -p tsconfig.json", "watch-ts": "tsc -w -p tsconfig.json",
"watch-sass": "sass --watch ./src/sass/:./dist/css/", "watch-sass": "sass --watch ./src/sass/:./dist/css/",
"sync": "npm run build-tooling && node ./tools/syncConfig.js" "sync": "npm run build-tooling && node ./tools/syncConfig.js"
}, },
"devDependencies": { "devDependencies": {
"@types/chrome": "^0.0.206", "@types/chrome": "^0.0.268",
"@types/node": "^18.11.18", "@types/node": "^20.13.0",
"@webcomponents/webcomponentsjs": "^2.7.0", "@webcomponents/webcomponentsjs": "^2.8.0",
"sass": "^1.39.0", "sass": "^1.77.4",
"ts-loader": "^9.4.2", "vite": "^5.2.12",
"ts-node": "^10.9.1", "vite-tsconfig-paths": "^4.3.2"
"typescript": "^4.2.4",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1"
}, },
"browserslist": [ "browserslist": [
"> 1%", "> 1%",
@ -45,7 +41,7 @@
"url": "https://github.com/JosunLP/BrowserExtensionTemplate/issues" "url": "https://github.com/JosunLP/BrowserExtensionTemplate/issues"
}, },
"dependencies": { "dependencies": {
"@webcomponents/custom-elements": "^1.5.1", "@webcomponents/custom-elements": "^1.6.0",
"bootstrap": "^5.2.3" "bootstrap": "^5.3.3"
} }
} }

11
public/manifest.json
View file

@ -21,15 +21,6 @@
"notifications" "notifications"
], ],
"background": { "background": {
"service_worker": "js/background.js" "service_worker": "background.js"
},
"commands": {
"_execute_browser_action": {
"suggested_key": {
"default": "Ctrl+Shift+F",
"mac": "MacCtrl+Shift+F"
},
"description": "Opens popup.html"
}
} }
} }

3
public/options.html
View file

@ -6,7 +6,6 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="./favicon.ico"> <link rel="icon" href="./favicon.ico">
<title>{{BET}} Options</title> <title>{{BET}} Options</title>
<link rel="stylesheet" href="css/app.css">
</head> </head>
<body> <body>
<noscript> <noscript>
@ -20,7 +19,7 @@
</div> </div>
</div> </div>
<footer> <footer>
<script type="module" src="./js/settings.js"></script> <script type="module" src="./settings.js"></script>
</footer> </footer>
</body> </body>
</html> </html>

3
public/popup.html
View file

@ -6,7 +6,6 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="./favicon.ico"> <link rel="icon" href="./favicon.ico">
<title>{{BET}}</title> <title>{{BET}}</title>
<link rel="stylesheet" href="css/app.css">
</head> </head>
<body> <body>
<noscript> <noscript>
@ -20,7 +19,7 @@
</div> </div>
</div> </div>
<footer> <footer>
<script type="module" src="./js/app.js"></script> <script type="module" src="./app.js"></script>
</footer> </footer>
</body> </body>
</html> </html>

1
src/app.ts
View file

@ -1,4 +1,5 @@
import { Session } from "./classes/session" import { Session } from "./classes/session"
import "./sass/app.sass"
class App { class App {

5
src/background.ts
View file

@ -1,12 +1,9 @@
class Background { class Background {
constructor() { constructor() {
this.main(); this.main();
} }
async main(): Promise<void> { async main(): Promise<void> {}
}
} }
new Background(); new Background();

1
src/settings.ts
View file

@ -1,5 +1,6 @@
import { Session } from "./classes/session"; import { Session } from "./classes/session";
import { BasicButton } from "./components/button"; import { BasicButton } from "./components/button";
import "./sass/app.sass";
class Settings { class Settings {

3
tooling.tsconfig.json
View file

@ -1,6 +1,9 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "ESNext", "target": "ESNext",
"lib": [
"ESNext"
],
"module": "ESNext", "module": "ESNext",
"outDir": "./tools/", "outDir": "./tools/",
"rootDir": "./tools/", "rootDir": "./tools/",

10
tools/clean.ts
View file

@ -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");

86
tools/deploy.ts
View file

@ -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
View 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));

2
tsconfig.json
View file

@ -6,7 +6,7 @@
// "incremental": true, /* Enable incremental compilation */ // "incremental": true, /* Enable incremental compilation */
"target": "ESNext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */, "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'. */, "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. */ // "allowJs": true, /* Allow javascript files to be compiled. */
// "checkJs": true, /* Report errors in .js files. */ // "checkJs": true, /* Report errors in .js files. */
// "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */ // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */

28
vite.config.ts Normal file
View 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/],
},
});

28
webpack.config.background.ts
View file

@ -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'),
},
};

28
webpack.config.settings.ts
View file

@ -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'),
},
};

28
webpack.config.ts
View file

@ -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'),
},
};