从注入的js运行一个函数

Question

我一直在兜圈子，所以我希望能得到一些帮助

这就是我想要实现的目标

1. 用户按下我的扩展程序图标
2. 弹出窗口出现两个按钮，“运行函数 a”和“运行函数 b”
3. 当他们按下按钮时，它会在我自己的 js 文件中运行该函数，该文件是我注入的。
4. 例如，函数 a 可以是计算活动选项卡中某种类型的元素的数量

所以，我可以在页面加载时注入我的 js 文件（这是在我的 contentscript.js 中）

var s = document.createElement('script');
s.src = chrome.extension.getURL('temp-file.js');
s.onload = function() {
    this.parentNode.removeChild(this);
};
(document.head||document.documentElement).appendChild(s);

这行得通，我可以看到正在执行的js

但我能做的是在 temp-file.js 中运行一个函数

例如在我的弹出窗口中

chrome.tabs.executeScript(null, {code:"shows();"});

我明白了：未捕获的 ReferenceError：未定义节目

如果我输入 show();进入控制台，它按预期工作

我认为问题完全在于上下文。我在 popup.js 页面中尝试了各种方法来注入文件，但似乎没有任何效果

有没有人能指出正确的方向

谢谢

授予

Answer 1

我认为问题完全在于上下文。

你是对的。

文件“temp-file.js”已注入主机页面，因此它现在是主机页面上下文的一部分。扩展可能会弄乱它 - 因为它在不同的上下文中。

从注入的 js 运行函数

解决方案：

不确定您要达到的目标。选择适合你的：

1. 拆分注入文件 您要在页面上执行的代码/功能 - 将它们用作内容脚本。 在这种情况下，拆分您的“temp-file.js” - 部分扩展已执行（成为内容脚本的一部分），部分主机页面必须执行（您的代码 sn-p）。

2. 使用自定义事件 使用自定义事件 - 在内容脚本中生成自定义事件 - 监听它注入的脚本。 custom event

Answer 2

你的问题并没有说明你到底想要达到什么目的。

这是我的理解。你想从你的popup.js 对你的contentscript.js 执行一个函数。

如果是这种情况，那么您可以从popup.js 调用contentscript 上的方法，就像这里提到的https://developer.chrome.com/extensions/messaging 一样