Basic boilerplate to get you started on your next chrome extension, with TypeScript integrated!
- ESLint / TypeScript integrated (
@typescript-eslint/parserand@typescript-eslint/eslint-plugin) buildscript which does all of the following, in order:- Removes the previous
./builddirectory if existent - Bundles the content scripts code and outputs to
./build/index.js - Bundles the background scripts code and outputs to
./build/background.js - Moves the contents of
publictobuild
- Removes the previous
- Prettier
- Content scripts are isolated away from the background scripts so you can focus on developing one or the other separately
Inside the root folder there will be a .vscode/snippets/ folder with the files javascript.json and typescript.json. There are predefined snippets for convenience (you will need to install the Project Snippets extension to automatically enable them).
There is also workspace configuration settings for typescript and eslint in .vscode/settings.json as shown below to make the most of this boilerplate:
{
"eslint.enable": true,
"git.ignoreLimitWarning": true,
"eslint.format.enable": true,
"javascript.implicitProjectConfig.checkJs": true,
"javascript.format.semicolons": "remove",
"typescript.format.enable": true,
"typescript.check.npmIsInstalled": false,
"typescript.disableAutomaticTypeAcquisition": false,
"typescript.suggest.enabled": true,
"typescript.validate.enable": true
}To configure webpack for your content script files use webpack.content.config.js. To configure webpack for your background script files use webpack.bg.config.js.
Keep src/bg separate from src/content as they will be used separately by webpack to bundle your content/background script code.
To build your project just run npm run build and once it's finished, open up your chrome browser and type in chrome:extensions in the address bar. Click Load Unpacked and select your build directory. It should work afterwards.
Clone this project and run npm install