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

Question

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

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

这是我到目前为止得到的:

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 控制台显示:“Uncaught ReferenceError: initPlayer is not defined.”

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

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

Answer 1

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

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

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)作为内容脚本注入(inject)其中，它将:
3. 使用要在页面上执行的代码创建脚本
4. 在页面中插入脚本，因此在页面上下文中运行其代码