[英]Content Script and Background Communication
我希望为特定站点创建扩展名,以提供他们当前没有的其他格式和共享选项。
我在使事情进行正确沟通方面遇到问题,似乎没有一个明确列出的例子。
表现:
{
"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开发工具显示未定义。 我尝试了各种组合,但还不能完全掌握听众和请求。
我真的很想看到一个干净的示例,该示例仅显示了如何从每个站点调用方法。
我发现您的代码有两个问题。 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
的传递方式。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.