Conflicts with injected ember.js in contentscript's chrome extension

Question

I'm creating a chrome extension and I want to use ember.js inside. I just create a very basic one which is working fine with most of websites but not with websites like gmail or feedly. With those websites, I get errors like :

Assertion failed: The route my was not found ember-1.0.0-rc.7.js:364 (anonymous function) ember-1.0.0-rc.7.js:364 Ember.assert ember-1.0.0-rc.7.js:52 Ember.Router.Ember.Object.extend._doTransition ember-1.0.0-rc.7.js:26488 Ember.Router.Ember.Object.extend.handleURL ember-1.0.0-rc.7.js:26331 Ember.Router.Ember.Object.extend.startRouting ember-1.0.0-rc.7.js:26312 Ember.Application.Ember.Namespace.extend.startRouting ember-1.0.0-rc.7.js:30234 Ember.Application.Ember.Namespace.extend.didBecomeReady ember-1.0.0-rc.7.js:30192 DeferredActionQueues.flush ember-1.0.0-rc.7.js:4746 Backburner.end ember-1.0.0-rc.7.js:4830 Backburner.run ember-1.0.0-rc.7.js:4869 Ember.run ember-1.0.0-rc.7.js:5200 (anonymous function) ember-1.0.0-rc.7.js:29937 jQuery.Callbacks.fire jquery-1.9.1.js:1037 jQuery.Callbacks.self.fireWith jquery-1.9.1.js:1148 jQuery.extend.ready jquery-1.9.1.js:433 completed

Have you an idea how to solve that? Content script run isolated (https://developer.chrome.com/extensions/content_scripts.html#execution-environment); it looks to be the routing routine of ember.js which catch all events but I'm not skilled enough to understand what happend.

my manifest.json :

{
  "name": "Ember module test",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension that I made ;)",
   "permissions": [ "tabs", "cookies", "\u003Call_urls\u003E", "https://accounts.google.com/o/oauth2/token", "pageCapture" ],
   "content_scripts": [ {
      "js": [ "jquery-1.9.1.js", "handlebars-1.0.0.js", "ember-1.0.0-rc.7.js", "contentScript.js" ],
      "matches": [ "http://*/*", "https://*/*" ],
      "run_at": "document_end"
   } ]

}

My contentScript.js:

var wrapperHTML = '                      <script type=\"text/x-handlebars\">    <h2>Title</h2>    {{outlet}}  </script>  <script type=\"text/x-handlebars\" data-template-name=\"index\">    {{#each item in model}}      <li>{{item}}</li>    {{/each}}    </ul>  </script>';

function initWrapperHTML() {
        var newNode = document.createElement("div");
        document.body.appendChild(newNode);
        newNode.innerHTML += wrapperHTML;
}
initWrapperHTML();

AppEmber = Ember.Application.create();

AppEmber.Router.map(function() {
  // put your routes here
});

AppEmber.IndexRoute = Ember.Route.extend({
  model: function() {
    return ['red', 'yellow', 'blue', 'emberorange'];
  }
});

To reproduce my problem, create a folder with the 2 files bellow and add ember-1.0.0-rc.7.js, handlebars-1.0.0.js and jquery-1.9.1.js in it and in chrome://extensions add the folder with "Load unpack extension..."

Thank you

Answer 1

Although the Javascript execution environment of a content script is isolated from that of the webpage, they share the same document. In particular they share the current URL.

By default, ember.js uses the hash part of the URL to establish which application route it should follow.

From the error message you posted it seems you were visiting this URL: http://cloud.feedly.com/#my, that's why you got the error 'The route my was not found'.

Depending on you application, you may try disabling the interaction between the router and the URL, as described here: Specifying the URL Type.

App.Router.reopen({
  location: 'none'
});