A browser extension builder with Astro and Bun Node.js + npm Version here 💚
- GitHub Repo Size - Shows the total size of repos and of files and folders.
- Steam Multisell - UI for multiselling on the Steam marketplace.
- Google Maps Button - Re-adds the Google Maps link to searches (removed in EU).
- 📘 Typescript for a better developer experience
- 🚄 Bun for blazing fast development
- ⏱ Manifest version 3 (MV3) for priority publishing
- 🚀 Astro enabling flexible popup design
- 🐱🏍 Cool Mascot
Head over to the community page for announcements, Q&A, collaboration and inspiration!
Make sure you have some understanding of extension development. Here are some resources:
You can use Bun to quickly initialize a new project:
bun create catonaut [AppName]OR
bunx create-catonaut [AppName]For more information, refer to create-catonaut
Use the template or clone the project, navigate into the project folder and run:
bun iThe manifest is a JSON file that defines the extension's name, version, functionality, permissions, and other details. It is required for all browser extensions and must be carefully constructed to ensure the extension is secure and efficient (and works).
For additional information visit the manifest documentation page. Please note that some browsers, like Firefox, require specific information for extensions to work.
Example:
{
"manifest_version": 3,
"name": "Your Extension Name",
"version": "0.1.0",
"web_accessible_resources": [
{
"matches": ["http://*/*"],
"resources": ["assets/styles/content.css"]
}
],
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["content.js"],
"css": ["content.css"]
}
],
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "index.html"
},
"browser_specific_settings": {
"gecko": {
"id": "[email protected]",
"strict_min_version": "42.0"
}
},
"icons": {
"16": "assets/icon16.png",
"32": "assets/icon32.png",
"48": "assets/icon48.png",
"128": "assets/icon128.png"
}
}To add JavaScript to modify the page, edit the src/scripts/content.ts. It will be compiled to JavaScript when you build the extension. Look at Build for more information.
A content script is a JavaScript file that runs in the context of a web page and can modify its content and behavior. The content script can read and modify the HTML, CSS, and JavaScript of the web page, and can be used to add new functionality, modify existing functionality, or manipulate the content of the page in various ways.
The name "content.ts" is often used as a convention to indicate that the file contains the code for a content script. However, developers are free to use any filename they like for their content script.
For additional information visit the content script documentation page.
Background scripts create service workers that live independent of any other window or tab. These allows extensions to observe and act in response to events. Commonly leveraging Chrome's Browser API they can be used to listen for events, such as the addition of a new tab or navigation to a new URL. They can also be used to keep state across multiple pages within the extension.
For example, a background script can listen for an event, such as the user clicking on the browser action icon, then dispatch an event to the content script in the active tab to take action.
For additional information visit the background script documentation page.
To add CSS to the DOM, you need to create a CSS file in the public folder and reference it in the manifest.json. The above manifest example assumes there is a file called content.css in the public/assets/styles/ folder.
For manipulating the DOM, HTML can be added or changed programmatically using JavaScript. Your best friends for achieving this are most likely going to be document.querySelector(), document.createElement() and Node.insertBefore().
You can modify the popup just like you would modify an Astro app. You can start by modifying the src/pages/index.astro file. When starting, there is a Placeholder component inside the body that you can modify at src/components/Placeholder.astro or remove.
You can generate the icons from an image.
- Replace the public/assets/images/example.png
- Run the following command in the terminal:
bun run iconsThis will create the icons referenced by default in the manifest of sizes 16, 32, 48 and 128.
You can test the popup by running the following command in the terminal:
bun run devThis will start a development server and open the popup in your browser as if it were a website. You can then modify the popup and see the changes in real time.
Thankfully you don't have to get your extension published before being able to test it. Refer to Before starting for information about testing an extension, also referred to as loading unpacked extensions. You do however need to build the extension to be able to test it.
To build the extension, run:
bun run buildroot
├── 📁 build-tools
├── 📁 dist
├── 📁 public
└── 📁 src
├── 📁 pages
└── 📁 scripts
└── 📁 internal
Contains tools used for building the extension. You should not need to modify anything in this folder.
Contains the built extension. This folder can be loaded as an unpacked extension.
Contains the public files. This folder is copied to the dist folder when building the extension. The files are not modified in any way.
Contains the source files. This is where you will be doing most of your work.
Contains the index.astro. This is compiled to HTML when building the extension and functions as the popup. I find adding a folder src/components/ and importing them in the index.astro to be a good way to structure the popup.
Contains the content.ts and background.ts. These are compiled to JavaScript when building the extension. The content.ts is injected into the DOM of the page.
Not necessary although I find that a useful way to structure the scripts is to add files in this folder and import their functionality in the content.ts and background.ts.
I added a .prettierrc for contributing. If building for your own purposes, feel free to remove it. To format with the provided configuration, run:
bun run formatCatonaut is under MIT License.