Make your new tab page whatever you want it to be without writing any code.
- Uses Manifest v3
- Use npm dependencies thanks to Parcel 2.
- Auto-syncing options.
- Auto-publishing with auto-versioning and support for manual releases.
- Checkout the copied repository to your local machine eg. with
git clone https://github.com/my-username/my-awesome-extension/
- Run
npm install
to install all required dependencies - Run
npm run build
The build step will create the distribution
folder, this folder will contain the generated extension.
Using web-ext is recommended for automatic reloading and running in a dedicated browser instance. Alternatively you can load the extension manually (see below).
- Run
npm run watch
to watch for file changes and build continuously - Run
npm install --global web-ext
(only only for the first time) - In another terminal, run
web-ext run -t chromium
- Check that the extension is loaded by opening the extension options (in Firefox or in Chrome).
You can also load the extension manually in Chrome or Firefox.
- For example, edit source\manifest.json to
"name": "My Awesome Extension",
- Go back to your browser, reload and see the change take effect
Note: Firefox will automatically reload content scripts when the extension is updated, Chrome requires you to reload the page to reload the content scripts.
Here are some websites you should refer to:
- Parcel’s Web Extension transformer documentation
- Chrome extensions’ API list
- A lot more links in my Awesome WebExtensions list
The extension doesn't target any specific ECMAScript environment or provide any transpiling by default. The extensions output will be the same ECMAScript you write. This allows us to always target the latest browser version, which is a good practice you should be following.
Being based on Parcel 2 and its WebExtension transformer, you get all the good parts:
- Browserlist-based code transpiling (which defaults to just the latest Chrome and Firefox versions)
- Automatically picks up any new file specified in
manifest.json
Options are managed by [fregante/webext-options-sync][link-options-sync], which auto-saves and auto-restores the options form, applies defaults and runs migrations.
Many icons have been acquired and/or modified from Ian McKenize's purchased commercial license in 2024:
Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.
This extension is essentially an appSage wrapper for the new tab page: https://github.com/curiousmarkingsco/appSage