特定のページの内容を変更するChrome拡張の作り方とデバッグ方法

あるURLのページの内容をちょっと変更するChromeの拡張機能が
作りたくなりました。

jQuery を使って 30 分で Chrome 拡張を作ってみた
コンテント・スクリプト - Chrome Extensions API リファレンス

こちらを参考に作ってみます。



用意するファイル



jqueryを使いたいと思います。
http://jquery.com/download/

こちらから、jquery-2.1.1.min.jsをダウンロードしておきます。

488_01.png


その他に設定を記載するmanifest.json、
プログラム本体のscript.jsを用意します。

フォルダの内容はこのようになりました。

488_02.png



プログラム



manifest.jsonの内容は以下のとおり。


  1. {
  2. "manifest_version": 2,
  3. "name": "sample",
  4. "description": "sample description",
  5. "version": "1.0",
  6. "content_scripts": [
  7. {
  8.     "matches": ["http://symfo.web.fc2.com/*"],
  9.     "js": ["jquery-2.1.1.min.js","script.js"],
  10.     "run_at": "document_end"
  11. }
  12. ]
  13. }





http://symfo.web.fc2.com/というURLにマッチするページを表示したら、
jquery-2.1.1.min.js,script.jsを実行します。

実行するタイミングはdocument_end(ドキュメントを読み込んだ後)としました。



script.jsは以下の通り。


  1. $(function(){
  2.     $("a").each(function(){
  3.         var value = $(this).html();
  4.         
  5.         if(!value) {
  6.             return true;
  7.         }
  8.         
  9.         if(value.indexOf('Symfoware') == -1) {
  10.             return true;
  11.         }
  12.         
  13.         $(this).html('ここだよ!:' + value);
  14.         console.log(value);
  15.     });
  16. });





aタグを検索し、「Symfoware」という文字が含まれていたら、
「ここだよ!」という文字を前方に挿入します。

デバッグ用にconsole.logを仕込んでおきました。




デバッグ



デバッグ方法は、プログラムが実行されるページ、
ここではhttp://symfo.web.fc2.comのページを開いて、
デベロッパーツールを起動すればOKです。





拡張機能の再読み込み



プログラムを編集したら、必ず再読み込みを実行します。
再読み込みをしてなくて、プログラムが実行されずはまりました。

488_03.png




結果




狙い通り、ここだよ!という文字が挿入されました。
console.logも出力されています。

488_04.png

関連記事

コメント

非公開コメント

プロフィール

Author:symfo
blog形式だと探しにくいので、まとめサイト作成中です。
Symfoware まとめ

PR




検索フォーム

月別アーカイブ