Fetch Meta data of any website using only frontend for Chrome Extensions?

Question

As seen on this tutorial under the heading "Cross-Domain from Chrome Extensions", it states that

Chrome extensions can make cross-domain requests to any domain if the domain is included in the "permissions" section of the manifest.json

So I have included "permissions": ["<all_urls>"] in my manifest.json but it still doesn't work

I am using https://github.com/jacktuck/unfurl but it throws a weird error

Failed to load https://akshaykadam.me/: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. e TypeError: Failed to fetch

My basic code is like this -

import unfurl from "unfurl";

_fetchMeta = async () => {
    try {
        let result = await unfurl({
            uri: "https://akshaykadam.me",
            headers: {
                "Access-Control-Allow-Origin": "*"
            }
        });
        console.log("result", result);
    } catch (e) {
        console.error("e", e);
    }
};

The full code can be found at https://github.com/deadcoder0904/unfurl-chrome-extension-bug

I need to fetch Open Graph Tags or Meta Tags of any website using only frontend. And with the above code it doesn't work as a Chrome extension or as a React Frontend Website

Do I need to use it like a proxy as shown in https://stackoverflow.com/a/46774307/6141587 or https://stackoverflow.com/a/35911711/6141587?

Or can I do it from purely frontend without any proxy or a server?

Or do I have to use unfurl on the server & I can send my requests through it?

Edit:

This works with axios as shown here so its probably an unfurl issue. I'll update this post once I get reply on https://github.com/jacktuck/unfurl/issues/38

@wOxxOm 1) it also doesn't work without `"Access-Control-Allow-Origin": "*"` I tried it already. I'll try removing the Service Worker. Its created by default with `create-react-app` 2) I click on the PopUp & it opens the React App but when I right-click & open Inspect & check the console, it throws the big error in yellow color above "Failed to load" (the 2nd yellow color one) — deadcoder0904, Oct 19 '18 at 08:08
@wOxxOm I meant that only just communicated wrongly. ""I click on the PopUp & it opens the React App" - what do you mean?" I mean that when I click the Icon, it opens up the PopUp which throws the error when you right click & click on Inspect on the PopUp — deadcoder0904, Oct 19 '18 at 09:00

score 0 · Answer 1 · answered Oct 20 '18 at 11:55

I found the solution

The issue was that https://github.com/jacktuck/unfurl is using node-fetch so it can't work in browser as stated in node-fetchs LIMITS section

Topics such as Cross-Origin, Content Security Policy, Mixed Content, Service Workers are ignored, given our server-side context

If it changes to https://github.com/lquixada/cross-fetch then it will work with any environment & I can just use unfurl to get meta tags from any URL as Chrome extensions don't have to worry about Cross Origin Resource Sharing (CORS issue) as long as you mention "permissions": ["<all_urls>"] in manifest.json

Keep an eye on this issue https://github.com/jacktuck/unfurl/issues/38

As soon as it closes unfurl will work in any environment :)

Fetch Meta data of any website using only frontend for Chrome Extensions?

Edit:

1 Answers1