Edge/Chrome Browser Extension to Auto Add Recipe

[KevinKTM]

First Check

• I used the GitHub search to find a similar requests and didn't find it.
• Checked the tasks tagged issues and verified my feature is not covered

Please provide a concise description of the problem that would be addressed by this feature.

The process of creating a recipe involves copying the url then opening up mealie, logging in and clicking the add button. This process could be expedited with a browser addition.

Please provide a concise description of the feature that would resolve your issue.

The browser integration would take the URL of the current recipe you are viewing, open up a mealie instance and create the recipe. The extension would need a config page to setup the path to your mealie instance, username and password to allow automated login. Would probably be nice to have options to just add the recipe without any interaction and then also have an interactive mode that allows the user to check the recipe is scraped properly. I usually specify stay in edit mode and all recipe imports so that I can setup categories and tags. This would significantly expedite the recipe creation process.

Please consider and list out some caveats or tradeoffs made in your design decision

none

Additional Information

• If this is accepted I'm willing to submit a PR to provide this feature
• If this is accepted I'm willing to help maintain this feature
• I'm willing to sponsor/pay a developer to do this work

[Kuchenpirat]

You are able to add an bookmarklet which is close to what you are asking.
See: https://docs.mealie.io/documentation/community-guide/import-recipe-bookmarklet/

But an integration via a browser extention would be also pretty nice 👍

[burgerga]

I was about to suggest this feature. It has one additional benefit: you can use the html that is loaded in your browser to create the recipe. Why is this useful? Some websites have scraping protection (e.g. TLS fingerprinting, as used by ah.nl, see #2888), and then "Import from URL" doesn't work. Using a browser extension you could then use the raw HTML/JSON to create the recipe anyway, avoiding the not-so-user-friendly steps I wrote down in #2888 (comment).

As an added bonus, the Mealie extension could then easily provide the same functionality as https://chromewebstore.google.com/detail/recipe-filter/ahlcdjbkdaegmljnnncfnhiioiadakae?hl=en (skipping the blabla, and displaying the recipe straight away).

(this is the same problem that all the bookmark managers (e.g., linkwarden, readeck, hoarder) face; articles behind a paywall can't be saved. Only readeck has solved it with a Readeck browser extension, which is how I got inspired about a Mealie extension :) )

[pathia]

Meanwhile we could also think of a tampermonkey script which grabs the schema.org recipe code and copies it to the clipboard.

[pathia]

I'm not that experienced with tampermonkey (greasemonkey) but I've made this as a proof of concept:

// ==UserScript==
// @name         AH Allerhande recept JSON
// @namespace    http://tampermonkey.net/
// @version      2025-02-04
// @description  copy the raw recipe to your clipboard
// @author       pathia
// @match        https://www.ah.nl/allerhande/recept/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=ah.nl
// @grant        window.onurlchange
// @grant        GM.setClipboard
// ==/UserScript==

(function() {
    'use strict';
    const h1 = document.querySelector('h1')

    var copyButton = document.createElement('button');
    copyButton.textContent = 'COPY JSON';
    copyButton.addEventListener('click', function(e) {
        e.preventDefault();
        const jsoncode = document.querySelectorAll('script[type="application/ld+json"]')[3];
         GM.setClipboard(jsoncode.textContent)
        h1.textContent = 'json copied !\n' + h1.textContent
    });

    h1.appendChild(copyButton);

    })();

[smarthomejunkie]

I'm not that experienced with tampermonkey (greasemonkey) but I've made this as a proof of concept:

// ==UserScript==
// @name         AH Allerhande recept JSON
// @namespace    http://tampermonkey.net/
// @version      2025-02-04
// @description  copy the raw recipe to your clipboard
// @author       pathia
// @match        https://www.ah.nl/allerhande/recept/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=ah.nl
// @grant        window.onurlchange
// @grant        GM.setClipboard
// ==/UserScript==

(function() {
    'use strict';
    const h1 = document.querySelector('h1')

    var copyButton = document.createElement('button');
    copyButton.textContent = 'COPY JSON';
    copyButton.addEventListener('click', function(e) {
        e.preventDefault();
        const jsoncode = document.querySelectorAll('script[type="application/ld+json"]')[3];
         GM.setClipboard(jsoncode.textContent)
        h1.textContent = 'json copied !\n' + h1.textContent
    });

    h1.appendChild(copyButton);

    })();

This works fine for me.

[burgerga]

Awesome!

Made some small improvements (also not so familiar with tampermonkey, so I used chatGPT :P):

• Not hardcode the Recipe script index
• Remove the "stap 1,2,3" names from the instructions, otherwise you get those as separate steps in Mealie

(function() {
    'use strict';
    const h1 = document.querySelector('h1');

    const copyButton = document.createElement('button');
    copyButton.textContent = 'COPY JSON';
    copyButton.addEventListener('click', function(e) {
        e.preventDefault();

        const scripts = document.querySelectorAll('script[type="application/ld+json"]');
        let recipe = null;

        for (const script of scripts) {
            try {
                const data = JSON.parse(script.textContent);
                if (data['@context'] === 'https://schema.org' && data['@type'] === 'Recipe') {
                    recipe = data;
                    break;
                }
            } catch (err) {
                continue;
            }
        }

        if (!recipe) {
            h1.textContent = 'No Recipe JSON found\n' + h1.textContent;
            return;
        }

        // delete step names to prevent useless extra steps in Mealie
        if (Array.isArray(recipe.recipeInstructions)) {
            recipe.recipeInstructions.forEach(step => {
                if (step.name && step.name.toLowerCase().startsWith('stap')) {
                    delete step.name;
                }
            });
        }

        const result = JSON.stringify(recipe, null, 2); //prettify result
        GM.setClipboard(result);

        h1.textContent = 'Cleaned Recipe JSON copied!\n' + h1.textContent;
    });

    h1.appendChild(copyButton);
})();