Chrome拡張機能.md

http://oxynotes.com/?p=8836 http://qiita.com/mdstoy/items/9866544e37987337dc79 http://qiita.com/edit-mode/items/26d7a22233ecdf48fed8 http://qiita.com/yoichiro6642/items/d446256e0bd709e2d76b

https://github.com/yeoman/generator-chrome-extension

$ npm install -g yo bower gulp 次に、Chrome拡張機能のコードテンプレートを生成するためのジェネレータをインストールします。 $ npm install -g generator-chrome-extension これでコードを生成するための準備が整いました。ディレクトリを新規に作成して、その中にコードを生成させます。 $ mkdir my_extension $ cd my_extension $ yo chrome-extension すると、いろいろ質問されます。これに全てENTERキーのみで答えていきます。 ? What would you like to call this extension? my_extension ? How would you like to describe this extension? My Chrome Extension ? Would you like to use UI Action? No ? Would you like more UI Features? ? Would you like to set permissions? 全ての質問に答えた後、自動的にコードがいくつか作成され、さらに依存ライブラリのダウンロードが自動的に行われます。 create bower.json create package.json create gulpfile.babel.js create .gitignore create .gitattributes create .bowerrc create .jshintrc create .editorconfig create app/manifest.json create app/scripts.babel/background.js create app/scripts.babel/chromereload.js create .babelrc create app/_locales/en/messages.json create app/images/icon-16.png create app/images/icon-128.png create test/spec/test.js create test/index.html

I'm all done. Running npm install & bower install for you to install the required dependencies. If this fails, try running the command yourself.

... これでコードの生成は完了です。さっそく作成されたChrome拡張機能をChromeに登録してみたいところですが、一つだけ前準備が必要です。生成されたJavaScriptコードはapp/scripts.babelというディレクトリに入っているのですが、ECMAScript 2015で書かれているために、そのままだとChromeで実行できません（使っているChromeのバージョンでサポートされていない構文を使った時の話）。そのため、コードを修正したら、gulpによってビルド作業を行う必要があります。 一見面倒そうな作業ですが、「何かコードを修正したら、それを検知してビルドを行い、さらにChromeに再読み込みさせる」ということまでやってくれるようになっています。以下のコマンドを実行してみて下さい。 $ gulp watch すると、以下のような出力がされます。 [08:06:32] Requiring external module babel-core/register [08:06:34] Using gulpfile .../my_extension/gulpfile.babel.js [08:06:34] Starting 'lint'... [08:06:35] Starting 'babel'... [08:06:37] Starting 'html'... [08:06:38] Finished 'html' after 1.53 s [08:06:39] Finished 'lint' after 4.51 s [08:06:39] Finished 'babel' after 3.28 s [08:06:39] Starting 'watch'... [08:06:39] Finished 'watch' after 301 ms [08:07:28] Starting 'lint'... [08:07:28] Starting 'babel'... [08:07:29] Finished 'lint' after 108 ms [08:07:29] Finished 'babel' after 122 ms この状態のまま、Chromeにこの拡張機能を登録します。chrome://extensionsページを表示して、デベロッパーモードにチェックを入れます。そして、「パッケージ化されていない拡張機能を読み込む...」ボタンを押します。 chrome_extension_1.png ディレクトリを聞いてくるので、先ほどコードを生成したディレクトリ内のappディレクトリをしていします。コードを生成したディレクトリではないことに注意しましょう。正しく登録されれば、以下のようにmy_extension拡張機能が表示されたはずです。 chrome_extension_2.png まだ何の機能も持っていないので、Chromeの外観的にも何も変化は起きません。一応動作していることを確認するために、上記の中にある「バックグラウンド ページ」というリンクをクリックして下さい。DevToolsが表示され、以下のように出力されているはずです。 chrome_extension_3.png ここで、自動再読み込み機能が働くかどうか試してみましょう。テキストエディタなどで、app/scripts.babel/background.jsを開きます。以下のようにして、1行追加してみてください。 'use strict';

chrome.runtime.onInstalled.addListener(details => { console.log('previousVersion', details.previousVersion); });

console.log(''Allo 'Allo! Event Page'); // 以下の行を追加 console.log(chrome.runtime.getManifest().name); 保存した直後に、gulpを実行したシェルに以下のような表示が追加されていると思います。 [08:09:36] Starting 'lint'... [08:09:36] Starting 'babel'... [08:09:36] Finished 'lint' after 76 ms [08:09:36] Finished 'babel' after 89 ms [08:09:36] .../my_extension/app/scripts/chromereload.js reloaded. [08:09:36] .../my_extension/app/scripts/background.js reloaded. そして、先ほど開いたDevToolsの表示が変わっていることに気がつくでしょう。 chrome_extension_4.png このように、いちいちChrome側でリロードすることなく、コードを編集したらすぐに動作確認ができるようになっています。これは本当に便利ですので、活用していきましょう。 manifest.json Chrome拡張機能で唯一必須となるmanifest.jsonファイルですが、これはyeomanによって自動生成されたものに追記していくことになります。誰が書いてもさほど変わらない記述内容になるはずです。以下のようになるでしょう。 { "name": "MSG_appName", "version": "0.0.1", "manifest_version": 2, "description": "MSG_appDescription", "icons": { "16": "images/icon-16.png", "128": "images/icon-128.png" }, "default_locale": "en", "background": { "scripts": [ "scripts/chromereload.js", "scripts/analytics.js", "scripts/background.js" ] }, "permissions": [ ... ], "optional_permissions": [ ... ], "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'", "options_page": "options.html", "browser_action": { "default_icon": "images/icon-16.png", "default_title": "タイトル文字列", "default_popup": "popup.html" } }

npm install --global yo gulp bower

# Install the generator:
npm install -g generator-chrome-extension

# Make a new directory, and `cd` get into it:
mkdir my-new-chrome-extension && cd $_

# Generate a new project
yo chrome-extension

# Transform updated source written by ES2015 (default option)
gulp babel

# or Using watch to update source continuously
gulp watch

# Make a production version extension
gulp build