Chrome Extension : MediaElementAudioSource outputs zeroes due to CORS access restrictions

I am using Rythm.js library to play sound but I cannot load mp3 file in chrome extension due to CORS access restriction.


var rythm = new Rythm();
var fullURL =chrome.extension.getURL ("assets/rythmC.mp3");


"web_accessible_resources": [

X-Frame-Options for Chrome Extension

I want to wrap a web app into a chrome extension.

I have a manifest.json

  "name": "MyExtension",
  "description": "Override the new tab page with my website",
  "version": "0.9",
  "incognito": "split",
  "chrome_url_overrides": {
    "newtab": "index.html"
  "manifest_version": 2

And an index.html with an iframe

Currently I set Access-Control in the server.js (nodejs) of my web app like this:

var allowedOrigins = [''];
var origin = req.headers.origin;
if (allowedOrigins.indexOf(origin) > -1) {
    res.setHeader('Access-Control-Allow-Origin', origin);

So obviously I run into CORS / origin issues with that.

Question: is there a way to allow specifically my (this one) chrome extensions as an origin (for all users)? Without opening up the webapp cross origin completely?

Uploading data from LocalStorage to a Web Application

I have a web application that requires an offline option.

I have built an offline form in an HTML page that lives on local machines and writes to localStorage.

The offline app uses an eventListener to determine when there is an internet connection and then sends the data in localStorage to the web application over JSON (xmlHttpRequest).

The problem is that the request is cross-domain, so it returns “No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not allowed access.”

I’ve investigated using CORS and it seems like it would work for this as long as I set the Access-Control-Allow-Origin parameter to “*”.

Are there any other options for uploading localStorage data to a web server from a personal computer?

Looking forward to hearing suggestions. Please don’t hesitate to request further details if necessary.

Thanks, Noah

Using WebAssembly inside chrome sandbox

I have a chrome extension that includes a complicated function comp_func(data) which takes a lot of CPU by performing many bitwise operations. Because of that, I’m trying to use WebAssembly.
After many tries I came to a conclusion that due to permissions issues I need to use this function inside a sandbox.

Right now I’m trying to follow this WebAssembly tutorial and this Sandbox example as an “hello world” example for my problem.

The WebAssembly files includes: index.js and index.wasm,
The sandbox files is: sandbox.html,
page.js is the code of the extension that need to perform comp_func(data) and is using postMessage as a way to communicate to sandbox.html.
background.html is the background file of the extension.

This is what I have so far:


   "sandbox": {
     "pages": ["sandbox.html"]




So, right now the extension is calling sandbox.html who in turn loading index.js, but then I get the error:

Failed to load
chrome-extension://index.wasm: No
‘Access-Control-Allow-Origin’ header is present on the requested
resource. Origin ‘null’ 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.

From what I understand, index.js is calling index.wasm and because I’m inside a sandbox there is a problem with CORS permissions.
Is someone know what is the solution in this case?

Set cookies from different hostnames does not work with fetch

For the context i am developing an app using Server side rendering and i need to access my cookies on server side to make authenticated api calls.

I’m trying to make api calls to another domain using fetch api with cross-fetch configured to handle cors.

Here are the issues:

First on chrome in network panel i only have the options request displayed but i still retrieve the data in my code so technically it’s working but i can’t see it in chrome why? (Usually with cors i can see the second request so i may have missed something)

Second considering i am on localhost and i make a request to my cookies are set on localhost by when i refresh i don’t have them anymore why?

Here is the code i am using to configure fetch request:

And here are the headers i have in my response: enter image description here


chrome devtools extension: CORS issues on windows

I’m building a chrome extension, where I add a panel in the devtools, from where I need to perform some ajax calls.

From what I read, I have to add my domain in the manifest.json permissions:

  "permissions": [""]

And from within my devtools panel, I’m now able to perform api calls to the server.

Except that on chrome-windows, nothing works.

From what I could observe:

  • osX, linux: as long as the domain is authorized, everything works fine
  • windows: a pre-flight request is sent although the domain should be authorized. It then fails, and everything is blocked

Is there something I’m doing wrong here ?


Loading tab favicons in the DOM of an angular chrome extension is successful but explicit XHR requests fail

I have been working on a chrome extension using Angular 5.

I am able to successfully read favIconUrls from the tabs API, and bind them to the DOM of my popup.html. These icons are downloaded and displayed without issue. An example request is below.

Request URL:
Request Method:GET
Status Code:200 
Remote Address:
Referrer Policy:no-referrer-when-downgrade

Response Headers
cache-control:public, max-age=14400
date:Mon, 08 Jan 2018 16:43:03 GMT
expires:Mon, 08 Jan 2018 20:43:03 GMT
last-modified:Fri, 22 Dec 2017 22:51:08 GMT
via:1.1 vegur

Request Headers
accept-encoding:gzip, deflate, br
user-agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.84 Safari/537.36

This request is being made by angular’s platform-browser module.

I want to base64 encode each favicon image and so have been using the fileReader API to read the favIconUrl and convert it into a base64 encoded dataUrl. This works for some resources and not others (depending on CORS).

An example failed request looks as follows.

Request URL:
Referrer Policy:no-referrer-when-downgrade
Request Headers
Provisional headers are shown
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.84 Safari/537.36
Query String Parameters
view source
view URL encoded

I understand that this request is being blocked as CORS is preventing the origin (my chrome extension) from retrieving the resource. What I’m struggling to understand is how is the same extension, through angulars platform browser module, able to successfully load the resource inside its DOM? Surely this is also in breach of CORS? The request does not show an origin is being set by platform-browser.

Any help in understanding what is going on would be very much appreciated.

Unable to bypass CORS in any browser Dec 2017

we are developing web app using React.js consuming java rest API.
we have not enabled the CORS on the server side due to some internal issues.
Now we want to bypass the CORS for testing purpose in our local. Previously I used to do the same using chrome/firefox extensions, but now all of them becomes absolute.


Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/ValueStat/secure/login. (Reason: CORS preflight channel did not succeed).

Is there any other option to test ???

Accessing content-location header of requested resource in Chrome extension

In my Chrome extension, I back up a web page to the Internet Archive. I’d like to know the URL where that backup is now accessible. If I were to do this outside the browser, I’d be able to check the content-location header, which isn’t CORS safe-listed.

Is there any permission I can list in the manifest.json that will allow me to figure out the ultimate url? Or is that that?

Currently, my permissions are set to:

    "permissions": [

I have been performing the request using the Fetch API.

How to Load other extension’s new tab page as iFrame in my extension’s new tab page

content scripts can’t be injected into extension pages with
chrome-extension:// scheme.

just load the page in a iFrame, I don’t want/need to load in it a content script, so the user can have the best of both worlds or have their cake and eat it too, my tabs manager extension and their favorite default new tab extension from the chrome store.

my experiment

I opened dev tools from the options page of a other extension,


appended this HTML snippet, adds a iframe to dom

the iFrame loads but it’s blank white page with invisible html elements (assets wasn’t loaded, styles not applied and JS not executed)

error messages in console

Denying load of chrome-extension://hddnkoipeenegfoeaoibdmnablmgkpip/newtab.html. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-AmiIBiDMlUtAs2tJB7jErMe/d3rBPYNUQQIZZdI0/mw='), or a nonce ('nonce-...') is required to enable inline execution.

multiple ~identical to the second error message followed it

there has to be a secure[0] way to display a page from one extension in a page in other extension, this is a appropriate, valid use,
whilst you can reject toolbar extensions (remember pre-chrome Internet Explorer toolbars?).

[0] that means one relative frame/window can’t access the dom of a other relative frame of a extension page or manipulate it (execute JS in it).
(relative = child/parent/sibling)
chrome already does that with the native default pdf plugin iframe.