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

Question

我正在为谷歌浏览器开发一个扩展程序,我遇到的问题是我需要能够调用属于在选项卡中打开的网页的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});
});

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

1. 创建选项卡
2. 将代码(变量c)作为内容脚本注入其中,该脚本将:
   1. 使用要在页面上执行的代码创建脚本
   2. 在页面中注入脚本,因此,在页面上下文中运行其代码