Symfoware

Symfowareについての考察blog

Chrome拡張から、外部リソースへのアクセスを許可する(permissions)

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

取得したページの内容をキーとして、サーバーに詳細情報を問い合わせる
パターンを考えてみます。



ajaxによる通信



aタグにあるhrefの情報をサーバーに送信。
検索結果を取得するというケースを想定してみます。

前回のプログラムのscript.jsを以下のように変更。


  1. $(function(){
  2.     $("a").each(function(){
  3.         // aタグのhrefをチェック
  4.         var a$ = $(this);
  5.         var href = a$.attr('href');
  6.         
  7.         if(!href) {
  8.             return true;
  9.         }
  10.         
  11.         // サーバーに情報を問い合わせ
  12.         $.ajax({
  13.             type: "POST",
  14.             url: "http://192.168.1.102/sample.php",
  15.             data: {'href':href},
  16.             success: function(msg){
  17.                 if (msg == 'notfound') {
  18.                     return;
  19.                 }
  20.                 
  21.                 a$.html(msg + '番の記事です!:' + a$.html());
  22.             }
  23.         });
  24.     });
  25. });




対応するサーバー側のphpプログラムを適当に作成。


  1. <?php
  2. // POSTパラメーター受け取り
  3. $href = $_POST['href'];
  4. // blog-entryという文字列があるか探す
  5. $index = strpos($href, 'blog-entry-');
  6. // 見つからない場合は処理終了
  7. if (!$index) {
  8.     echo 'notfound';
  9.     return;
  10. }
  11. // 見つかったら、適当にエントリー番号を切り出して返す
  12. echo str_replace('.html', '', substr($href, $index + 11));





修正が終わったら、拡張機能をリロードします。
よくこれを忘れて動かずハマります。

489_01.png


テストでデバッガを起動。
このページを見てみると、エラーになりました。
http://symfo.web.fc2.com/blog/cmd.html


XMLHttpRequest cannot load http://192.168.1.102/sample.php.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'chrome-extension://glnmelhpadjdeefaemeklnplfijpdddk' is therefore not allowed access.



489_02.png





manifest.json



作成した拡張機能に「http://192.168.1.102/sample.php」への
アクセス権がないことがエラーの原因です。

Getting Started: Building a Chrome Extension

こちらを参考に、manifest.jsonへの記載を追加。
アクセス権を与えます。


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




permissionsが今回追加した箇所です。
リスト形式で、アクセスを許可するurlを列挙します。


修正したら拡張機能をリロードして、再度ページにアクセスしてみます。

489_03.png

狙い通り、hrefの内容を元に表示を変更できました。

関連記事

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

  1. 2014/10/29(水) 23:28:31|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<Chrome拡張のパッケージングとイントラネットワーク内でのインストール | ホーム | 特定のページの内容を変更するChrome拡張の作り方とデバッグ方法>>

コメント

コメントの投稿


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

トラックバック

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