Symfoware

Symfowareについての考察blog

特定のページの内容を変更する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

関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2014/10/28(火) 23:02:48|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<Chrome拡張から、外部リソースへのアクセスを許可する(permissions) | ホーム | Google Chrome(38.0.2125.104) 拡張機能のデバッグ方法>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://symfoware.blog68.fc2.com/tb.php/1515-fa85e584
この記事にトラックバックする(FC2ブログユーザー)