handtrix / generator-chrome-extension-kickstart

Scaffold out a Web Extension http://yeoman.io

DEPRECATED

In favor of https://github.com/HaNdTriX/generator-web-extension

Advanced WebExtension generator that creates everything you need to get started with extension development.

This generator uses:

• gulp.js
• webpack
• Babel.js

Features

• ES2015
• Modules (ES2015, CommonJS, AMD)
• Multi browser support (chrome, firefox, opera, edge)
• Vendor prefixed manifest keys
• Sourcemaps
• Linting
• CSS, Sass, Less
• Environment variables
• Image optimization
• Livereload
• Packaging
• Version management

Install

$ npm install -g yo generator-chrome-extension-kickstart

Getting Started

• First make a new directory, and cd into it: mkdir my-new-chrome-extension && cd $_
• Run: yo chrome-extension-kickstart.

Options

• --skip-install

  Skips the automatic execution of npm after scaffolding has finished.

Documentation

Check out the documentation

Contribute

See the contributing docs

License

MIT

generator-chrome-extension-kickstart's Issues

Add docs on using async

diff --git a/.babelrc b/.babelrc
index cb80719..8402d34 100644
--- a/.babelrc
+++ b/.babelrc
@@ -8,5 +8,8 @@
       "debug": false
     }]
   ],
-  "ignore": ["node_modules"]
+  "ignore": ["node_modules"],
+  "plugins": [
+      ["transform-runtime", {"polyfill": false}]
+  ]
 }

diff --git a/package.json b/package.json
index 33469fd..646f41d 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "babel-cli": "6.x.x",
     "babel-core": "6.x.x",
     "babel-loader": "7.x.x",
+    "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "1.x.x",
     "chai": "4.x.x",
     "chromereload": "0.x.x",

Remove babel-preset-react

We do not really need this.

use vue-loader.Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag

scripts.js

import gulp from 'gulp';
import gulpif from 'gulp-if';
import named from 'vinyl-named';
import webpack from 'webpack';
import gulpWebpack from 'webpack-stream';
import plumber from 'gulp-plumber';
import livereload from 'gulp-livereload';
import args from './lib/args';

const ENV = args.production ? 'production' : 'development';

gulp.task('scripts', (cb) => {
  return gulp.src('app/scripts/*.js')
    .pipe(plumber())
    .pipe(named())
    .pipe(gulpWebpack({
      devtool: args.sourcemaps ? 'source-map': null,
      watch: args.watch,
      plugins: [
        new webpack.DefinePlugin({
          'process.env': {
            'NODE_ENV': JSON.stringify(ENV)
          },
          '__ENV__': JSON.stringify(ENV),
          '__VENDOR__': JSON.stringify(args.vendor)
        }),
      ].concat(args.production ? [
        new webpack.optimize.UglifyJsPlugin()
      ] : []),
      module: {
        preLoaders: [{
          test: /\.js$/,
          loader: 'eslint-loader',
          exclude: /node_modules/
        }, {
          test: /\.vue$/,
          loader: 'eslint',
          exclude: /node_modules/
        },],
        loaders: [{
          test: /\.js$/,
          loader: 'babel'
        },{
          test: /\.vue$/,
          loader: 'vue'
        },]
      },
      eslint: {
        configFile: '.eslintrc'
      }
    }))
    .pipe(gulp.dest(`dist/${args.vendor}/scripts`))
    .pipe(gulpif(args.watch, livereload()));
});

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png"/>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello Vue 2.0!'
    }
  }
}
</script>

<style>
body {
  font-family: Helvetica, sans-serif;
}
</style>

Run

npm run dev:chrome

show error:

ERROR in ./app/scripts/App.vue

/Users/apple/codes/hbox-chrome-extension/app/scripts/App.vue
  8:1  error  Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag

✖ 1 problem (1 error, 0 warnings)


ERROR in ./~/vue-loader/lib/template-compiler.js?id=data-v-1!./~/vue-loader/lib/selector.js?type=template&index=0!./app/scripts/App.vue
Module not found: Error: Cannot resolve 'file' or 'directory' ./assets/logo.png in /Users/apple/codes/hbox-chrome-extension/app/scripts
 @ ./~/vue-loader/lib/template-compiler.js?id=data-v-1!./~/vue-loader/lib/selector.js?type=template&index=0!./app/scripts/App.vue 1:198-226

No gulpfile found

I have followed the instructions to use, but when I come to run gulp --watch I get the error ' no gulpfile found'

How I get extension to support await/async syntax?

Do you have to configure babel-loader on webpack? How do I do that?

move to webpack

Add Mac Safari on the list of vendor

Please also add the Safari browser on the list of vendors.

Not waiting for the `clean` task to finish

del 1.2.1 doesn't return a promise and the build doesn't wait fro the clean task to finish. Bumping del's version to 2.0.2 fixes things.

Thanks for the awesome generator!

build:chrome scripts run gulp build task twice

tank you for nice generetor!

build:chrome scripts run gulp build task twice.

"build:chrome": "gulp pack --production --vendor=chrome"

it works build task

HTML Snippets

Is there a way with how this is generator is setup to use HTML snippets? My main HTML page is very large so I would like to split it up into mini files for ease of development, but it needs to be all compiled into one file. Is there anything in this generator that would help with that?

Firefox can't install extension

Firefox can't install a freshly generated extension out of the box. Tested both with unpacked & packed, ff & ff-dev-edition. Add-on installations always spits:

There was an error during installation: getURL may not be called before an `id` or `uuid` has been set

try "out of the box":

yo chrome-extension-kickstart
gulp build --vendor=firefox
gulp pack --vendor=firefox

gulp-git outdated

gulp-git 1.x.x causes babel-register to throw an error on 'npm start'.

$ npm start
...

npm run dev:chrome
...
gulp --watch --vendor=chrome

[07:59:43] Requiring external module babel-register
/.../node_modules/gulp-git/node_modules/require-dir/index.js:93
if (!require.extensions.hasOwnProperty(ext)) {
^

TypeError: require.extensions.hasOwnProperty is not a function
at requireDir (/.../node_modules/gulp-git/node_modules/require-dir/index.js:93:37)
at Object. (/.../node_modules/gulp-git/index.js:4:18)
at Module._compile (module.js:569:30)
at Module._extensions..js (module.js:580:10)
at Object.require.extensions.(anonymous function) [as .js] (/.../node_modules/babel-register/lib/node.js:152:7)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)
at Module.require (module.js:513:17)
at require (internal/module.js:11:18)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! dev:chrome: gulp --watch --vendor=chrome
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev:chrome script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/tom/.npm/_logs/2017-06-16T05_59_44_980Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! start: npm run dev:chrome
npm ERR! Exit status 1

fix for package.json:

-    "gulp-git": "1.x.x",
+    "gulp-git": "2.x.x",

env:
$ node -v
v8.1.2

Why not create a Pull Request to generator-chrome-extension?

The reason why I chose a new project over a pull-request, was that the changes between the CommonJS way differs from the usemin way of wrapping things together.

generator-chrome-extension uses usemin. Therefor the entry point of our apps (e.g. popup or background) is the html document or the manifest.json file. But what is the entrypoint for my popup page? The manifest or the html document? This kind of magic increases the complexity of the build system and reduces the knowledge of what the build system is actually doing.

So when I decided to switch to a CommonJS approach, I realised that I don't need this magic anymore.
I can require everything in one single entyfile.

app/background.js

var _ = require('lodash');
var messageSystem = require('./lib/messageSystem');
....

Later I reference this file in the manifest, some html document or in my code manually.

The same works for stylesheets:

app/styles/popup.less

@include 'node_modules/bootstrap/bootstrap.less';

or even better:

 @include 'node_modules/bootstrap/less/variables.less';   
 @include 'node_modules/bootstrap/less/grid.less';   

That brings us to the question how to define an entry file?
I decided to interpret every file in the root of its directory of its specific type as entryfile.

./app/scripts/background.js  <-- Entryfile
./app/scripts/lib/livereload.js <-- This file has to be required manually

Everything else has to be required.

This makes it easy to reference these files later on.

Invalid JSON: Unexpected string in JSON at position 635 in gulp-json-transform

Out of nowhere I just got this error:

[07:56:22] Starting 'manifest'...
[07:56:22] gulp-json-transform: Invalid JSON: Unexpected string in JSON at position 635
[07:56:22] Plumber found unhandled error:
 Error in plugin 'gulp-json-transform'
Message:
    Invalid JSON: Unexpected string in JSON at position 635
[07:56:22] Finished 'manifest' after 3.33 ms

How can I add support for scraping web site ?

Following code I tried in background.js

window.addEventListener('load', function (evt) {
	chrome.extension.getBackgroundPage().chrome.tabs.executeScript(null, {
		file: 'popup.js'
	});
});

// Listen to messages from the payload.js script and write to popout.html
chrome.runtime.onMessage.addListener(function (message) {
	console.log(message)
	document.getElementById('pagetitle').innerHTML = message;
});

and in payload.js

// send the page title as a chrome message

var element = document.evaluate('<SOME_XPATH>' ,document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null ).singleNodeValue

chrome.runtime.sendMessage(element.text);

but in payload.js document contain popup.html dom object.
how can I access opened page html DOM in payload.js ? or is there any other way to scrap web site data?

Thanks

TypeScript support

Do you have any plan to support using typescript instead of es5?

I often use TypeScript to develop a chrome extension with this kickstart.
It would be better if there is any option to set up supporting TypeScript by Gulp.

---

I have implemented this feature in mazamachi#1 and plan to release this fork repository as an npm package.
If another package is undesirable to you, I am willing to create a PR to this original repository 😄
Thanks.

Add Microsoft Edge on the list of vendor

It would be nice to also add Microsoft Edge. :)

scripts task doesn't allow directories

If you add a directory in the scripts directory it skips it since you're using 'app/scripts/*.js' vs 'app/scripts/**/*.js'.

Same goes for the output.

.pipe(gulp.dest(`dist/${args.vendor}/scripts`))

Version 5 ROADMAP

This is just a collection of thinks I would like to see in Version 5

• Switch from Gulp to Taskr
• Remove Image Optimisation
• Add chromereload to watch task via manifest change
• Improve documentation
• Reduce amount of tasks
• Rename to generator-webextension or similar
• Improve tests
• Add jest test task
• Add better logo
• Split into multiple yeoman generators
• Add polyfill/ponyfill spec and examples
• Add artworks for all vendors

Currently I don't have the time to tackle these Issues. So if someone from the community wants to take over, feel free to drop me a note!

Testing framework

Is it possible to add a testing framework to the generator? Thank you.

minifyCSS breaks chrome-extension urls

Problem

It transforms

chrome-extension://__MSG_@@extension_id__/images/logo.png

to

chrome-extension://__MSG_%40@extension_id__/images/logo.png

clean-css/clean-css#667

Clarification required: polyfill-vendor-differences

Clarification requested for: https://github.com/HaNdTriX/generator-chrome-extension-kickstart/blob/master/DOCUMENTATION.md#polyfill-vendor-differences

Related to this list: https://bugzilla.mozilla.org/show_bug.cgi?id=1161828
And this: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities

Thanks for your code.

Typo in setup question

The 4th question asked when I ran the generator from the command line was, "Would you like to a override chrome page?" I think a verb is missing between "to" and "a" — the word "use", perhaps? Also, "a" should probably be "an".

How add jQuery or third parties library?

Hi I am playing with this kickstart I am new in chrome extension and I wondering which benefit have to use webpack, and how I can add libraries like jquery, knockout, bootstrap.js

best regards,
Frank

uglifyjs arrow functions

To allow full ES6 usage it may be worth it to switch to the harmony branch of uglifyjs. This would also fix the issue of uglifyjs throwing error with arrow functions.

ERROR in options.js from UglifyJs
Unexpected token: operator (>) [options.js:6454,19]

ERROR in contentscript.js from UglifyJs
Unexpected token: operator (>) [contentscript.js:6454,19]

ERROR in helpers.js from UglifyJs
Unexpected token: operator (>) [helpers.js:6454,19]

Broken gulp build still returns error code 0

Here's some example output from my project:

5.65s$ gulp build --production

[16:14:55] Requiring external module babel-core/register

[16:14:56] Using gulpfile ~/build/mikecrittenden/shortkeys/gulpfile.babel.js

[16:14:56] Starting 'build'...

[16:14:56] Starting 'clean'...

[16:14:56] Finished 'clean' after 4.13 ms

[16:14:56] Starting 'vendor:mousetrap'...

[16:14:56] Starting 'vendor:bootstrap'...

[16:14:56] Starting 'vendor:codemirror'...

[16:14:56] Starting 'vendor:angular'...

[16:14:56] Starting 'vendor:keyscss'...

[16:14:56] Starting 'manifest'...

[16:14:56] Starting 'scripts'...

[16:14:56] Starting 'styles:css'...

[16:14:56] Starting 'styles:less'...

[16:14:56] Starting 'styles:sass'...

[16:14:56] Starting 'pages'...

[16:14:56] Starting 'locales'...

[16:14:56] Starting 'images'...

[16:14:56] Starting 'fonts'...

[16:14:56] Starting 'chromereload'...

[16:14:56] Finished 'chromereload' after 151 μs

[16:14:56] Finished 'styles:css' after 23 ms

[16:14:56] Finished 'styles:less' after 21 ms

[16:14:56] Finished 'fonts' after 18 ms

[16:14:57] Finished 'pages' after 279 ms

[16:14:57] Finished 'manifest' after 333 ms

[16:14:57] Finished 'styles:sass' after 286 ms

[16:14:57] Starting 'styles'...

[16:14:57] Finished 'styles' after 30 μs

[16:14:57] Finished 'locales' after 285 ms

[16:14:57] Finished 'vendor:mousetrap' after 364 ms

[16:14:57] Finished 'vendor:bootstrap' after 360 ms

[16:14:57] Finished 'vendor:codemirror' after 358 ms

[16:14:57] Finished 'vendor:angular' after 358 ms

[16:14:57] Finished 'vendor:keyscss' after 357 ms

[16:14:57] Starting 'vendor'...

[16:14:57] Finished 'vendor' after 6.41 μs

[16:14:57] gulp-imagemin: Minified 4 images (saved 5.11 kB - 48.4%)

[16:14:57] Finished 'images' after 700 ms

[16:15:00] Finished 'scripts' Hash: 21b542b739c502552262

Version: webpack 3.10.0

Time: 2806ms

           Asset     Size  Chunks             Chunk Names

      options.js   136 kB       0  [emitted]  options

contentscript.js  1.53 kB       1  [emitted]  contentscript

   background.js  6.76 kB       2  [emitted]  background

   [0] multi ./app/scripts/background.js 28 bytes {2} [built]

   [1] ./app/scripts/background.js 10.8 kB {2} [built]

   [2] multi ./app/scripts/contentscript.js 28 bytes {1} [built]

   [3] ./app/scripts/contentscript.js 3.58 kB {1} [built]

   [4] multi ./app/scripts/options.js 28 bytes {0} [built]

   [5] ./app/scripts/options.js 10.7 kB {0} [built]

   [6] ./node_modules/angular-ui-bootstrap/index.js 71 bytes {0} [built]

   [7] ./node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js 277 kB {0} [built]

   [8] ./node_modules/angular-ui-codemirror/src/ui-codemirror.js 4.52 kB {0} [built]


ERROR in ./app/scripts/options.js

Module not found: Error: Can't resolve 'Angular' in '/home/travis/build/mikecrittenden/shortkeys/app/scripts'

 @ ./app/scripts/options.js 5:15-33

 @ multi ./app/scripts/options.js


ERROR in ./app/scripts/options.js

Module not found: Error: Can't resolve 'CodeMirror' in '/home/travis/build/mikecrittenden/shortkeys/app/scripts'

 @ ./app/scripts/options.js 9:18-39

 @ multi ./app/scripts/options.js


ERROR in ./app/scripts/options.js

Module not found: Error: Can't resolve 'CodeMirror/addon/edit/closebrackets.js' in '/home/travis/build/mikecrittenden/shortkeys/app/scripts'

 @ ./app/scripts/options.js 15:0-49

 @ multi ./app/scripts/options.js


ERROR in ./app/scripts/options.js

Module not found: Error: Can't resolve 'CodeMirror/addon/edit/matchbrackets.js' in '/home/travis/build/mikecrittenden/shortkeys/app/scripts'

 @ ./app/scripts/options.js 17:0-49

 @ multi ./app/scripts/options.js


ERROR in ./app/scripts/options.js

Module not found: Error: Can't resolve 'CodeMirror/mode/javascript/javascript.js' in '/home/travis/build/mikecrittenden/shortkeys/app/scripts'

 @ ./app/scripts/options.js 13:0-51

 @ multi ./app/scripts/options.js

[16:15:00] Finished 'scripts' after 3.13 s

[16:15:00] Finished 'build' after 3.15 s



The command "gulp build --production" exited with 0.


Done. Your build exited with 0.

Note that there are multiple Module not found errors, but the command still returns a success code. How can I make this return an error code instead?