WebExtensionTemplate

Overview

WebExtensionTemplate is a tool that allows you to easily create browser extensions for Chrome, Firefox, and Safari. It provides a streamlined process for building extensions using TypeScript and either Svelte or React. With WebExtensionTemplate, you can quickly develop popup windows, extension settings pages, and even iOS and macOS container apps for Safari extensions.

Features

• Popup window written in Svelte or React
• Extension settings page written in Svelte or React
• Lightning-fast build process using esbuild
• Build scripts to package the extension for Chrome, Firefox, and Safari
• Sourcemaps for local builds
• Minifies production builds
• iOS and macOS container apps written in SwiftUI for Safari extensions
• Prettier formatting
• webextension-polyfill to add missing Promise-based APIs to Chrome

Installation

To install WebExtensionTemplate and set up a project, follow these steps:

1. Fork the WebExtensionTemplate repository.
2. Update the Extension/_locales/en/messages.json file with your extension’s name and description.
3. Update the Extension/README.md file with your app’s name.
4. Open the Extension/package.json file and update the following fields:
   • name with your app’s name
   • author with your name
   • license with the app’s license
5. Open the Extension/public/settings.html file and update the <title> with your app’s name.
6. Delete the <link> tag in Extension/settings.html if you don’t want to use the provided CSS.
7. Create a toolbar icon for your app. It should be a small, monochromatic glyph that represents your app’s functionality in Safari. Create versions of the icon in 16, 19, 32, 38, 48, and 72-pixel sizes and save them to Extension/images. Name them as toolbar_Qpx.png, where Q is the pixel size.
8. Create an app icon that is 1024 x 1024 pixels. Copy versions of the icon in 48, 96, 128, 256, and 512-pixel sizes to Extension/images. Name them as app_icon_Qpx.png, where Q is the pixel size.

For Firefox and Safari specific steps, refer to the original article.

Summary

WebExtensionTemplate is a powerful tool for quickly creating browser extensions using TypeScript and Svelte or React. It simplifies the development process by providing pre-built components like popup windows and settings pages. The build process is optimized for speed, and the resulting extensions can be easily packaged for Chrome, Firefox, and Safari. Additionally, WebExtensionTemplate offers support for iOS and macOS container apps, allowing you to create robust Safari extensions without needing knowledge of Swift or SwiftUI. With its comprehensive features and ease of use, WebExtensionTemplate is a valuable tool for developers looking to build browser extensions efficiently.