Chrome extension, Grunt+Bower (from yeoman template) won't load plugins

Question

I just though I make my life easier by sticking to common structures, so I started transferring a chrome browser extension to a yeoman template format (https://github.com/yeoman/generator-chrome-extension).

Unfortunately it simply does not work when I try to just add my first basic bower source that I need:

https://github.com/Yaffle/EventSource

Here is what I did:

1. Set up the new extension with the yeoman helper
2. $ bower install EventSource --save

3. Added event source to the manifest like so

   "background": { "scripts": [ "scripts/chromereload.js", "app/bower_components/EventSource/eventsource.js", ...

4. Add "new EventSource('http://localhost:9292/updates');" to background.js

Other than that the project is untouched.

And whenever I start the project with grunt it fails not finding EventSource like so "'EventSource' is not defined."

Adding the eventsource.js directly to my script folder and require it from there fails even worse by linting the eventsource.js file (that works perfectly fine) and aborting it for too many warnings (like using single quotes).

Previously this whole project worked pretty fine without grunt/bower and now it won't even start after I added the first real line of code. This is quite disappointing for a tool that is supposed to make your life so much easier.

Does it fail because of the warnings in the eventsource.js? In the first case (via bower) it does not say anything about this so I'm not sure. I could go on trying out different combinations but I'm obviously missing a core concept or something like this here.

Any idea?

Update:

After some more trying and giving up i found the magic "grunt bowerInstall" command, to add the script-tags in the template automatically - still no help.

I did also try again on a fresh project with just jQuery (assuming this has to work..), well it still does not. Neither in the popup.js (where the html template includes jQuery) nor in the background script (where the manifest includes it).

I probably read every manual/how-to on hot to use either of those components and still get nowhere.

Another day another try:

Starting with a clean mind i looked a bit more into it today finding out that apparently you have to "whitelist" globals like $ in jshint like so: http://jshint.com/docs/options/#jquery

Still not sure if this is actually the best approach as it seems very counter-intuitive with promised ease of getting started of the yeoman/grunt/bower framework.

Answer 1

EventSource is probably a global variable. You can try declaring it as false in the .jshintrc file to prevent it from being overwritten.

"globals" : {
   "chrome": true,
   "crypto": true,
   "EventSource": false
}

See if that works.

Read more about .jshintrc + global variables at: JSHint and jQuery: '$' is not defined