1. abcang

    Posted

    abcang
Changes in title
+node.jsのモジュールを使ってChrome拡張機能を作る
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,95 @@
+久々にChrome拡張機能を作ろうとした時、node.jsのパッケージとか使ってES2015で書きたいなーと思って探してみたところ、[generator-chrome-extension-kickstart](https://github.com/HaNdTriX/generator-chrome-extension-kickstart)というめっちゃ便利なテンプレがあったので紹介したいと思います。
+
+## どういうもの?
+[generator-chrome-extension-kickstart](https://github.com/HaNdTriX/generator-chrome-extension-kickstart)は[yeoman](http://yeoman.io/)という雛形生成ツールを使って、`gulp`、`webpack`、`babel`が使えるChrome拡張機能開発環境を構築してくれます。
+これを使う利点は、**node.jsのモジュールが使える**、**ES2015で書ける**といったことが挙げられます。(ES2015に関してはブラウザが対応しつつありますが…)
+また、gulpでwatchしておくと、コード編集後にすぐにブラウザで試せるので、とても便利です。
+また、Chrome以外にもFirefoxやOpera向けの拡張機能も生成できるようです。
+
+## インストール
+`yeoman`と`generator-chrome-extension-kickstart`をグローバルインストールします。
+
+```zsh
+$ npm install -g yo generator-chrome-extension-kickstart
+```
+
+インストールできたら、ディレクトリを作成して移動し、雛形を生成コマンドを実行します。
+
+```zsh
+$ mkdir my-new-chrome-extension && cd $_
+$ yo chrome-extension-kickstart
+```
+
+幾つかの質問に答え終わると雛形が生成され、自動的に`npm install`されます。
+
+```
+? What would you like to call this extension? my new chrome extension
+? And how would you call it if you only had 12 characters (short_name)? myChromeApp
+? How would you like to describe this extension? Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+aliqua.
+? Would you like to use UI Action? Browser
+? Would you like to a override chrome page? No
+? Would you like more UI Features?
+? Would you like to use permissions?
+? Would you like to install promo images for the Chrome Web Store? No
+ create package.json
+ create gulpfile.babel.js
+ create tasks/lib/applyBrowserPrefixesFor.js
+ create tasks/lib/args.js
+ create tasks/build.js
+ create tasks/clean.js
+ create tasks/default.js
+ create tasks/fonts.js
+ create tasks/images.js
+ create tasks/livereload.js
+ create tasks/locales.js
+ create tasks/manifest.js
+ create tasks/pack.js
+ create tasks/pages.js
+ create tasks/scripts.js
+ create tasks/styles.js
+ create tasks/version.js
+ create README.md
+ create .gitignore
+ create .gitattributes
+ create .eslintrc
+ create .editorconfig
+ create app/manifest.json
+ create app/pages/popup.html
+ create app/scripts/popup.js
+ create app/styles/popup.less
+ create app/images/icon-19.png
+ create app/images/icon-38.png
+ create app/scripts/background.js
+ create app/scripts/lib/livereload.js
+ create app/_locales/en/messages.json
+ create app/images/icon-16.png
+ create app/images/icon-128.png
+ create app/images/icon-large.svg
+ create app/fonts/.gitkeep
+```
+
+## 開発
+開発時は主に`app`ディレクトリの中にあるファイルを編集することになります。
+下のようにnpmスクリプトを実行しておくと、ファイルの変更を検知して、自動的に`dist`ディレクトリにビルド後のファイルを出力してくれます。
+
+```zsh
+$ npm run dev:chrome
+```
+
+Chrome拡張機能のページ(chrome://extensions)を開いて、「パッケージ化されていない拡張機能を読み込む...」ボタンを押し、`dist/chrome`ディレクトリを選択してブラウザに拡張機能を適応させましょう。
+
+## リリース
+Chrome ウェブストアにアップロードするために、作成したChrome拡張機能をzipにまとめたい時は、以下のコマンドを実行します。
+
+```zsh
+$ npm run build:chrome
+```
+
+そうすると`packages`ディレクトリにzipファイルが生成されます。
+このコマンドでビルドする時は、JavaScriptやCSSのファイルはminifyしてくれます!
+このzipファイルはそのままChrome ウェブストアにアップロードできます。
+
+## まとめ
+[generator-chrome-extension-kickstart](https://github.com/HaNdTriX/generator-chrome-extension-kickstart)を使うことで、gulp、webpack、babelでChrome拡張機能を作れるようになれます。
+普段から頻繁にnode.jsのモジュールやES2015の記法を使ってる人にはすごく便利なツールだと思うので、これを使ってスマートにChrome拡張機能を開発しましょう!