Cross browser web clipper. Takes video notes, screenshots and extract texts or images from supported web browsers.
Ensure you have
Then run the following:
git clone https://github.com/butterops/refer.git && cd referto clone this projectyarn installto install dependencies.yarn run dev:chrometo start the development server for chrome extensionyarn run dev:firefoxto start the development server for firefox addonyarn run dev:operato start the development server for opera extensionyarn run build:chrometo build chrome extensionyarn run build:firefoxto build firefox addonyarn run build:operato build opera extensionyarn run buildbuilds and packs extensions all at once to extension/ directory
-
yarn installto install dependencies. -
To watch file changes in developement
- Chrome
yarn run dev:chrome
- Firefox
yarn run dev:firefox
- Opera
yarn run dev:opera
- Chrome
-
Load extension in browser
-
- Go to the browser address bar and type
chrome://extensions - Check the
Developer Modebutton to enable it. - Click on the
Load Unpacked Extension…button. - Select your extension’s extracted directory.
- Go to the browser address bar and type
-
- Load the Add-on via
about:debuggingas temporary Add-on. - Choose the
manifest.jsonfile in the extracted directory
- Load the Add-on via
-
- Load the extension via
opera:extensions - Check the
Developer Modeand load as unpacked from extension’s extracted directory.
- Load the extension via
yarn run buildbuilds the extension for all the browsers toextension/BROWSERdirectory respectively.
Note: By default the manifest.json is set with version 0.0.0. The webpack loader will update the version in the build with that of the package.json version. In order to release a new version, update version in package.json and run script.
Update src/manifest.json file with browser vendor prefixed manifest keys
{
"__chrome__name": "SuperChrome",
"__firefox__name": "SuperFox",
"__edge__name": "SuperEdge",
"__opera__name": "SuperOpera"
}if the vendor is chrome this compiles to:
{
"name": "SuperChrome",
}Add keys to multiple vendors by seperating them with | in the prefix
{
__chrome|opera__name: "SuperBlink"
}
if the vendor is chrome or opera, this compiles to:
{
"name": "SuperBlink"
}
See the original README of wext-manifest-loader package for more details
Please file an issue here for bugs, missing documentation, or unexpected behavior.
- Shared Eslint & Prettier Configuration
MIT © ButterOps.Dev
https://github.com/abhijithvijayan/web-extension-starter
 |
 |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 49 & later ✔ | 52 & later ✔ | 36 & later ✔ | 79 & later ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent