0

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.

Prayag Verma
  • 5,581
  • 3
  • 30
  • 56
maxigs
  • 866
  • 6
  • 16
  • Some hours later i'm still no closer to a solution but loosing any hope this thing could ever work... See for my updates above. – maxigs Jun 17 '15 at 18:44
  • Not a real solution but found the issue of not compiling: when i removed the "jshint" task from grunt debug it worked ... – maxigs Jun 17 '15 at 18:54
  • I did add another possible step to get closer to a solution, still not sure if this is "how it's supposed to be done" though. – maxigs Jun 18 '15 at 08:45
  • Are you trying to use that from `chromereload.js`? – Xan Jun 21 '15 at 19:26
  • Yes chromereload is part of the project (comes with the template). – maxigs Jun 22 '15 at 20:11
  • The array in the manifest is ordered. You must load libraries before you use them. – Xan Jun 22 '15 at 20:25

1 Answers1

0

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

Community
  • 1
  • 1
simboonlong
  • 31
  • 3