内容脚本和背景通信

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"] 
     } 
    ] 
} 

内容脚本：

$(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); 
}); 

背景HTML的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开发工具显示未定义。我尝试了各种组合，但是还不能完全掌握听众和请求。

我真的很想看到一个干净的示例，只显示如何从每个站点调用方法。

Answer 1

我看到两个问题与您的代码。 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如何通过。