chrome.tabs.create/executeScript > 调用属于页面的函数

Question

我正在为 Google Chrome 开发一个扩展程序，我遇到的问题是我需要能够调用属于在选项卡中打开的网页的 JavaScript 函数。

具体来说，该网站是我的网站，因此我知道该功能确实存在。该函数基于字符串值做了很多事情。我希望用户能够突出显示任何网页上的文本，单击 Chrome 扩展程序中的一个按钮，该按钮会自动加载我的网页并使用突出显示的文本作为其值调用该函数。

这是我目前得到的：

chrome.tabs.create({ url: "https://mywebsite.com" }, function (tab) {
    var c = "initPlayer('" + request.text + "');"; ////'request.text' is the highlighted text which works
    chrome.tabs.executeScript(tab.id, { code: c });
});

但 Chrome 控制台显示：“未捕获的 ReferenceError：未定义 initPlayer。”

我知道该功能确实存在，因为它在我自己网站上的代码中。

非常感谢任何帮助。谢谢！

Answer 1

这是因为 页面 和 内容脚本 在两个独立的 javascript 上下文中运行。这意味着内容脚本无法直接访问页面内的函数和变量：您需要将脚本注入页面本身以使其工作。

这是一个简单的解决方案：

chrome.tabs.create({url: "https://mywebsite.com"}, function (tab) {
    var c = "var s = document.createElement('script');\
        s.textContent = \"initPlayer('" + request.text + "');\";\
        document.head.appendChild(s);"
    chrome.tabs.executeScript(tab.id, {code: c});
});

注意：自 2021 年 1 月起，请使用 Manifest V3 和 chrome.scripting.executeScript() 而不是 chrome.tabs.executeScript()。

使用上面的代码你基本上会：

1. 创建标签
2. 将代码（变量c）作为内容脚本注入其中：
3. 使用要在页面上执行的代码创建脚本
4. 在页面中注入脚本，因此在页面上下文中运行其代码