Clip recipes from any site: the FoodGenie browser extension

What it does

The extension adds one button to your browser. What it does depends on the page you’re looking at:

• 01

  On a recipe page: clip it

  It sends the recipe into the same review wizard the FoodGenie website uses, so you can check everything before it saves.
• 02

  On any other page: add ingredients to your list

  It looks for ingredients on the page and adds them straight to your FoodGenie shopping list.

Chrome

Install it yourself today

1. 01

   Download the extension folder

   Get the Chrome build folder from FoodGenie (ask us if you need it).
2. 02

   Open chrome://extensions

   Type that into your address bar and press Enter.
3. 03

   Turn on Developer mode

   It’s a switch in the top-right corner of that page.
4. 04

   Select "Load unpacked"

   Choose the folder you downloaded in step 1.
5. 05

   Pin the icon

   Click the puzzle-piece icon in your toolbar, then the pin next to FoodGenie, so it’s always visible.

Edge

Install it yourself today

Edge uses the same extension format as Chrome, so the steps are almost identical:

1. 01

   Download the extension folder

   It’s the same folder as the Chrome build — Edge and Chrome use the same one.
2. 02

   Open edge://extensions

   Type that into your address bar and press Enter.
3. 03

   Turn on Developer mode

   It’s a switch on that page.
4. 04

   Select "Load unpacked"

   Choose the folder you downloaded in step 1.

Safari (Mac and iPhone)

Install it yourself today

If you do have Xcode and want to build it yourself: build the Safari version, open the Xcode project it creates, sign it with your own Apple developer account, then run it — on a Mac, that turns on an extension you switch on under Safari → Settings → Extensions; on an iPhone, you run it onto the phone and turn it on under Settings → Safari → Extensions. This is a developer workflow, not a normal install — most people should wait for the App Store release.

Firefox

Install it yourself today

1. 01

   Download the extension folder

   Get the Firefox build folder from FoodGenie (ask us if you need it).
2. 02

   Open about:debugging#/runtime/this-firefox

   Type that into your address bar and press Enter.
3. 03

   Select "Load Temporary Add-on…"

   Choose the "manifest.json" file inside the folder you downloaded.

Connect your key

However you installed it, every browser needs its own key before the button will work. A key is like a password just for the extension — it tells FoodGenie which account you’re clipping into.

1. 01

   Go to Settings → Integrations → Browser extension

   This is on the FoodGenie website, while signed in.
2. 02

   Name your key and select "Make a key"

   A name like "Chrome on my laptop" helps you tell keys apart later — you can have more than one.
3. 03

   Copy it right away

   FoodGenie shows the key exactly once. If you close that box before copying it, you’ll have to make a new one.
4. 04

   Paste it into the extension

   Open the extension’s popup, select the gear icon, paste the key, and select "Save the key."

You can turn off a key at any time from the same Settings page — it stops working immediately, everywhere.

Troubleshooting

• 01

  "This key was turned off"

  The key you pasted in was revoked or never existed. Go make a new key (Settings → Integrations → Browser extension) and paste that one in instead. Also double check the extension is pointed at www.foodgenie.us, not some other address.
• 02

  The review wizard asks me to sign in — is that normal?

  Yes. That’s just your regular FoodGenie sign-in, the same one you use on the website. Nothing is wrong with the extension.
• 03

  It says nothing was found on this page

  Some websites hide their recipe information in a way the extension can’t read. That’s a limit of the site, not always a bug in the extension — try copying the recipe text and pasting it into the Recipe Clipper on the FoodGenie website instead.