My Firefox extension should modify the appearance and behavior of a specific website by replacing some of it’s files. To achieve this I tried to use the redirect feature of browser.webRequest.onBeforeRequest
. It works for script files which are loaded in a normal way via the main HTML file but when a script tries to load a HTML file via XHR ($http.get
by AngluarJS is used) I get the following error:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at
<path-to-file-to-replace>. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
Here are relevant lines of my manifest.json
:
"permissions": [
"webRequest",
"webRequestBlocking",
"<all_urls>"
],
"web_accessible_resources": [
"replacement_file.html",
],
"background": {
"scripts": ["background.js"]
}
Here is the relevant part of background.js
:
function replaceFiles(requestDetails)
{
if(requestDetails.url == <path-to-file-to-replace>)
return { redirectUrl: browser.extension.getURL("replacement_file.html") };
}
browser.webRequest.onBeforeRequest.addListener(
replaceFiles,
{urls: [<path-to-file-to-replace>]},
["blocking"]);
It seems that the replacement file is sent with incorrect headers, can anyone suggest a way to fix this? The same code seems to work under Google Chrome.
A few days ago I posted the same question on stackoverflow.com: https://stackoverflow.com/questions/47848331/webrequest-redirect-not-working-for-extension-files-cross-domain-error