/bias-goggles-web-extension

A browser plugin for the Bias Goggles system.

Primary LanguageTypeScript

Bias Goggles - Browser Extension License: ISC version: 0.9.0 platforms: firefox|chromium

from the bias goggle homepage

Bias Goggles is a rapidly evolving prototype system that enables users to explore the bias characteristics of web domains for a specific user-defined concept.

This project implements a browser plugin for firefox and chromium which enables users to interact with the Bias Goggles system.

Quick Install Extension ⚡


Getting Started


Prerequisites

  • A Unix-like operating system. On Windows WSL is preferred, but nodejs under powershell/cygwin should work too.
  • Node.js with npm to manage the dependencies
  • Any IDE that supports typescript.VS Code is highly recommended.

Install dependencies

Run:

npm install

in order to download all dependecies needed to develop and build the extension.

Development size: ~9.5MB


Run:

npm run dev

A newly created folder named dist should be present under project's root. The dist folder contains two subfolders named chromium and firefox where the created extensions are stored respectively. Use the files under these folders to load the extension in your browser during development. Unit tests are also bundled with this version and are located under dist/firefox/tests and dist/chromium/tests .

Load the extension on Firefox firefox-logo

Navigate to about:debugging . Then click This firefox , then Load temporary plugin and load the contents of the dist/firefox folder. Keep in mind that you have to repeat this process everytime you reopen the browser.

load-to-firefox-step-by-step-gif

Load the extension on Chromium/Chrome chromium-logo

Navigate to chrome://extensions . Then click Developer Mode , then Load upacked and load the contents of the dist/chromium folder.

load-to-chrome-step-by-step-gif

Production size: ~1.9 MB


Run:

npm run build

to build the minified production ready version of the extension. This version doesn't contain any unit tests and is found under dist , just like the development one.

Create .xpi for Firefox firefox-logo

Follow these instructions in order to obtain API access credentials.

Then run the following replacing your-key and your-secret with the ones you have obtained:

WEB_EXT_API_KEY="your-key"
WEB_EXT_API_SECRET="your-secret"
cd dist/firefox
npx web-ext sign --api-key=$WEB_EXT_API_KEY --api-secret=$WEB_EXT_API_SECRET

The .xpi file should now be located under the newly created folder web-ext-artifacts in the current working directory and is also uploaded to your personal Firefox Developer Account, where you can proceed with publishing it. This file can be installed manually just like any other extension not in the Firefox Addons store.

Create .crx for chromium chromium-logo

To create .crx file follow these instructions. The files needed are located under dist/chromium. To publish the extension to Chrome Web Store follow these.