A template for creating a browser extension (Firefox).
See https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json for a list of what can be added to the manifest.json
file.
To use this template you should reset/set some stuff:
- set "name" to your extensions name
- set "description"
- set "homepage_url" to your repos readme
- change the "name" to your extensions/repos name
- change the "description"
- under "repository" change the "url" to that of your repos
- change "author" to your name
- change "license" to your license
- under "bugs" change "url" to that of your repos
- change "homepage" to your repos readme
Delete this file and then run:
npm install
- change the whole thing
or
- change the name
- change the date
- extension/css/dist/
- extension/js/dist/
- extension/icons/
- src/shared/
- decide on a name (
<name>
) - go to the
config
folder- create a new folder with the name
<name>
- copy
tsconfig.json
,webpack.config.js
and optionallytailwind.config.cjs
from another folder to the newly created folder (<name>
) - enter the newly created folder (
<name>
)- in
tsconfig.json
change:"include": ["../../src/<name>/**/*.ts"],
- in
webpack.config.js
change:entry: path.resolve(__dirname, "..", "..", "src", "<name>", "index.ts"),
filename: "<name>.js",
- in
tailwind.config.cjs
change:content: ["src/<name>/**/*.ts"],
orcontent: ["src/<name>/**/*.ts", "extension/html/<name>.html],"
if you require an html file
- in
- create a new folder with the name
- go to the
extension
folder- add your html file (if you have/need one)
<name>.html
to the folderhtml
(you can use your script by using<script type="text/javascript" src="/js/dist/<name>.js"></script>
and your css by using:<link href="/css/dist/<name>.css" rel="stylesheet">
) - add your script (and css) to the
manifest.json
file (you can link your script by using:js/dist/<name>.js
and css by usingcss/dist/<name>.css
)
- add your html file (if you have/need one)
- go to the
src
folder- add the folder
<name>
and enter it- create the file
index.ts
inside that folder
- create the file
- add the folder
- if you added a TailwindCSS config file:
- go to the
tw
folder - create a new file called
<name>.css
- add the contents of another file in that directory to the newly created file
- go to the
- go to the
package.json
file and add the following scripts:"build_wp_<name>": "webpack --config config/<name>/webpack.config.js",
"watch_wp_<name>": "webpack --config config/<name>/webpack.config.js --watch",
"build_tw_<name>": "tailwindcss -c ./config/<name>/tailwind.config.cjs -i ./tw/<name>.css -o ./extension/css/dist/<name>.css --minify",
"watch_tw_<name>": "tailwindcss -c ./config/<name>/tailwind.config.cjs -i ./tw/<name>.css -o ./extension/css/dist/<name>.css --minify --watch",
- also add the newly created scripts to the
build
script
In the config
folder are three other folders: background
, content
and popup
.
Just walk through adding another content script backwards and use the folder names as <name>
.
System requirements:
- Node v18.13.0
- npm 9.7.1
Install the required npm packages:
npm install
Run the build script to build everything:
npm run build
Or build single parts:
The TypeScript source files are under src/content
and src/shared
and the config files are under config/content
.
Build script:
npm run build_wp_content
The TypeScript source files are under src/popup
and src/shared
and the config files are under config/popup
.
Build script:
npm run build_wp_popup
The TypeScript source files are under src/background
and src/shared
and the config files are under config/background
.
Build script:
npm run build_wp_background