[Chrome Extension Development] Failed to execute 'observe' on 'MutationObserver'

[jwmann]

Hi there,

I'm attempting to create a Chrome Extension using this library in order to control the volume of Google Play.

I'm building it using yeoman and its chrome-extension generator as a scaffolding for my chrome extension.
I've installed the google-music library using the bower method.

I'm able to include the google-music library successfully however issuing a window.googleMusic = new window.GoogleMusic(window); results in the follow error:

Uncaught NotFoundError: Failed to execute 'observe' on 'MutationObserver': The provided node was null.
proto.hooks.init @ google-music.js:432
bindFn @ google-music.js:58
GoogleMusic @ google-music.js:93
(anonymous function) @ chrome-extension://pnlliefhkcolmjfdanpbdmkadhhidkda/scripts/contentscript.js:2

And points to this function on line 432:

addObserver.observe(this.doc.getElementById(SELECTORS.info.containerId), {
  childList: true,
  subtree: true
});

Not sure if this is just a limitation of the chrome extension api or if there's something I'm doing wrong.

Would appreciate some thoughts / help on the matter.

[twolfson]

I am not too familiar with Chrome extensions but does it use the page's window as its window or is that a different variable (e.g. to access an iframe's window, I would do iframeEl.contentWindow).

[jwmann]

@twolfson I think you're right. After reading the docs again, I noticed this section:

Content scripts execute in a special environment called an isolated world. They have access to the DOM of the page they are injected into, but not to any JavaScript variables or functions created by the page. It looks to each content script as if there is no other JavaScript executing on the page it is running on. The same is true in reverse: JavaScript running on the page cannot call any functions or access any variables defined by content scripts.

Further down it reads with more relevant information to my situation:

It's worth noting what happens with JavaScript objects that are shared by the page and the extension - for example, the window.onload event. Each isolated world sees its own version of the object. Assigning to the object affects your independent copy of the object. For example, both the page and extension can assign to window.onload, but neither one can read the other's event handler. The event handlers are called in the order in which they were assigned.

I think a combination of your example and some type of special event listener might allow me to grab the window. A potential issue I see is that I might just be grabbing a copy of the window object. I'd need to be able to reference to actual window object or the library command will might not have an effect.

[twolfson]

I don't think it's actually referring to a copy of the window. It's saying that it doesn't give you access the same set of DOM handles (e.g. element attributes/listeners) which should be fine. It does make me curious if edge case functions like toggleVisualization will still run. Please let me know if you bump into any issues.

[twolfson]

It's been 5 months since this issue was opened. It sounds like everything is working now. Closing issue.