https://github.com/utags/browser-extension-starter
🧩 Browser Extension, Userscript starter
https://github.com/utags/browser-extension-starter
bookmarklet bookmarklets browser-extension browser-extension-starter userscript userscript-builder userscript-development userscripts web-extension web-extension-starter web-extensions
Last synced: about 1 month ago
JSON representation
🧩 Browser Extension, Userscript starter
- Host: GitHub
- URL: https://github.com/utags/browser-extension-starter
- Owner: utags
- License: mit
- Created: 2023-03-27T13:44:10.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-17T11:04:09.000Z (about 2 years ago)
- Last Synced: 2025-04-23T19:39:51.953Z (6 months ago)
- Topics: bookmarklet, bookmarklets, browser-extension, browser-extension-starter, userscript, userscript-builder, userscript-development, userscripts, web-extension, web-extension-starter, web-extensions
- Language: JavaScript
- Homepage:
- Size: 284 KB
- Stars: 20
- Watchers: 1
- Forks: 16
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Browser Extension Starter and Userscript Starter
## Features
- One codebase for Chrome extesions, Firefox addons, Userscripts, Bookmarklets and simple JavaScript modules
- Live-reload and React HMR
- [Plasmo](https://www.plasmo.com/) - The Browser Extension Framework
- [esbuild](https://esbuild.github.io/) - Bundler
- React
- TypeScript
- [Prettier](https://github.com/prettier/prettier) - Code Formatter
- [XO](https://github.com/xojs/xo) - JavaScript/TypeScript linter
## Showcases
- [🏷️ UTags - Add usertags to links](https://github.com/utags/utags) - Allow users to add custom tags to links.
- [🔗 Links Helper](https://github.com/utags/links-helper) - Open external links in a new tab, open internal links matching the specified rules in a new tab, convert text to hyperlinks, convert image links to image tags, parse Markdown style links and image tags, parse BBCode style links and image tags
## How To Make A New Extension
1. Fork [this starter repo](https://github.com/utags/browser-extension-starter), and rename repo to your extension name
2. Clone your repo
3. Install dependencies
```bash
pnpm install
# or
npm install
```
## Getting Started
First, run the development server:
```bash
pnpm dev
# or
npm run dev
```
Open your browser and load the appropriate development build. For example, if you are developing for the chrome browser, using manifest v3, use: `build/chrome-mv3-dev`.
You can start editing the popup by modifying `popup.tsx`. It should auto-update as you make changes. To add an options page, simply add a `options.tsx` file to the root of the project, with a react component default exported. Likewise to add a content page, add a `content.ts` file to the root of the project, importing some module and do some logic, then reload the extension on your browser.
For further guidance, [visit our Documentation](https://docs.plasmo.com/)
## Making production build
Run the following:
```bash
pnpm build
# or
npm run build
```
This should create a production bundle for your extension, ready to be zipped and published to the stores.
## Submit to the webstores
The easiest way to deploy your Plasmo extension is to use the built-in [bpp](https://bpp.browser.market) GitHub action. Prior to using this action however, make sure to build your extension and upload the first version to the store to establish the basic credentials. Then, simply follow [this setup instruction](https://docs.plasmo.com/framework/workflows/submit) and you should be on your way for automated submission!
## License
Copyright (c) 2023 [Pipecraft](https://www.pipecraft.net). Licensed under the [MIT License](LICENSE).
## >\_
[](https://www.pipecraft.net)
[](https://utags.pipecraft.net)
[](https://dto.pipecraft.net)
[](https://www.bestxtools.com)