One of the coolest features in Sharp Cooking is its ability to import recipes from a website. See a recipe you like? Just paste the URL into Sharp Cooking, and voilà! The recipe is imported and ready to use.
But have you ever wondered what happens behind the scenes? And why sometimes it doesn’t work as expected? Unfortunately, the process isn’t always straightforward.
The CORS Problem
When I transitioned Sharp Cooking into a Progressive Web App (PWA)—blame Apple for that—a CORS (Cross-Origin Resource Sharing) issue emerged. Browsers, whether PWAs or not, block cross-origin requests by default. This security feature prevents malicious scripts from accessing data from other websites, but it also stops Sharp Cooking from fetching recipes directly.
In my post Rewriting Sharp Cooking – The Unplanned API, I explain this problem in detail. The short version? I built an API that retrieves recipe data and returns it to the app.
While this solution works for many websites, it doesn’t work for all of them. Some websites, like Tudo Gostoso, block requests that look like they’re coming from bots or scrapers—and unfortunately, that’s exactly how they perceive my API.
Exploring Different Solutions
This has been a long-standing challenge, and I’ve explored multiple solutions within the app’s design constraints.
Headless Browsers These work well because they run a full browser environment, but Sharp Cooking’s API is hosted on Azure Static Web Apps with an Azure Function behind it. The container image used doesn’t support some of the dependencies required for a headless browser. Switching to another Azure service could solve this, but it would also introduce additional costs.
Webviews Many mobile apps use a webview to load the recipe page and extract the data. Unfortunately, this approach isn’t possible for Sharp Cooking due to CORS restrictions.
A Chrome Extension – The Better Approach
While I can’t use a webview inside the app, I can create a Chrome extension that does the same job. This approach allows users to browse recipe websites normally in Chrome or Edge, and the extension will:
- Detect when a user is on a recipe page.
- Scrape the recipe data.
- Send the data to the API.
- Receive a share code from the API.
- Let the user paste or scan the share code in the app to import the recipe.
This solution requires a bit more work, but it doesn’t introduce additional costs—making it the best option.
What’s Next?
The Chrome extension is currently under review in the Chrome Web Store and should be available in the coming weeks.
Meanwhile, the latest app update is already available! This version introduces QR code scanning for importing recipes, making it easy to scan the code generated by the extension. Additionally, the app now generates a QR barcode when sharing a recipe, making it even easier to share recipes with others.
Here’s a sneak peek of the new features:
Stay tuned for the extension release, and let me know what you think!
Cheers,
Lucas