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 refer
to clone this projectyarn install
to install dependencies.yarn run dev:chrome
to start the development server for chrome extensionyarn run dev:firefox
to start the development server for firefox addonyarn run dev:opera
to start the development server for opera extensionyarn run build:chrome
to build chrome extensionyarn run build:firefox
to build firefox addonyarn run build:opera
to build opera extensionyarn run build
builds and packs extensions all at once to extension/ directory
-
yarn install
to 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 Mode
button 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:debugging
as temporary Add-on. - Choose the
manifest.json
file in the extracted directory
- Load the Add-on via
-
- Load the extension via
opera:extensions
- Check the
Developer Mode
and load as unpacked from extension’s extracted directory.
- Load the extension via
yarn run build
builds the extension for all the browsers toextension/BROWSER
directory 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 ✔ |