#76

I just installed this generator, scaffolded a project, and fixed #76. Ran grunt and was greeted with this:

>> No "cssmin" targets found.
Warning: Task "cssmin" failed. Use --force to continue.

Aborted due to warnings.

Sad panda. Panda likes things to work out of the box.

Config chosen: no extra options (no UI Actions or UI Features)

I tried the grunt build task to package my extension, but it seems the output "dist" folder does not contain any bower components, even though my popup.html is referencing those components.

Also, on closer inspection, i found that all my scripts got minified into a single file, but no processing is done with the bower js/css components.

Structure of my popup.html file

CSS

<!-- bower:css -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css" />
    <!-- endbower -->
    <!-- build:css styles/main.css -->
    <link href="styles/flat-ui.css" rel="stylesheet">
    <link href="styles/main.css" rel="stylesheet">
    <!-- endbuild -->

JS

<!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="bower_components/q/q.js"></script>
    <script src="bower_components/jquery-mousewheel/jquery.mousewheel.js"></script>
    <script src="bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.js"></script>
    <!-- endbower -->
    <!-- build:js scripts/popup.js -->
    <script src="scripts/handlebars.runtime-v1.3.0.js"></script>
    <script src="scripts/templates.js"></script>
    <script src="scripts/popup.js"></script>
    <!-- endbuild -->

I am trying to run: yo chrome-extension --test-framework=[jasmine] but get no response from the --test-framework flag.

I am running developer preview 5 of OSX, I just installed the latest node for npm and install this.

$ yo chrome-extension test_project

TypeError: Cannot read property 'bold' of undefined
at Object. (/usr/local/lib/node_modules/generator-chrome-extension/node_modules/yeoman-generator/lib/util/common.js:5:56)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object. (/usr/local/lib/node_modules/generator-chrome-extension/node_modules/yeoman-generator/lib/base.js:91:26)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)

I am getting the following error:

>> Uglifying source "dist/scripts/popup.js" failed.
Warning: Uglification failed.
Unexpected token: punc ({). 
Line 9331 in dist/scripts/popup.js
Use --force to continue.

some js and css are concatenated together and uglify complains about unexpected tokens when it reaches the css.

Is it expected to merge js and css as it does ?
If so, is uglify supposed to handle the css as well?

When creating a new project using --coffee and/or --compass, running grunt debug will create js and css files inside the app folder, running grunt clean won't remove them. I changed my clean task so that the files are removed:

    clean: {
      chrome: {
      },
      dist: {
        files: [{
          dot: true,
          src: [
            '<%= config.dist %>/*',
            '!<%= config.dist %>/.git*',
            '<%= config.app %>/scripts/{,*/}*.js',
            '<%= config.app %>/styles/{,*/}*.css'
          ]
        }]
      }
    },

I understand the files are created for debugging purpose, so one can load an unpacked extension into chrome by selecting the app folder, but this will also submit those files into any SCM.

How can i set grunt task to automatically inject bower components into my popup.html.
I also changed the bowerInstall task src property, but it's not working.

Original:

bowerInstall: {
            app: {
                src: ['<%= config.app %>/index.html'],
                ignorePath: '<%= config.app %>/'
            }
        },

Changed to:

bowerInstall: {
            app: {
                src: ['<%= config.app %>/popup.html'],
                ignorePath: '<%= config.app %>/'
            }
        }

I have started a project using version 0.2.9 of the generator. Everything seems to be in order, and when I run grunt test I'm able to see that a single test passes. It is the test in test/spec/test.js, as if I add a failing assertion there, grunt test fails.

I've added some additional test scripts in test/index.html as suggested by the comments. The <body> of test/index.html is:

    <div id="mocha"></div>
    <script src="bower_components/mocha/mocha.js"></script>
    <script>mocha.setup('bdd')</script>
    <script src="bower_components/chai/chai.js"></script>
    <script>
        var assert = chai.assert;
        var expect = chai.expect;
        var should = chai.should();
    </script>

    <!-- include source files here... -->
    <script src="/app/scripts/myDandyScript.js"></script>

    <!-- include spec files here... -->
    <script src="spec/test.js"></script>
    <script src="spec/myDandyScriptTest.js"></script>

    <script>mocha.run()</script>

If I serve this file (which I am doing using python, as I'm missing how to do so with grunt), I see that all my expected tests pass. Running grunt test, however, still just shows me the single test in test.js.

I'm sure this is just me misusing Grunt or something along those lines. I haven't modified the Gruntfile in any way.

How can I get my new tests picked up by the command line, not just by the browser?

Does this extension include any support for html templating by default, or is that a dependency that needs to be added and configured?

Would be super helpful if the README described how to add dependencies (e.g. bonzo, qwery) to bower.json and whether they need to also be added to the content_scripts.js array in manifest.json. I'm not sure if I should be specifying every single script or if I should rely on some single concatenated script since grunt supposedly concats and minifies them.

Just trying generator-chrome-extension for the first time (have used generator-angular before though). Figured out that I can run "grunt watch" to get compass to automatically compile css when it notices a change to some sass, but the css it's compiling ends up in the .tmp/styles folder and is therefore not applied to popup.html, which only includes app/styles/main.css. Is that where the css is supposed to be getting compiled to instead of .tmp?

Thanks for the great work on generator-chrome-extension.

I generated the dummy extension with popup support and now all pages have 20px padding to body injected to them.
Since I just tested the generator it took some time to understand why this is happening.

Using:
generator-chrome-extension v0.2.5
node v0.10.26
Windows 7 64-bit

On a freshly generated project, running grunt test results in

Testing: http://localhost:9000/index.html


Warning: PhantomJS timed out, possibly due to a missing Mocha run() call. Use --
force to continue.

Aborted due to warnings.

after a few seconds. However, if I pull up the URL it's accessing (after the connect task starts up the server, before that message appears), I see that Mocha has run the test just fine.

Also possibly noteworthy: if I deliberately make the test fail (adding in a throw;), then the task completes, with:

Testing: http://localhost:9000/index.html


  0 tests complete (0 ms)

>> 0 passed! (0.00s)

Done, without errors.

Hi,

I'm new to the frontend toolchain and was wondering how I integrate require.js for a more modular development process? I want to write a contentscript extension, but most require js content out there is geared towards embedding javascript in an html file with loading require js and pointing to a main.js.

Thanks!

Readme should say what it is, how it works, how to get started, like installing. See the angular generator readme.

just tried out the coffeeScript options, It seems lots of thing don't work at the moment
grunt-chrome-manifest seem not compatible with coffeescript, which makes background.js not being compiled

and the js file generated in dist isn't minified

Currently many functions are unnecessarily occupying the global namespace in index.js. For example:

    ChromeExtensionGenerator.prototype.manifest = function manifest()

There is no reason to have "manifest" in the global namespace because it wouldn't make sense to call manifest() without having the object to call it on. And if the object is available, then the function is already in the prototype of the object. Additionally we also define a variable named manifest (in literally the next line!) which further complicates matters.

I picked manifest() as just as an example, but this is done for all functions in index.js. I suggest that all functions should be switched to anonymous functions.

Steps to reproduce:

1. Switch Chrome to developer mode.
2. Load unpacked extension...
3. Run grunt debug.
4. Modify contentscript.js to be console.log('Is live reload working?');
5. Save file.

Expected behaviour: Reload page and content script should log 'Is live reload working?'
Actual behaviour: Reload page and content script logs "`Allo 'Allo! Content script".

After doing grunt build, the manifest file gets properly bumped, but it is never rewritten, therefore the compress task will use the old version instead of the bumped one.
I haven't edited Gruntfile.js.

I'd like to make both CoffeeScript and Compass to optional. I've been trying to find better workflow for those but It's not been up to scratch. I couldn't control the generated files clearly after build them.

I don't know how many people using them to develop the chrome apps however some of peoples want it. So I think it's better to make both of them to optional. It's much better than remove it in temporary.

like in webapp generator --coffee --compass

We support them in optional but we don't care how to clean up the generated files. But we should find out better way for them.

@addyosmani @sindresorhus

I just installed the generator and scaffolded a project. Ran grunt and was greeted with this:

Running "jshint:all" (jshint) task

test/spec/test.js
  line 11  col 9  Expected '}' to have an indentation at 11 instead at 9.
  line 12  col 5  Expected '}' to have an indentation at 7 instead at 5.
  line 13  col 1  Expected '}' to have an indentation at 3 instead at 1.

✖ 3 problems

Warning: Task "jshint:all" failed. Use --force to continue.

Aborted due to warnings.

Sad panda. Panda likes things to work out of the box.

Config chosen: no extra options (no UI Actions or UI Features)

This generator is currently not registered, so users have to do npm install git://github.com/yeoman/generator-chrome-extension.git at the moment to use it.

cssmin should be run after compass:dist task.

This generator seems to be suffering from the problem described here:
yeoman/generator-webapp#137

would be nice if the generator will allow for creation of a DevTools Tab

thanks

The .bowerrc file is configured but default to download components to "/app/bower_components", but this only works if you execute bower from the root directory. The correct path would be "../app/bower_components"

I created a fresh project with yo chrome-extension and tried to run it and got an error from jsHint about the Gruntfile.js

  line 133  col 23  Trailing whitespace.
  line 134  col 22  Expected '<%= config.app %>/*.html' to have an indentation at 21 instead at 22.

I re-indented line 134 and took out the trailing whitespace on line 133, problem solved. Easy fix, but kind of annoying since this happens out of the box.

I am running OSX 10.9

i'd like to test the generator with yeoman 1.0 beta.
I've not been able to find, through 'npm search yeoman-generator' command.
should i publish the generator to npm?

In the generated Gruntfile.js:

grunt.registerTask('build', [
    'clean:dist',
    'chromeManifest:dist',
    'useminPrepare',
    'concurrent:dist',
    'cssmin',
    'concat',
    'uglify',
    'copy',
    'usemin',
    'compress'
]);

The concat task is executed after cssmin task, that overwrites the result of cssmin.

I just stumbled upon a minor bug related to escaping of double quotes. To reproduce it:

➜  test  yo chrome-extension
[?] What would you like to call this extension?: Test Extension
[?] How would you like to describe this extension?: Disables the "Edit event" button.
[?] Would you like to use UI Action?: No
[?] Would you like to use the Options Page?: No
[?] Would you like to use the Omnibox? (Please input keyword): 
[?] Would you like to use the Content Scripts (Not Programmatic)?: No
[?] Would you like to use permissions?: 

If we take a look at app/_locales/en/messages.json we'll see that the double quotes haven't been escaped and the json is invalid.

{
  "appName": {
    "message": "Test Extension",
    "description": "The name of the application"
  },
  "appDescription": {
    "message": "Disables the "Edit event" button.",
    "description": "The description of the application"
  }
}

It would be nice to check all this stuff first.

   ....
   create .editorconfig
   create .gitignore
   create .gitattributes
   create .jshintrc
   create Gruntfile.js
Error chrome-extension

You don't seem to have a generator with the name mocha:app installed.
You can see available generators with npm search yeoman-generator and then install them with npm install [name].
To see the 1 registered generators run yo with the `--help` option.

Currently developing a Chrome packaged app along with a corresponding Chrome extension, so it's confusing to have an "app" subdirectory in the extension directory. Since a Chrome app is already a thing which is distinct from Chrome extensions, would "src" be a better name?

Would be happy to submit a PR for this if you would accept it.

i'm reviewing webapp & angualr generator for migration.

i'd like to remove livereload task in watch task. livereload is great features but in case of chrome extension, i think it going to never use. i mean it's not generic workflow in chrome extension development.

and i try to replace livereload task to jshint in watch task. but i could not find out how to make keep watch the destination files. jshint always exit in watch task if it was detect error from changed files. i'd like to keep watch the files if user make a typo or mistakes.

please let me know your think.

Hi guys,

Love this generator. However, on building my extension, the process fails:

Running "concurrent:dist" (concurrent) task

Running "svgmin:dist" (svgmin) task

Done, without errors.
    Warning: Running "imagemin:dist" (imagemin) task
Warning: Error: spawn ENOENT Use --force to continue.

Aborted due to warnings. Use --force to continue.

    Aborted due to warnings.


Execution Time (2014-04-07 18:40:40 UTC)
concurrent:dist  1.5s  ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 98%
Total 1.5s

warning: LF will be replaced by CRLF in app/manifest.json.
The file will have its original line endings in your working directory.

Running this on Windows 8.1, Node 0.10.25.

Any idea what might be causing this?

I used this generator and develop a simple chrome extension,
but after I built the project and upload it, I found that manifest did not contain inside in the archive.

I guess the problem is building sequence,
cause "manifest" will do after "compress", maybe switch L304 and L305?
https://github.com/yeoman/generator-chrome-extension/blob/master/app/templates/Gruntfile.js#L304-L305

I am getting an error while using this generator. This is the output from the command line. I am running it on Windows 8

create app/manifest.json
create app/scripts/contentscript.js
create app/scripts/background.js
create app/_locales/en/messages.json
create app/styles/main.css
create app/images/icon-16.png
create app/images/icon-128.png
create package.json
create bower.json
create .bowerrc
create .editorconfig
create .gitignore
create .gitattributes
create .jshintrc
create Gruntfile.js

module.js:340
throw err;
^
Error: Cannot find module 'es5-ext/lib/Object/descriptor'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object. (C:\Users\Smurf\AppData\Roaming\npm\node_modules\generator-mocha\node_modules\yeoman-generator
\node_modules\inquirer\node_modules\cli-color\lib\index.js:3:15)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)

The chrome.identity(https://developer.chrome.com/apps/identity) API needs the key element to exist in the manifest during debugging as well as in release. Since the key is automatically added by the WebStore, it won't accept any package that have it already set.

My proposal is to edit the Gruntfile so that it takes care of deleting the key element from the manifest right before compressing, without touching the original manifest.json used while debugging.

grunt-regarde is deprecated. Use grunt-contrib-watch instead.

See: yeoman/generator-webapp@v0.1.7...master#diff-4

Could also need to update to all the other changes we've done in the webapp generator since last time.

The $_ parameter is not supported on Windows, so the full folder name will have to be entered again (or up arrow, home key, delete key, "c" - to edit the previous command to change directory from make directory).

Unable to use the generator. Here I describe the actions I followed.

$ npm uninstall -g yo
$ npm uninstall -g grunt-cli
$ npm uninstall -g bower
$ npm install -g yo grunt-cli bower
$ npm install git://github.com/yeoman/generator-chrome-extension.git
$ yo chrome-extension 

Options given:
What would you like to call this extension?(Test-App) Test App
How would you like to describe this extension?(My Chrome Extension) My Chrome Extension
Would you like to use UI Action(1: Browser, 2:Page)?1
Would you like to use the Options Page?(y/N) y
Would you like to use the Omnibox? (Please input keyword)
Would you like to use the Content Scripts (Not Programmatic)?(y/N) y
Would you like to declare the "Tabs" permission?(y/N) y
Would you like to declare the "Bookmarks" permission?(y/N) n
Would you like to declare the "Cookies" permission?(y/N) n
Would you like to declare the "History" permission?(y/N) n
Would you like to declare the "Management" permission?(y/N) n

Error shown:

/Users/jjperezaguinaga/.nvm/v0.8.19/lib/node_modules/yo/node_modules/yeoman-generator/node_modules/bower/node_modules/tmp/lib/tmp.js:219
throw err;
^
Error: ENOENT, no such file or directory '/Users/jjperezaguinaga/Test-App/node_modules/generator-chrome-extension/app/templates/.gitignore'
at Object.fs.openSync (fs.js:338:18)
at Object.fs.openSync (/Users/jjperezaguinaga/.nvm/v0.8.19/lib/node_modules/yo/node_modules/yeoman-generator/node_modules/bower/node_modules/rimraf/node_modules/graceful-fs/graceful-fs.js:68:26)
at Object.fs.openSync (/Users/jjperezaguinaga/Test-App/node_modules/generator-chrome-extension/node_modules/yeoman-generator/node_modules/rimraf/node_modules/graceful-fs/graceful-fs.js:68:26)
at Object.fs.openSync (/Users/jjperezaguinaga/.nvm/v0.8.19/lib/node_modules/yo/node_modules/generator-mocha/node_modules/yeoman-generator/node_modules/bower/node_modules/rimraf/node_modules/graceful-fs/graceful-fs.js:68:26)
at Object.fs.readFileSync (fs.js:182:15)
at Generator.copy (/Users/jjperezaguinaga/Test-App/node_modules/generator-chrome-extension/node_modules/yeoman-generator/lib/actions/actions.js:68:15)
at Generator.createManifest as writeFiles
at next (/Users/jjperezaguinaga/Projects/Test-App/node_modules/generator-chrome-extension/node_modules/yeoman-generator/lib/base.js:265:18)
at Base.run (/Users/jjperezaguinaga/Projects/Test-App/node_modules/generator-chrome-extension/node_modules/yeoman-generator/lib/base.js:276:7)
at next (/Users/jjperezaguinaga/Projects/Test-App/node_modules/generator-chrome-extension/node_modules/yeoman-generator/lib/util/conflicter.js:46:14)

I wanted to write my extension in CoffeeScript and found it was already installed. However, the Gruntfile is very unclear about what it is used for. A lot of things seem to write to the .tmp folder and in the case of CoffeeScript, it writes there but does nothing with the generated files afterwards.

Implement tests. See the angular or webapp generator.

Howdy!
First off — amazingly good generator. Props.

Secondly — my initial run of grunt debug failed because of an extra space in the bowerInstall stanza, right before '<%= config.app %>/*.html'.

I'll write a pull request once I have a moment.

It seems pretty slow to load the extension then reload it + reload a page that uses it. Is there a better development workflow? I could imagine grunt serving contentscripts during dev.

brand new extension grunt debug fails because of jshint erroring out:

$ grunt debug
tRunning "debug" task

Running "jshint:all" (jshint) task

test/spec/test.js
  line 4   col 3  Expected 'use strict' to have an indentation at 5 instead at 3.
  line 6   col 3  Expected 'describe' to have an indentation at 5 instead at 3.
  line 7   col 5  Expected 'describe' to have an indentation at 9 instead at 5.
  line 8   col 7  Expected 'it' to have an indentation at 13 instead at 7.
  line 10  col 7  Expected '}' to have an indentation at 13 instead at 7.
  line 11  col 5  Expected '}' to have an indentation at 9 instead at 5.
  line 12  col 3  Expected '}' to have an indentation at 5 instead at 3.

✖ 7 problems

Warning: Task "jshint:all" failed. Use --force to continue.

Aborted due to warnings.

I created an extension with no UI action and no extra UI features because my extension just runs in the background and acts on outgoing webRequests.

Without making any changes, I then proceeded to grunt build the skeleton extension and got the error:

Execution Time (2014-04-20 01:46:31 UTC)
imagemin:dist 1.4s ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 99%
Total 1.4s
>> No "cssmin" targets found.
Warning: Task "cssmin" failed. Use --force to continue.