{"id":13603214,"url":"https://github.com/kyle-n/WebExtensionTemplate","last_synced_at":"2025-04-11T14:30:37.731Z","repository":{"id":176922960,"uuid":"659433716","full_name":"kyle-n/WebExtensionTemplate","owner":"kyle-n","description":"Create a browser extension for Chrome, Firefox and Safari in no time.","archived":false,"fork":false,"pushed_at":"2025-04-06T17:11:17.000Z","size":153,"stargazers_count":128,"open_issues_count":0,"forks_count":44,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-06T18:24:25.374Z","etag":null,"topics":["browser-extension","chrome","chrome-extension","chrome-extensions","esbuild","firefox","firefox-addon","firefox-extension","react","reactjs","safari","safari-extension","svelte","typescript","web-extension","web-extensions","xcode"],"latest_commit_sha":null,"homepage":"","language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kyle-n.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-06-27T20:36:43.000Z","updated_at":"2025-04-06T17:10:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"151d8a97-181a-4137-8727-b684d520a850","html_url":"https://github.com/kyle-n/WebExtensionTemplate","commit_stats":null,"previous_names":["kyle-n/webextensiontemplate"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyle-n%2FWebExtensionTemplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyle-n%2FWebExtensionTemplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyle-n%2FWebExtensionTemplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyle-n%2FWebExtensionTemplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kyle-n","download_url":"https://codeload.github.com/kyle-n/WebExtensionTemplate/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247640461,"owners_count":20971557,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["browser-extension","chrome","chrome-extension","chrome-extensions","esbuild","firefox","firefox-addon","firefox-extension","react","reactjs","safari","safari-extension","svelte","typescript","web-extension","web-extensions","xcode"],"created_at":"2024-08-01T18:01:57.815Z","updated_at":"2025-04-11T14:30:37.725Z","avatar_url":"https://github.com/kyle-n.png","language":"Swift","readme":"# WebExtensionTemplate\n\nCreate a browser extension for Chrome, Firefox and Safari in no time.\n\nWebExtensionTemplate lets you skip the boilerplate and write a [Web Extension](https://developer.mozilla.org/en-US/docs/Glossary/WebExtensions) with [TypeScript](https://www.typescriptlang.org) and [Svelte](https://www.typescriptlang.org) or [React](https://react.dev).\n\n## Features\n\n- Popup window written in Svelte ([or React](https://github.com/kyle-n/WebExtensionTemplate/tree/react)) when you click the extension toolbar icon \n- Extension settings page written in Svelte ([or React](https://github.com/kyle-n/WebExtensionTemplate/tree/react))\n- Lightning-fast build process to compile source code with [esbuild](https://esbuild.github.io)\n- Build scripts to package the extension for Chrome, Firefox and Safari\n- Sourcemaps for local builds\n- Minifies production builds\n- iOS and macOS container apps written in SwiftUI for the Safari extension (no Swift / SwiftUI knowledge required to use)\n- [Prettier](https://prettier.io) formatting\n- [webextension-polyfill](https://www.npmjs.com/package/webextension-polyfill) to add a couple missing Promise-based APIs to Chrome\n\n### Future roadmap\n\n- Separate branch with the popup and settings page written in React\n- Tests\n\n## Setup\n\nFirst, fork this repository. Then, follow the steps below. By the end of this, you should be able to search across the project for `REPLACEME` and get no results.\n\n### All browsers\n\n- Update `Extension/_locales/en/messages.json` with an extension name and description\n- Update `Extension/README.md` with your app's name\n- Open `Extension/package.json` and update...\n\t- `name` with your app's name\n\t- `author` with your name\n\t- `license` with the app's license\n- Open `Extension/public/settings.html` and update the `\u003ctitle\u003e` with your app's name\n- Delete the `\u003clink\u003e` in `Extension/settings.html` if you don't like the provided CSS\n- Create a toolbar icon for your app\n\t- Should be a small, simple glyph that makes sense when monochromatic in Safari\n\t- Make versions in 16, 19, 32, 38, 48 and 72-pixel sizes saved to `Extension/images`\n\t- Should be named `toolbar_Qpx.png` where `Q` is 16, 19, etc\n- Make an app icon that is 1024 x 1024\n\t- Copy versions of it to `Extension/images` in 48, 96, 128, 256 and 512-pixel sizes \n\t- Should be named `app_icon_Qpx.png` , where `Q` is 48, 96, etc\n\n### Firefox\n\n- Update `manifest.json` with a Firefox extension id (under `gecko` \u003e `id`) in the format `appname@domain.com` \n\n### Safari\n\nDo the following steps in Xcode.\n\nNote: “Open the project config” means double-click the app name at the top of the file view in Xcode.\n\n- [Change the Safari app name to your app’s name](https://stackoverflow.com/a/20418989)\n- Open `Shared (App)/Models.swift` and update `APP_NAME` with your app's name\n- Create a new bundle identifier in the format `com.domain.App-Name` \n\t- Open the project config and go to `AppName (iOS)` \u003e Signing \u0026 Capabilities and update the bundle id\n\t- Repeat for the macOS app\n- Create a new bundle identifier. It should be your app bundle identifier with `.Extension` added onto the end. So if your app bundle ID is `com.domain.App-Name`, this should be `com.domain.App-Name.Extension`\n\t- Open the project config and go to `AppName Extension (iOS)` \u003e Signing \u0026 Capabilities and update the bundle id with the extension bundle id\n\t- Repeat for the macOS extension\n\t- Update `MAC_EXTENSION_BUNDLE_ID` in `Shared (App)/Models.swift` with the extension bundle ID as well\n- Update `macOS (App)/AppDelegate.swift` with a help documentation link\n- Under project config \u003e Signing \u0026 Capabilities, set the team for both apps and both extensions\n- Under project config \u003e General, update the display name for iOS and macOS\n- Rename both files named `REPLACEME.entitlements` to be `Your App Name.entitlements` \n\t- Open the project config and to go to App Name (macOS) \u003e Build Settings and find the setting for “Code Signing Entitlements.” Replace `REPLACEME.entitlements` with the name of your new entitlements file\n\t- Repeat for App Name Extension (macOS) \u003e Build Settings \u003e Code Signing Entitlements\n- Open the project config and go to App Name Extension (macOS) \u003e Build Settings and find the setting for “Bundle Display Name.” Update its value with your app’s name\n\t- Repeat for App Name Extension (iOS)\n- Go to Product \u003e Schemes \u003e Manage Schemes… and update the iOS and macOS schemes with your app’s name\n- iOS app icon:\n\t- Add the app icon to  `iOS (App)/iOS Assets` as `AppIcon` with all the required sizes\n\t- Add a copy of the app icon named `Icon.png` in `Shared (App)/Resources` \n- macOS app icon\n\t- Reduce the size of the app icon by 20% while keeping the canvas the same size\n\t- Add the app icon to `macOS (App)/macOS Assets` as `AppIcon` with all the required sizes\n\n## Building your extension\n\nAll `npm` commands should be run in `Extension`. Safari extensions should be built in Xcode. \n\n| Browser | Local | Production |\n| - | - | - |\n| Chrome | `npm run build` | `npm run build:chrome` |\n| Firefox | `npm run build` | `npm run build:firefox` |\n| Safari | Product \u003e Build | Product \u003e Archive |\n\n- `console.log` calls are stripped out of prod builds\n- The Chrome build script generates a zip that can be uploaded to the Chrome Web Store\n- The Firefox build script generates a zip for the Mozilla Add-On Store as well as a zip of the source code for the store review\n\n## Other notes \n\n- Firefox [does not support service workers in the background](https://github.com/mozilla/web-ext/issues/2532#issuecomment-1285039773), so I would maintain a separate branch `firefox` that runs `dist/background.js` as a background script","funding_links":[],"categories":["chrome-extension"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkyle-n%2FWebExtensionTemplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkyle-n%2FWebExtensionTemplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkyle-n%2FWebExtensionTemplate/lists"}