I wanted to learn how to make an extension and I’ve always been annoyed by how food blogs bury the recipe within the page.
It’s open source: https://github.com/sean-public/RecipeFilter
I hope everyone finds it useful; I know I already learned a lot in getting it on the Google Web Store (which was easily more than half the effort)!
You are a hero and a saint! SEO has absolutely overridden the user experience for food blogs.
Wow, this is wild. I was just getting ready to release my own webextension later this week that does almost exactly the same thing. You definitely beat me to the punch :)
https://github.com/erik/onerecipe
There’s a definite need, so I was shocked to find nothing in the Web Store was solving the issue!
Yours is much more complex and walks the DOM to collect data and completely reformats the recipe contents. Mine is [on purpose] much simpler and just clones the recipe into a modal so that its appearance is still in line with the site itself and I let some styling leak onto the elements I add as well so it feels at home on the page.
I think with yours it would be easier to go the extra mile and start linking to places to purchase ingredients, do nutritional breakdowns, etc.
This is such a crucial plugin. I absolutely hate reading through all the cruft just to get the recipe. Its a shame I don’t use Chrome as my daily driver but I do appreciate you for making this.
What browser are you using most often to look at recipes? I was thinking about porting to FF if there’s traction on this one.
edit: ok fellas, you talked me into it, I’ll work on a FF plugin this weekend
I’ll add a second request for FF support, it’s easier than ever these days as they both use web extensions: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension
Yep, I’m a Firefox user. I think there’s enough of us now to make it worth your while. I would offer a helping hand but I have never made a browser extension so I don’t think I’d be much help.
I also use firefox and would be interested in this extension.
This is neat. Does it only work for certain sites?
It works on any site that uses microdata (i.e.
itemtype="https://schema.org/Recipe) or some of the more common recipe card patterns from WordPress, etc. There are some sites that put too much info or have unusual styling inside the recipe area so the modal comes out looking funny; that’s why I included a button to disable it for a given domain.