Petal Cite Browser Extension

January 4, 2023 · View on GitHub

Building

  1. git clone --recursive https://github.com/ks-collab/cite-extension.git
  2. cd cite-extension
  3. yarn install
  4. yarn build

The build are built in build/.

Running from the build directory

Chrome

  1. Go to chrome://extensions/
  2. Enable "Developer Mode".
  3. Click "Load unpacked extension…" and select the build directory.

Firefox

  1. Go to about:debugging
  2. Click "Load Temporary Add-on" and select the build/manifest.json file.

Safari

  1. Make sure you have Safari 14 and Xcode 12 installed
  2. In the terminal, convert the extension to be Safari compatibale xcrun safari-web-extension-converter <your build folder>
  3. Click Run to launch the extension
  4. Safari will be opened
    1. Safari -> preferences -> enable development menu
    2. Safari -> develop menu -> click allow unsigned extension (need to do this every time safari is restarted)
    3. Safari -> preferences -> extensions tab -> click the extension
    4. open an website on Safari, click the icon near the address bar, and allow the access

Automatic rebuilding/reloading

Chrome on MacOS

  1. brew install chrome-cli
  2. npm install -g gulp
  3. cd to project root
  4. yarn install
  5. yarn build
  6. gulp watch-chrome

As files are changed, the extension will be rebuilt automatically and Chrome will reload the extension.

Firefox

  1. Get and install the Mozilla web-ext tool
  2. cd to project root
  3. yarn install
  4. yarn build
  5. gulp watch
  6. ./scripts/run_xpi (in a different terminal window)

As files are changed, the extension will be rebuilt automatically and Firefox will reload the extension.

Others

  1. cd to project root
  2. npm install
  3. yarn build
  4. gulp watch

As files are changed, the extension will be rebuilt automatically. You will need to manually reload the extension in the browser being developed for.

Developing

Technologies

Chrome/Firefox Browser Extension Framework

The functionality exposed on Chrome and Firefox is provided by the Chrome extension framework, which has also been adopted by Firefox. See Chrome Extension docs and Firefox Extension docs for more information.

Safari extension converter

Safari version was converted from Chrome/Firefox version by using safari-web-extension-converter provided by Apple. See Converting a web extension for Safari for more details.

Contact

If you have any questions about this extension you can email us at help@petal.org.