ウェブブラウザである Chrome の機能を拡張する Chrome extension を作ってみます。今回は試しに
　Chrome でアマゾンの商品ページを見ている時に、そのページ内の ASIN コードを取り出して表示する
というシンプルな機能を実装してみます。

この Chrome 拡張機能の開発方法に関してはこちらに公式ドキュメントがあります。が、Chrome 自身のバージョンアップにともなって機能変更が加わり、それが混乱を招いてしまっている側面はあると思っています。今回紹介する内容はとりあえず 2016/Jun/23 時点では動くことを確認していますが、将来的な保証はないことを最初にお断りしておきます。

今回用意するファイルは次の３つです：

ファイル名	用途・コメント
jquery-3.0.0.min.js	jQuery ライブラリ。ここから最新版をダウンロードし、manifest.json 内にファイル名を記述する
manifest.json	拡張機能の定義ファイル
script.js	拡張機能の実装ファイル

まず jQuery の最新版ライブラリを使います。jQuery のダウンロードページから最新バージョン（今回の例では 3.0.0）をダウンロードします。

次に定義ファイルである manifest.json です。Chrome 拡張機能を作る際に必須の JSON ファイルで、Chrome はこのファイルの中に記述されている通りに拡張されます。今回は以下の様な内容にします：

{
  "name": "AmazonASIN",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "Amazon商品ページからASINコードを取り出す拡張",
  "content_scripts": [
    {
      "matches": ["http://www.amazon.co.jp/*","https://www.amazon.co.jp/*"],
      "js": ["jquery-3.0.0.min.js","script.js"]
    }
  ]
}

この中では以下の様な指定を行っています：

• 拡張の名前（name）は "AmazonASIN"
• 拡張のバージョン（versoin）は 0.0.1
• マニフェストのバージョン（manifest_version）は2（固定）
• description に拡張の説明を記述
• content_script 内にスクリプトの条件を指定
• このスクリプトは http(s)://www.amazon.co.jp/ 内のページを参照している時だけ動く
• 動くファイルは前述の jquery-3.0.0.min.js と後述の script.js

簡単に言うと、アマゾン（www.amazon.co.jp）のページを参照している時に script.js が動く、という指定をしています（jquery-3.0.0.min.js は script.js 内で利用しているのでここに記述しています）。

そして今回紹介する拡張機能の本体となるのが script.js です。この内容は以下のとおりです：

$(function(){
 $(".col2 .pdTab tr:first").each(function(){
  var tr = $(this);
  var td1 = tr.children('td:first');
  if( td1.html() == "ASIN" ){
    var td2 = tr.children('td:nth-child(2)');
    var asin = td2.html();
    window.prompt( "ASIN", asin );
  }
 });
});

jQuery にある程度詳しい人であれば簡単に理解できそうなほどシンプルな内容ですが、中身を一応紹介します。

まず最初に、自動化したい作業はこんな感じです：

1. アマゾンの商品ページを開いたら、
2. 「登録情報」の「ASIN」と書かれた箇所（下図参照）を探して、
3. その横の ASIN 番号を取り出して表示する

↑この機能、アフィリエイターに需要ありますかね・・・


そしてこのアマゾン商品ページの HTML ソースを見ると、『「登録情報」の「ASIN」と書かれた箇所』というのが、『col2 クラスを持った div パート内の、pdTab クラスを持った div 内のテーブルの、最初の tr パート』であることがわかります：




この tr の２番目の td に目的の ASIN 番号が書かれているのでこれを取り出すのが目的です。というわけで、上記の script.js 内では以下の様な処理を記述しています：

• Amazon のページでのみ以下を実行する（manifest.json で指定済み）
• ページが全て読み込まれた後に以下を実行
• col2 クラス以下の pdTab クラスの更に下にあるテーブルの最初の１行（最初のtr）を取り出す
• 取り出した tr 内の１つ目の td を取り出し、その中に "ASIN" と書かれていることを確認する
• 確認できたら tr の２つ目の td （ここに ASIN 番号がある）を取り出して、その HTML 文字列を取り出す
• 取り出した ASIN 番号を画面に表示する

これで処理の記述はできたので、上記３つのファイルを全て同じフォルダ（下図では c:\tmp\amazon_extension）内に保存します：



作成した Chrome 拡張はデベロッパーモードの Chrome 内に読み込ませて利用することができます。Chrome を起動後、右上のメニューボタンから　「その他のツール」-「拡張機能」　を選択します：



Chrome 拡張機能のメニューが表示されたら、右上の「デベロッパーモード」にチェックを入れます。これでデベロッパーモードになったので、更に「パッケージ化されていない拡張機能を読み込む」ボタンをクリックします：



先程作成した３つのファイルを格納したフォルダ（上記の例では C:\tmp\amazon_extension\）を指定して拡張機能を読み込みます：



拡張機能にエラーがなければ正しく読み込まれ、拡張機能一覧に表示されます。「有効」にチェックが入っていることを確認してください（チェックを外すと、この拡張機能は動きません。またその右のゴミ箱アイコンをクリックすることで拡張機能を Chrome から削除することもできます）：



では改めてアマゾンの商品ページを見てみましょう。例えばこのページを参照してみると、、
https://www.amazon.co.jp/gp/product/B014CGROJW/


商品ページがロードされた後に以下の様なダイアログが表示され、ASIN コードが取り出されたことが確認できるはずです（必要であれば、ここからコピーできます）：



Chrome 拡張機能のごくシンプルな例ですが、こんな感じで作れます。実体はクライアントサイドの JavaScript ですが、クロスサイトスクリプティングの制約を受けることなく AJAX が実行できたりするので、この中で外部連携も含めた様々な処理を記述できます。例えばここで紹介されているサンプルでは Chrome 拡張から Watson API を実行していたりします：
女優・ディベロッパー池澤あやかさんが作成したアプリとは？ ｜Bluemix Developers Lounge

タグ ：

javascript

chrome

extension

amazon

asin