Jemeni11 / Chrome-Extension-CRXJS-Vite-TS-Template

A template for creating chrome extensions with CRXJS, Vite and TypeScript
https://crxjs.dev/vite-plugin/getting-started/vanilla-js/create-project
MIT License
12 stars 0 forks source link
chrome chrome-extensions crxjs typescript vite

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

Screenshots

Brave Browser

Brave Browser

Chrome Browser

Chrome Browser

Edge Browser

Edge Browser

Opera Browser

Opera Browser

License

MIT License

Creator

Emmanuel C. Jemeni