Chrome Extension Template

With CRXJS, Vite, and TypeScript

Introduction

This is a template for creating Chrome extensions with CRXJS, Vite, and TypeScript. How does it work? It's simple. Just run the following command:

  yarn build

This will build the extension and place it in the dist folder.

To test your extension, you'll need to enable developer mode in Chrome. To do this, go to chrome://extensions and enable developer mode. Then, click on Load unpacked and select the dist folder. Your extension should now be loaded.

This should also work on any Chromium-based browser.

As long as the browser is Chromium-based, the url chrome://extensions should work. If it doesn't, try edge://extensions or opera://extensions or brave://extensions.

This extension was tested on Chrome (Version 111.0.5563.64), Brave (Version 1.49.120), Edge (Version 111.0.1661.41), and Opera (Version 96.0.4693.80).

There are screenshots attached below showing the loaded extension for different Chromium-based browsers .

Folder & File Structure

~/chrome-extension on main
❯ tree --filelimit 10
  ├── index.html
  ├── manifest.json
  ├── node_modules [68 entries exceeds filelimit, not opening dir]
  ├── package.json
  ├── public
  │   └── vite.svg
  ├── src
  │   ├── counter.ts
  │   ├── main.ts
  │   ├── style.css
  │   ├── typescript.svg
  │   └── vite-env.d.ts
  ├── tsconfig.json
  ├── vite.config.js
  └── yarn.lock

• index.html: The HTML file that will be injected into the extension's popup.
• manifest.json: The manifest file that describes the extension.
• node_modules: The folder that contains all the dependencies.
• package.json: The file that contains all the dependencies.
• public: The folder that contains all the static assets.
• src: The folder that contains all the source code.
• tsconfig.json: The TypeScript configuration file.
• vite.config.js: The Vite configuration file.
• yarn.lock: The file that contains all the dependencies' versions.

Screenshots

Brave Browser

Chrome Browser

Edge Browser

Opera Browser

License

MIT License

Creator

Emmanuel C. Jemeni

• Twitter: @Jemeni11_
• LinkedIn: Emmanuel Jemeni