はじめに

今日、チームメンバーがSlackの個室で

masterが進んだ時に意味不明なのでGitHub上のソースコードへのリンク書くときは
masterではなくコミットを明示的に指定するようにしているけれどこれがけっこう面倒
該当のファイル > history > 最新のコミットクリック > view  でようやく辿り着く。もっと楽できないかな

と呟いていて、確かに！と思ったので、試しにChrome拡張を作ってみました。

ttskch/github-file-permalink

久しぶりすぎて作り方をほぼ忘れてたんですが、yeoman/generator-chrome-extensionを使ったらめっちゃ簡単に作れたので、せっかくなので記事に残しておきます。

なお、今回はcontent scripts形式の拡張を作る前提でお話しします。

免責

本当に難しいことを考えずにささっと作るための手順だけを解説している記事なので、その点ご了承ください :bow:

Step 1. Yeomanで雛形を作成

その前に必要に応じて事前準備。

$ npm install yo grunt-cli bower generator-chrome-extension --global

では、準備開始。

$ cd /path/to/sample-extension
$ yo chrome-extension
? What would you like to call this extension? sample 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? Content Scripts
? Would you like to set permissions? # 何も選択せずEnter

npm installとbower installが始まります。5分〜10分ぐらい待てば完了します。

ちなみに、2015/12/09現在、yeoman/generator-chrome-extensionのmasterのソースはGruntからgulpに移行されているようですが、まだnpmパッケージには反映されていないという状況です。
この記事を公開して割とすぐにgulpに変わってしまうかもしれませんが、適宜読み替えてご利用ください :bow:

Step 2. 開発中の拡張をChromeにインストール

開発モードで拡張機能をChromeにインストールして、動作確認しながら開発を進めていきます。

が、この時点ではまだjsのコンパイルが実行されておらず、このままだと必要なディレクトリ（app/scripts）がなくてChromeに怒られます。なので、以下のようにして一度コンパイルを実行しましょう。

$ grunt babel

これで、app/scriptsにコンパイル済みのjsファイルが展開されたはずです。では、インストール作業を始めましょう。

chrome://extensions を開いて、「デベロッパーモード」をONにして「パッケージ化されていない拡張機能を読み込む…」で/path/to/sample-extension/appを選択します。

image

これで開発途中の拡張機能がインストールされます。

Step 3. 開発

jqueryをインストール

content scriptsをささっと書くならやっぱりjqueryを使いたいですね。

というわけでとりあえずjqueryを入れましょう。

$ bower install jquery --save

これでapp/bower_components配下にインストールされます。

マニフェストファイル（app/manifest.json）にも設定が必要です。

{
  "content_scripts": [
    {
      "js": [
+       "bower_components/jquery/dist/jquery.min.js",
        "scripts/contentscript.js"
      ]
    }
  ]
}

また、拡張機能の動作対象としたいサイトが決まっている場合は、URLパターンも修正します。

{
  "content_scripts": [
    {
      "matches": [
+       "https://github.com/*"
-       "http://*/*",
-       "https://*/*"
      ]
    }
  ]
}

content scriptsを書く

スクリプトはapp/contentscript.jsに書きます。

'use strict';

$(function () {
    $('body').css('background-color', '#f00');
});

書いたらコンパイルして拡張機能をリロードします。

$ grunt babel

image

で、https://github.com へ行ってみると…

image

ギャー！バッチリ動作していますね。

watchタスクを使う

grunt watchを使うとjsのコンパイルを自動化してくれるので便利です。

$ grunt watch

この状態でapp/contentscript.jsを修正してみてください。'$' is not defined.とjshintに怒られるはずです。

というわけで設定を変更しておきましょう。.jshintrcに以下の1行を追記するだけです。

{
  "globals" : {
+   "$": true,
    "chrome": true,
    "crypto": true,
  }
}

これで怒られなくなるはずです。

Step 4. 配布

無事に開発が完了したら、配布物を作成しましょう。

Gruntで配布用にビルドします。

$ grunt build

これでdistディレクトリに必要なファイルが一式生成されます。

ちなみに、buildを実行するとマニフェストファイルのバージョン番号が自動で1つ上がるので、注意が必要です。

次にこのファイル一式をChromeでパッケージ化します。

chrome://extensions を開いて、「拡張機能のパッケージ化…」をクリック、「拡張機能のルート ディレクトリ」に/path/to/sample-extension/distを設定します。（「秘密鍵ファイル」は省略でOKです）

image

これで、

  • /path/to/sample-extension/dist.crx
  • /path/to/sample-extension/dist.pem

の2ファイルが作成されます。

dist.pemの方は、拡張機能のパッケージを更新する時に使用して同じ拡張機能のアップデートであることを保証する（なりすましを防ぐ）ための秘密鍵です。

次に同じパッケージを更新する時には、先ほどのパッケージ化ダイアログの「秘密鍵ファイル」にこのファイルを指定します。（省略することもできますが）

ユーザーに配布するのはdist.crxの方です。 このファイルを chrome://extensions にドラッグ＆ドロップすることで誰でもインストールできます。

おわりに

少し丁寧に説明したので長文になりましたが、手順さえ分かっていればjsのコードをちょろっと書くだけですぐにChrome拡張が作れそうですよね。

日々のちょっとした作業の効率化にでもお役立ていただければ幸いです。