https://github.com/smashedr/web-extension-template
https://github.com/smashedr/web-extension-template
Last synced: 19 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/smashedr/web-extension-template
- Owner: smashedr
- License: gpl-3.0
- Created: 2023-10-31T23:41:22.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-11-18T08:05:24.000Z (over 2 years ago)
- Last Synced: 2025-02-25T08:15:35.153Z (over 1 year ago)
- Language: JavaScript
- Size: 226 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/cssnr/link-extractor/actions/workflows/build.yaml)
[](https://sonarcloud.io/summary/overall?id=cssnr_link-extractor)
[](https://github.com/cssnr/link-extractor/blob/master/src/manifest.json)
[](https://github.com/cssnr/link-extractor/releases/latest)
[](https://chrome.google.com/webstore/detail/link-extractor/ifefifghpkllfibejafbakmflidjcjfp)
[](https://addons.mozilla.org/addon/link-extractor)
[](https://microsoftedge.microsoft.com/addons/detail/link-extractor/nmndaimimedljcfgnnoahempcajdamej)
[](https://chrome.google.com/webstore/detail/link-extractor/ifefifghpkllfibejafbakmflidjcjfp)
[](https://addons.mozilla.org/addon/link-extractor)
[](https://microsoftedge.microsoft.com/addons/detail/link-extractor/nmndaimimedljcfgnnoahempcajdamej)
# Web Extension Example
Modern Chrome and Firefox Web Extension Example to set and remember your favorite color.
* [Install](#install)
* [Features](#features)
* [Configuration](#configuration)
* [Development](#development)
- [Building](#building)
- [Chrome Setup](#chrome-setup)
- [Firefox Setup](#firefox-setup)
# Install
* [Google Chrome Web Store](https://chrome.google.com/webstore/detail/link-extractor/ifefifghpkllfibejafbakmflidjcjfp)
* [Mozilla Firefox Add-ons](https://addons.mozilla.org/addon/link-extractor)
* [Microsoft Edge Add-ons](https://microsoftedge.microsoft.com/addons/detail/link-extractor/nmndaimimedljcfgnnoahempcajdamej)
All Chromium Based Browsers can install the extension from the
[Chrome Web Store](https://chrome.google.com/webstore/detail/link-extractor/ifefifghpkllfibejafbakmflidjcjfp).
# Features
* Set and Display your Favorite Color
* Set Selected Text to Favorite Color
# Configuration
You can pin the Addon by clicking the `Puzzle Piece`, find the Web Extension icon, then;
**Firefox**, click the `Settings Wheel` and `Pin to Toolbar`.
**Chrome**, click the `Pin` icon.
To open the options, click on the icon (from above) then click `Open Options`.
# Development
**Quick Start**
To install and run chrome or firefox with web-ext.
```shell
npm isntall
npm run chrome
npm run firefox
```
To Load Unpacked/Temporary Add-on make a `manifest.json` and run from the [src](src) folder.
```shell
npm run manifest:chrome
npm run manifest:firefox
```
For more information on web-ext, [read this documentation](https://extensionworkshop.com/documentation/develop/web-ext-command-reference/).
To pass additional arguments to an `npm run` command, use `--`.
Example: `npm run chrome -- --chromium-binary=...`
## Building
Install the requirements and copy libraries into the `src/dist` directory by running `npm install`.
See [gulpfile.js](gulpfile.js) for more information on `postinstall`.
```shell
npm install
```
To load unpacked or temporary addon from the [src](src) folder, you must generate the `src/manifest.json` for the desired browser.
```shell
npm run manifest:chrome
npm run manifest:firefox
```
If you would like to create a `.zip` archive of the [src](src) directory for the desired browser.
```shell
npm run build
npm run build:chrome
npm run build:firefox
```
For more information on building, see the scripts in the [package.json](package.json) file.
## Chrome Setup
1. Build or Download a [Release](https://github.com/cssnr/link-extractor/releases).
1. Unzip the archive, place the folder where it must remain and note its location for later.
1. Open Chrome, click the `3 dots` in the top right, click `Extensions`, click `Manage Extensions`.
1. In the top right, click `Developer Mode` then on the top left click `Load unpacked`.
1. Navigate to the folder you extracted in step #3 then click `Select Folder`.
## Firefox Setup
Note: Firefox Temporary addon's will **not** remain after restarting Firefox, therefore;
it is very useful to keep addon storage after uninstall/restart with `keepStorageOnUninstall`.
1. Build or Download a [Release](https://github.com/cssnr/link-extractor/releases).
1. Unzip the archive, place the folder where it must remain and note its location for later.
1. Go to `about:debugging#/runtime/this-firefox` and click `Load Temporary Add-on...`
1. Navigate to the folder you extracted earlier, select `manifest.json` then click `Select File`.
1. Open `about:config` search for `extensions.webextensions.keepStorageOnUninstall` and set to `true`.
If you need to test a restart, you must pack the addon. This only works in ESR, Development, or Nightly.
1. Run `npm run build:firefox` then use `web-ext-artifacts/{name}-firefox-{version}.zip`.
1. Open `about:config` search for `xpinstall.signatures.required` and set to `false`.
1. Open `about:addons` and drag the zip file to the page or choose Install from File from the Settings wheel.