CORS fetch inside Firefox WebExtension gives TypeError

Viewed 670

I'm attemping to fetch an external resource inside a firefox web extension

for (var show of shows) {
  let title = show.getElementsByClassName("video-preload-title-label")[0]
    .innerText;

  let search_url = `https://www.rottentomatoes.com/search/?search=${encodeURI(
    title
  )}`;

  fetch(search_url, { mode: "cors", method: "get" })
    .then(response => {
      if (!response.ok) {
        throw Error(response.statusText);
      }
      console.log(response);
    })
    .catch(err => {
      console.log(err);
    });
}

But I'm getting the following error:

TypeError: NetworkError when attempting to fetch resource.
Stack trace:
@moz-extension://e009585c-e0b0-4898-82bd-5049f92b82d9/main.js:17:3
main.js:25:7

I've added the relevant permissions to my manifest.json file:

{
    "manifest_version": 2,
    "name": "rotten-netflix",
    "version": "1.0",

    "description": "Adds rotton tomato score to netflix shows",

    "icons": {
        "48": "icons/border-48.png"
    },

    "content_scripts": [
        {
            "matches": ["*://*.netflix.com/*"],
            "js": ["main.js"]
        }
    ],
    "permissions": [
        "*://rottentomatoes.com/search*",
        "webRequest"
    ]
}

All the search_urls follow the same pattern, i.e:

https://www.rottentomatoes.com/search/?search=Toast%20of%20London

So I've added the "*://rottentomatoes.com/search*" Match Pattern to my manifest file. But this doesn't seem to have made a difference.

I'm stumped as I'm unsure whether this is a permissions error: i.e. I don't have the required permissions to make requests inside my extension. Or whether the fetch code itself is incorrect.

1 Answers

I think it can not be done. I am not 100% sure how this works inside the Firefox web extensions, but I consider it should stick to the "The Same Origin Policy disallows reading the resource". Since you can not influence rottentomatoes to add a Access-Control-Allow-Origin * header, the only solution I see is to create some sort of middleman proxy script intermediate your request.

Related