Preview what users will see if this webpage is shared on Facebook. Uses the webpage's OG tags. All work is done locally, not on another server.
- Enter
about:debugging
in the address bar. - Choose
This Firefox
>Temporary Extensions
>Load Temporary Add-on
- Select the
manifest.json
- Use the buttons on
about:debugging
to launch devtools or reload the extension with new source code (or use the button in the devtools to do so). The extension will remain loaded until you restart Firefox.
- Enter
chrome:https://extensions
in the address bar. - Toggle on Developer mode in the upper-right if it's off.
- Choose
Load unpacked
- Choose the
extension
folder. - Use the buttons on
chrome:https://extensions
to reload the extension and see errors. The extension will remain loaded until you remove it.- Note: Chrome will complain about the
browser_specific_settings
manifest key, but you can safely ignore that warning.
- Note: Chrome will complain about the
- Zip up the extension:
npm run build
- This will create
web-ext-artifacts/*.zip
with a ZIP file for the extension with any potentially harmful files removed.
- This will create
- Sign the extension
- Manually:
- Visit the Add-on Developer Hub
- If you're submitting for the first time, click "Submit a New Add-on" and follow the prompts. You'll likely want to choose distributing "On your own"; you can always change this for later versions.
- If you're submitting an update,
- Click on the extension to update.
- Go to "Manage Status and Versions"
- Click "Upload a New Version" and follow the prompts.
- Via CLI:
- Visit the Add-on Developer Hub Key Manager to get API Keys
- Make a copy of
.env.template
and fill in the keys. npm run sign:firefox
. This is equivalent to choosing the distributing "On your own" option in the UI.- This may take a while, especially if a manual review is triggered. When this is complete, your signed XPI will be downloaded to your system or will be available to download from the Add-on Developer Hub
- Manually:
- Install the
.xpi
by opening it with Firefox
- Manually
- Visit
chrome:https://extensions
- Turn on Developer mode in the upper-right if it's off
- Choose
Pack extension
- Pick the
extension
folder, and if you're updating the extension, select the private key file. Leave the key file blank if you're creating a new extension. - You'll receive a signed
.crx
file to distribute. Save the private key.
- Visit
- Via CLI:
- Make a copy of
.env.template
and enter the path to your Chrome browser and the path to your private key if you have one. npm run sign:chrome
. This is equivalent to doing it via the UI.- You'll receive a signed
.crx
file to distribute. Save the private key.
- Make a copy of
- Install the
.crx
(in some Chromium browsers, but not Google Chrome and potentially not Edge)- Open
chrome:https://extensions
- Turn on Developer mode
- Drag and drop the
.crx
onto the page
- Open
- Install the
.crx
in Google Chrome (and Edge if the above doesn't work)- NOTE: Google Chrome doesn't allow installing off-store extensions anymore. These steps are the same as loading the extension from source above.
- Unzip the extension like any other ZIP file into its own directory.
- Open
chrome:https://extensions
- Turn on Developer mode
- Choose
Load unpacked
- Select the folder you extracted the extension into
Follow the same steps as signing, but choose that you wish to list it on the store instead of sharing on your own. You'll need to use the Web UI for this.
- Build the ZIP file using
npm run build
. - Visit the Chrome Developer Dashboard
- If you don't already have an account set up...
- Agree to the terms and pay the one-time fee if applicable.
- In the "Account" submenu, fill out your profile.
- Verify your email address
- Click the
Add new item
button. - Choose the ZIP file and
Upload
. - Fill out the listing.
- Click
Submit for Review
and follow the prompts.