{"id":14982080,"url":"https://github.com/emailthis/extension-boilerplate","last_synced_at":"2025-05-14T16:12:22.962Z","repository":{"id":41176286,"uuid":"82643171","full_name":"EmailThis/extension-boilerplate","owner":"EmailThis","description":"⚡️ A template for building cross browser extensions for Chrome, Opera \u0026 Firefox.","archived":false,"fork":false,"pushed_at":"2024-05-02T11:02:01.000Z","size":3862,"stargazers_count":3310,"open_issues_count":28,"forks_count":374,"subscribers_count":72,"default_branch":"master","last_synced_at":"2025-05-12T05:48:13.198Z","etag":null,"topics":["boilerplate-template","chrome-extension","es6","extensions","firefox-addon","gulp","opera-extension","webextensions"],"latest_commit_sha":null,"homepage":"https://www.emailthis.me/open-source/extension-boilerplate","language":"JavaScript","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/EmailThis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","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":"2017-02-21T06:10:49.000Z","updated_at":"2025-05-07T21:24:25.000Z","dependencies_parsed_at":"2024-01-13T14:40:44.970Z","dependency_job_id":"9fd6d9ba-3af7-4f47-813e-79e562b86af6","html_url":"https://github.com/EmailThis/extension-boilerplate","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmailThis%2Fextension-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmailThis%2Fextension-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmailThis%2Fextension-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmailThis%2Fextension-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EmailThis","download_url":"https://codeload.github.com/EmailThis/extension-boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254179905,"owners_count":22027884,"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":["boilerplate-template","chrome-extension","es6","extensions","firefox-addon","gulp","opera-extension","webextensions"],"created_at":"2024-09-24T14:04:44.978Z","updated_at":"2025-05-14T16:12:22.944Z","avatar_url":"https://github.com/EmailThis.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003e\n    Extension Boilerplate  \n  \u003c/h1\u003e\n\n  \u003cp\u003e\n    \u003cstrong\u003eA foundation for creating browser extensions for Chrome, Opera \u0026 Firefox.\u003c/strong\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\nNow that Firefox supports WebExtensions, it has become a lot easier to build browser extensions/addons for multiple browsers without duplicating the codebase. This project serves as a sensible starting point to help you get started.\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://www.emailthis.me/open-source/extension-boilerplate\"\u003e\n    \u003cimg src=\"./resources/chrome-promo/large.png\" alt=\"Extension Boilerplate\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\nI have extracted this from the browser extensions that I built for my side-project, [Email This](https://www.emailthis.me).\n\n\u003e Side note: Do check out [**Email This**](https://www.emailthis.me). It is a simpler alternative to bookmarking tools like Pocket, Readability \u0026 Instapaper. Email This will remove ads \u0026 distractions from an article and send you a nice email with just the text/images. No need to install any additional applications or login to another app just to access your bookmarks. \nThe Chrome Extensions is available [on the Chrome Web Store](https://chrome.google.com/webstore/detail/email-this/lgblkllcjgihfnlefhnnpppndbbjallh).\n\n\n## Features\n\n\u003cdl\u003e\n  \u003cdt\u003eWrite once and deploy to Chrome, Opera \u0026 Firefox\u003c/dt\u003e\n  \u003cdd\u003e\n    Based on WebExtensions. It also includes a tiny polyfill to bring uniformity to the APIs exposed by different browsers.\n  \u003c/dd\u003e\n\u003c/dl\u003e\n\n\u003cdl\u003e\n  \u003cdt\u003eLive-reload\u003c/dt\u003e\n  \u003cdd\u003e\n    Your changes to CSS, HTML \u0026 JS files will be relayed instantly without having to manually reload the extension. This ends up saving a lot of time and improving the developer experience.\n  \u003c/dd\u003e\n\u003c/dl\u003e\n\n\u003cdl\u003e\n  \u003cdt\u003eSensible starting point\u003c/dt\u003e\n  \u003cdd\u003e\n    This comes with a gulp based workflow that converts modern \u003cstrong\u003eES6\u003c/strong\u003e JavaScript and \u003cstrong\u003eSCSS\u003c/strong\u003e to JS/CSS. \n    Scripts are transpiled using Babel and bundled using Browserify.\n    Sourcemaps are available for both JS and SCSS.\n  \u003c/dd\u003e\n\u003c/dl\u003e\n\n\u003cdl\u003e\n  \u003cdt\u003eSketch (.sketch) assets for icons and promo images\u003c/dt\u003e\n  \u003cdd\u003e\n    A .sketch file is included in the resources directory. This has all the icons and promo images that will be needed while uploading the extensions to the app stores.\n  \u003c/dd\u003e\n\u003c/dl\u003e\n\n\u003cdl\u003e\n  \u003cdt\u003eEasily configurable and extendable\u003c/dt\u003e\n  \u003cdd\u003e\n    The gulpfile is easily understandable and configurable. If you want to add additional tasks or remove un-used ones, you can easily tweak that file to suit your needs.\n  \u003c/dd\u003e\n\u003c/dl\u003e\n\n\u003cdl\u003e\n  \u003cdt\u003ePlatform specific \u0026 Environment specific variables.\u003c/dt\u003e\n  \u003cdd\u003e\n    You might need to specify different data variables based on your environment. For example, you might want to use a localhost API endpoint during development and a production API endpoint once the extension is submitted to the appstore. You can specify such data in the json files inside `config` directory.\n\n    You can also set custom data variables based on the platform (different variable for Chrome, FF, Opera).\n  \u003c/dd\u003e\n\u003c/dl\u003e\n\n\n\n## Installation\n1. Clone the repository `git clone https://github.com/EmailThis/extension-boilerplate.git`\n2. Run `npm install`\n3. Run `npm run build`\n\nAlternately, if you want to try out the sample extension, here are the download links. After you download it, unzip the file and load it in your browser using the steps mentioned below.\n - [**Download Chrome Extension**](https://github.com/EmailThis/extension-boilerplate/releases/download/v1.0/chrome.zip)\n - [**Download Opera Extension**](https://github.com/EmailThis/extension-boilerplate/releases/download/v1.0/opera.zip)\n - [**Download Firefox Extension**](https://github.com/EmailThis/extension-boilerplate/releases/download/v1.0/firefox.zip)\n\n\n##### Load the extension in Chrome \u0026 Opera\n1. Open Chrome/Opera browser and navigate to chrome://extensions\n2. Select \"Developer Mode\" and then click \"Load unpacked extension...\"\n3. From the file browser, choose to `extension-boilerplate/build/chrome` or (`extension-boilerplate/build/opera`)\n\n\n##### Load the extension in Firefox\n1. Open Firefox browser and navigate to about:debugging\n2. Click \"Load Temporary Add-on\" and from the file browser, choose `extension-boilerplate/build/firefox`\n\n\n## Developing\nThe following tasks can be used when you want to start developing the extension and want to enable live reload - \n\n- `npm run chrome-watch`\n- `npm run opera-watch`\n- `npm run firefox-watch`\n\n\n## Packaging\nRun `npm run dist` to create a zipped, production-ready extension for each browser. You can then upload that to the appstore.\n\n\n## TODO\n- [ ] Add support for Safari\n- [x] Add Firefox \u0026 Opera Promo images\n- [x] Add sample screenshot templates\n- [ ] Write a guide for using config variables \u0026 JS preprocessor\n\n\n-----------\nThis project is licensed under the MIT license. \n\nIf you have any questions or comments, please create a new issue. I'd be happy to hear your thoughts.\n\n\nBharani, [Email This](https://www.emailthis.me)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femailthis%2Fextension-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Femailthis%2Fextension-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femailthis%2Fextension-boilerplate/lists"}