コンテンツスクリプトとバックグラウンド通信

Question

特定のサイトの拡張機能を作成して、現在持っていない追加の書式設定と共有オプションを提供したいと考えています。

私は正しく通信するための問題を抱えており、明確にレイアウトされた例はないようです。

マニフェスト：

{ 
    "name": "Test", 
    "description": "Testing.", 
    "version": "1.0", 
    "background_page": "background.html", 
    "permissions": [ 
     "tabs", "http://www.sitedomain.com/*" 
    ], 
    "content_scripts": [ 
     { 
      "matches": ["*://*.sitedomain.com/*"], 
      "js": ["jquery.min.js", "test.js"], 
      "css": ["test.css"] 
     } 
    ] 
} 

コンテンツスクリプト：背景HTMLの

$(document).ready(function() { 
    alert('test js fired'); 
    $("#ColumnContainer div.item").each(function() { 
     $(this).css("background-color", "skyBlue"); 
     var itemId = $(this).children("a.itemImage").attr("href"); 
     $(this).children(".details").append("<a href=\"javscript:void(false);\" onclick=\"gotoItem('" + itemId + "');\">Goto Item</a>"); 

    }); 
}); 
chrome.extension.onRequest.addListener(function (request, sender, sendResponse) { 
    alert('listener request'); 
    alert(request); 
}); 

はJavaScript：

chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) { 
     if (changeInfo.status == "complete") { 
      if (tab.url.indexOf("sitedomain.com") > -1) { 

       chrome.tabs.executeScript(null, {file: "test.js"}); 
      } 

     } 
    }); 
    chrome.tabs.sendRequest(tabId, request, responseCallback); 
    function responseCallback() { 
     alert('response callback'); 
    } 
    function gotoItem(itemId) { 
     alert('goto Item - ' + itemId); 
    } 

上記のコードは、リンクを追加し、クライアントページのスタイルを変更するんsitedomain.comがロードされたとき。しかし、私はgotoItemメソッドを起動する運がなかったので、Chrome Dev Toolsは定義されていないことを示します。私はいろいろな組み合わせを試しましたが、まだリスナーとリクエストを完全に把握することはできません。

私は本当に各サイトからメソッドを呼び出す方法を示しているきれいなサンプルを見たいと思います。

Answer 1

コードに2つの問題があります。 1）gotoItem関数がバックグラウンドページで定義されており、content_scriptsが関数にアクセスできない。 2）content_scriptsとそれらに注入されたページ上のjavascriptは対話できないので、onclickはリンクhtmlの一部になれません。

＃1を修正するには、gotoItem関数をcontent_scriptに移動するのと同じくらい簡単です。

＃2を修正するには、次のようにする必要があります。

$("#ColumnContainer div.item").each(function(){ 
    $(this).css("background-color","skyBlue"); 
    var itemId = $(this).children("a.itemImage").attr("href"); 
    var $link = $('<a href="javscript:void(false);">Goto Item</a>'); 
    $link.click(function() { 
     gotoItem(itemId); 
    } 
    $(this).children(".details").append($link); 
}); 

itemIdの処理方法を変更する必要があります。