Wishlephant Browser Extension

Browser extension for wishlephant.com. Click the toolbar button on any product or book page and it extracts the name, price, image and ISBN — then opens wishlephant.com with those details pre-filled.

• Install in Firefox
• Install in Chrome

Alternatively you can use this iOS shortcut or a bookmark:

javascript: void open(
  "https://wishlephant.com/add_entry?url=" + encodeURIComponent(location.href),
  "_blank",
);

Development

yarn install

yarn dev           # Chrome — opens a browser window with the extension loaded
yarn dev:firefox   # Firefox

Testing on Firefox for Android

1. Enable USB debugging on your Android device: Settings > About Phone > tap "Build number" 7 times, then Settings > Developer options > enable "USB debugging"

2. Enable remote debugging in Firefox for Android: Menu (⋮) > Settings > scroll to bottom > enable "Remote debugging via USB"

3. Connect your device via USB and verify it's detected:

   adb devices

4. Build and run on the device:

   yarn build:firefox
   npx web-ext run --target firefox-android --source-dir .output/firefox-mv2 --android-device=[DEVICE_ID]

   When prompted, select your device and the Firefox APK (org.mozilla.firefox for stable, org.mozilla.fenix for Nightly).

If ADB doesn't detect the device, try adb kill-server && adb start-server and reconnect the USB cable.

Tests

yarn test

Release

yarn build         # Chrome  → .output/chrome-mv3/
yarn build:firefox # Firefox → .output/firefox-mv2/

yarn zip           # Chrome zip for store submission
yarn zip:firefox   # Firefox zip for store submission

How it works

• entrypoints/background.ts — listens for the toolbar button click, asks the content script for page data, opens wishlephant.com with the result as URL parameters.
• entrypoints/content.ts — responds to the background's message by running parseDocument(document).
• src/extractor.ts — DOM-based metadata extractor: reads Open Graph tags, JSON-LD and microdata directly from the live document. Zero dependencies, no eval.
• src/parser.ts — string-based parser used only by the test suite.

Project structure

entrypoints/    WXT entrypoints (background + content script)
src/            Shared logic (extractor, parser)
tests/          Jest test suite
public/         Static assets (icons, locales) copied into the built extension
wxt.config.ts   Extension manifest configuration