内容脚本和背景交流

Content Script and Background Communication

本文关键字：背景 脚本      更新时间：2023-09-26

我希望为特定网站创建一个扩展，以提供他们目前没有的额外格式和共享选项。

我在正确沟通方面遇到了问题，似乎没有一个明确的例子。

清单：

{
    "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函数是在后台页面中定义的，而CCD_。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的传递方式。

相关文章：