1

I'm trying to write a new Chrome Extension and I was trying to use AngularJS on it.

So, I have this on my manifest.json:

{
  "manifest_version": 2,

  "content_scripts": [
    {
      "matches": ["*://*/*"],
      "js": ["content.js"]
    }
  ],

  "permissions": [
    "*://*/*",
    "tabs"
  ]
}

The content.js already have angular injected into it.

But when I open a page that already uses Angular, the page crashes, the page is unable to load the module configured by the original page... It's like including Angular into the extension makes Angular "resets" the modules (which should not happen since the docs say something about the isolated scope, and how extensions can't mess with the original page stuff)...

Any idea on how to fix this?

PS: I did a test where I make the content_script to be just the angular.js file (1.2.0rc3) and just by that any page that uses angular is broken as described before...

I created a gist to reproduce the issue: https://gist.github.com/wilkerlucio/7260370#file-manifest-json

To reproduce this behave, do this:

  1. clone this gist: https://gist.github.com/wilkerlucio/7260370
  2. add the cloned folder as an unpacked extension on chrome
  3. visit some page that uses angular, ex: http://docs.deployd.com/docs/collections/examples/a-simple-todo-app-with-angular.md
  4. check the console
Wilker Lucio
  • 2,619
  • 2
  • 20
  • 11
  • Just to be clear, the docs don't say extensions can't mess with the original page stuff. On the contrary: content scripts' job is usually to mess with the original page stuff. "JavaScript-wise" the content script lives in an isolated environment and can't mess with the JS of the webpage, **but** they share the DOM (and partly the `window` object). I suppose, since AngularJS binds itself to the DOM things will inevitably break with content scripts (but I am not at all experienced in NG, so I can't tell with certainty). – gkalpak Oct 30 '13 at 22:43
  • BTW, what do you need AngularJS in the content script for ? It might help if you posted `content.js` (provided it is reasonably short) - think **[SSCCE](http://sscce.org)** - and name some pages where it breaks the DOM. – gkalpak Oct 31 '13 at 20:12
  • Hi, thanks for the answer. But I'm not complaining about content script messing with the DOM, the problem is that it's affecting the webpage "angular" variable. – Wilker Lucio Nov 01 '13 at 02:33
  • Ah, if you try by yourself, I did extra tests here, and actually all you need to do is include angular.js as a content script, them go on any page that uses angular (like the angular website itself), check the console, it will be unable to find the site modules... My guess is that somehow when you include angular as a content script, it resets the angular instance on the page, making it loses the defined modules... – Wilker Lucio Nov 01 '13 at 02:34
  • @ExpertSystem I added information on how to reproduce the problem into the question description, please check it out – Wilker Lucio Nov 01 '13 at 02:54
  • I noticed it breaks **some** sites but not all. Sorry, but my knowledge of AngularJS is limited, so I can't help any further. But again, I suspect that using it in a content script can't that useful. What do you need it for ? – gkalpak Nov 01 '13 at 09:05
  • @ExpertSystem I'm doing some complex UI injection into the page, and AngularJS fits very well, actually I was really liking it, until I hit this problem that I can't find any way to solve... I have to re-write a lot of code to remove Angular and use simple jQuery... I'm not happy at all with that... but I saw no other option... really frustrating... – Wilker Lucio Nov 01 '13 at 18:43
  • That must be frustrating indeed. I am sorry, I can't help any further. – gkalpak Nov 01 '13 at 19:10
  • I stumbled upon **[this answer](http://stackoverflow.com/questions/9515704/building-a-chrome-extension-inject-code-in-a-page-using-a-content-script/9517879#9517879)** describing (among other things) how to inject JS code (intead of content scripts) right into the webpage, so that it runs in the same context as the page's JS. I occurred me, it might be a viable solution for you (regarding what you are actually doing with your ng). E.g. you could inject your code right into the page (instead of running it from a content script. – gkalpak Nov 02 '13 at 13:12
  • Your injected code could first check if angular is already available on the page (and add a proper, CDN-based `script>` tag if not). I know this is far from ideal - but it may be worth a try if it helps you avoid having to convert your extension to using JQuery. – gkalpak Nov 02 '13 at 13:14
  • not really... I was using that before... but I was messing with stuff on the page that I wasn't supposed to... so I moved to isolation to get over my first problem... so I can't go back there... – Wilker Lucio Nov 02 '13 at 21:56
  • also, even if it was possible, I would have new problem with different versions of angular (I could be using one, while the website is using another...) the isolated scopes seems to be the perfect way... but for some reason it's just not working =/ – Wilker Lucio Nov 02 '13 at 21:57

0 Answers0