diff --git a/README.md b/README.md index cdf2414..d9c9633 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,11 @@ [![GitHub forks](https://img.shields.io/github/forks/JosunLP/BrowserExtensionTemplate?style=for-the-badge)](https://github.com/JosunLP/BrowserExtensionTemplate/network) [![GitHub stars](https://img.shields.io/github/stars/JosunLP/BrowserExtensionTemplate?style=for-the-badge)](https://github.com/JosunLP/BrowserExtensionTemplate/stargazers) [![GitHub license](https://img.shields.io/github/license/JosunLP/BrowserExtensionTemplate?style=for-the-badge)](https://github.com/JosunLP/BrowserExtensionTemplate) -![Twitter URL](https://img.shields.io/twitter/url?color=blue&logo=Twitter&style=for-the-badge&url=https%3A%2F%2Fgithub.com%2FJosunLP%2FBrowserExtensionTemplate) +[![Twitter URL](https://img.shields.io/twitter/url?logo=twitter&style=for-the-badge&url=https%3A%2F%2Fgithub.com%2FJosunLP%2FBrowserExtensionTemplate)](https://twitter.com/intent/tweet?text=Look+what+i+found+on+GitHub+%23Developer%2C+%23SoftwareDeveloper%3A&url=https%3A%2F%2Fgithub.com%2FJosunLP%2FBrowserExtensionTemplate) +[![CodeFactor](https://www.codefactor.io/repository/github/josunlp/browserextensiontemplate/badge?style=for-the-badge)](https://www.codefactor.io/repository/github/josunlp/browserextensiontemplate) +[![Known Vulnerabilities](https://snyk.io/test/github/JosunLP/BrowserExtensionTemplate/badge.svg?style=for-the-badge)](https://snyk.io/test/github/JosunLP/BrowserExtensionTemplate) + +## Description A basic template based on SASS and TypeScript to create browser extensions without directly relying on a larger framework. @@ -20,3 +24,15 @@ Your sourcecode can be written in the `src` folder. The `public` folder contains With the `npm run deploy-v3` command you can deploy the extension to the dist folder, ready to be published to the chrome web store. With the `npm run deploy-v2` command you can deploy the extension to the dist folder, ready to be published to the firefox web store. This is necessary because the firefox web store needs the `manifest.json` file to be present in the version v2. + +## License + +This project is licensed under the [MIT license](https://opensource.org/licenses/MIT). + +## Contributing + +This project is open source. Feel free to fork and contribute! + +## Author + +Jonas Pfalzgraf diff --git a/app.config.json b/app.config.json index 12a5b21..e5ceac0 100644 --- a/app.config.json +++ b/app.config.json @@ -19,5 +19,11 @@ "email": "info@josunlp.de" } ] - } + }, + "htmlTemplatePairs": [ + { + "key": "{{BET}}", + "value": "Browser Extension Template" + } + ] } \ No newline at end of file diff --git a/package.json b/package.json index 59489a7..76ea2e9 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,9 @@ "deploy-v2": "npm run deploy-v3 && node ./tools/v2.js", "build-js": "tsc -p tsconfig.json", "build-css": "sass ./src/sass/:./dist/css/", - "build-tooling": "tsc ./tools/v2.ts --target esnext --module esnext && tsc ./tools/syncConfig.ts --target esnext --module esnext && tsc ./tools/deploy.ts --target esnext --module esnext", + "build-tooling": "tsc ./tools/v2.ts --target esnext --module esnext --lib ESNext && tsc ./tools/syncConfig.ts --target esnext --module esnext --lib ESNext && tsc ./tools/deploy.ts --target esnext --module esnext --lib ESNext", + "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": { diff --git a/tools/deploy.ts b/tools/deploy.ts index 215cf0f..8b6b7b0 100644 --- a/tools/deploy.ts +++ b/tools/deploy.ts @@ -1,13 +1,13 @@ import * as fs from 'fs'; import * as path from 'path'; const appConfig = JSON.parse(fs.readFileSync('./app.config.json', 'utf8')); -var DEPLOY_ENTRY = "./public/"; -var DEPLOY_TARGET = "./dist/"; +const DEPLOY_ENTRY = "./public/"; +const DEPLOY_TARGET = "./dist/"; function deleteFolderRecursive(path: string) { if (fs.existsSync(path)) { - fs.readdirSync(path).forEach(function(file: string) { - var curPath = path + "/" + file; + fs.readdirSync(path).forEach(function (file: string) { + const curPath = path + "/" + file; if (fs.lstatSync(curPath).isDirectory()) { deleteFolderRecursive(curPath); } else { @@ -19,11 +19,11 @@ function deleteFolderRecursive(path: string) { } function findHtmlFilesRecursive(source: string): string[] { - var files: string[] = []; - var dir = fs.readdirSync(source); - dir.forEach(function(file: any) { - var sourceFile = path.join(source, file); - var stat = fs.lstatSync(sourceFile); + 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 { @@ -35,36 +35,38 @@ function findHtmlFilesRecursive(source: string): string[] { return files; } -function replaceKeywordsInHtmlFile(file: string, keywords: string[], values: string[]) { - var content = fs.readFileSync(file, 'utf8'); - for (var i = 0; i < keywords.length; i++) { - content = content.replace(new RegExp(keywords[i], 'g'), values[i]); - } +function replaceKeywordsInHtmlFile(file: string) { + const content = fs.readFileSync(file, 'utf8'); + const pairs = appConfig.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, keywords: string[], values: string[]) { - var files = findHtmlFilesRecursive(source); - files.forEach(function(file: string) { - replaceKeywordsInHtmlFile(file, keywords, values); +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; + } catch (e: any) { + if (e.code != 'EEXIST') throw e; } } function copyFiles(source: string, target: string) { - var files = fs.readdirSync(source); - files.forEach(function(file: any) { - var sourceFile = path.join(source, file); - var targetFile = path.join(target, file); - var stat = fs.lstatSync(sourceFile); + 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); @@ -77,6 +79,6 @@ function copyFiles(source: string, target: string) { deleteFolderRecursive(DEPLOY_TARGET); mkdirSync(DEPLOY_TARGET); copyFiles(DEPLOY_ENTRY, DEPLOY_TARGET); -buildHtmlFiles(DEPLOY_ENTRY, ["{{BET}}"], [appConfig.AppData.name]); +buildHtmlFiles(DEPLOY_ENTRY); console.log("Deployed to " + DEPLOY_TARGET); \ No newline at end of file diff --git a/tools/v2.ts b/tools/v2.ts index 60d5ea8..dd42ddb 100644 --- a/tools/v2.ts +++ b/tools/v2.ts @@ -2,6 +2,44 @@ import * as fs from 'fs'; const manifest = JSON.parse(fs.readFileSync('./dist/manifest.json', 'utf8')); -manifest.manifest_version = 2; +manifest.manifest_version = 2 + +manifest.background.scripts = [] + +manifest.background.scripts.push(manifest.background.service_worker) +delete manifest.background.type +delete manifest.background.service_worker +manifest.background.persistent = true +if (manifest.host_permissions) { + manifest.permissions.push(manifest.host_permissions) +} +if (manifest.optional_host_permissions) { + manifest.permissions.push(manifest.optional_host_permissions) +} +delete manifest.host_permissions +delete manifest.optional_host_permissions + +let newContentSecurityPolicy = "" + +try { + for (const policy of manifest.content_security_policy) { + newContentSecurityPolicy += policy.key + "'" + policy.value + "'" + " " + } +} catch (e) { + newContentSecurityPolicy = "default-src 'self'" +} + +manifest.content_security_policy = newContentSecurityPolicy + +try { + manifest.web_accessible_resources = manifest.web_accessible_resources.resources +} catch (e) { + manifest.web_accessible_resources = [] +} + +if (manifest.action) { + manifest.browser_action = manifest.action +} +delete manifest.action fs.writeFileSync('./dist/manifest.json', JSON.stringify(manifest, null, 2)); \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 2e39850..fe9081d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -4,9 +4,9 @@ /* Basic Options */ // "incremental": true, /* Enable incremental compilation */ - "target": "es6", /* 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'. */ - // "lib": [], /* Specify library files to be included in the compilation. */ + // "lib": ["ESNext"], /* 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'. */