Conflicts with injected ember.js in contentscript's chrome extension
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> </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
Excellent article. Very interesting to read. I really love to read such a nice article. Thanks! keep rocking. AngularJS Online Training
ReplyDelete