从 Chrome 上的 Greasemonkey 脚本将 JS 函数注入页面

Question

我有一个 Greasemonkey 脚本，可以在 Firefox 和 Opera 中正常运行。然而，我很难让它在 Chrome 中工作。问题是将一个函数注入到页面中，该函数可以由页面中的代码调用。到目前为止我正在做的事情如下：

首先，我获得了对 Firefox 的 unsafeWindow 的帮助器引用。这使我能够为 FF 和 Opera（以及 Chrome，我认为）拥有相同的代码。

var uw = (this.unsafeWindow) ? this.unsafeWindow : window;

接下来，我将一个函数注入到页面中。它实际上只是一个非常薄的包装器，除了在我的 GM 脚本上下文中调用相应的函数之外什么也不做：

uw.setConfigOption = function(newValue) {
    setTimeout(setConfigOption, 0, newValue);
}

然后，我的脚本中就有相应的函数：

setConfigOption = function(newValue) {
    // do something with it, e.g. store in localStorage
}

最后，我将一些 HTML 注入到页面中，并带有一个调用该函数的链接。

var p = document.createElement('p');
p.innerHTML = '<a href="javascript:setConfigOption(1)">set config option to 1</a>';
document.getElementById('injection-point').appendChild(p);

总结一下： 在 Firefox 中，当用户单击该注入的链接时，它将在 unsafeWindow 上执行函数调用，然后触发超时，在我的 GM 脚本上下文中调用相应的函数，然后执行实际处理。 （如果我错了，请纠正我。）

在 Chrome 中，我只是收到“未捕获的引用错误：setConfigOption 未定义”错误。事实上，在控制台中输入“window.setConfigOption”会产生“未定义”。在Firebug和Opera开发者控制台中，都有该功能。

也许还有另一种方法可以做到这一点，但是我的一些函数是由页面上的 Flash 对象调用的，我认为这使得我有必要在页面上下文中拥有函数。

我快速浏览了 Greasemonkey wiki 上的 unsafeWindow 的替代品，但它们看起来都一样很丑。我在这里完全走错了路还是我应该更仔细地研究这些？

解决方案：我遵循了最大 S。'建议，它现在可以在 Firefox 和 Chrome 中使用。因为我需要对页面可用的函数必须回调到常规函数，所以我将整个脚本移至页面，即它完全包装到他称为“main()”的函数中。

为了让这个额外的丑陋的黑客行为变得更容易忍受，我现在至少可以放弃使用 unsafeWindow 和wrappedJSObject。

我仍然没有设法让 Greasemonkey wiki 中的 内容范围运行程序 正常工作。它应该做同样的事情，而且似乎执行得很好，但例如，我的函数永远无法被页面中的 元素访问。我还没弄清楚这是为什么。

Answer 1

与 Chrome 页面上运行的代码进行通信的唯一方法是通过 DOM，因此您必须使用一些技巧，例如在代码中插入

编辑：Nice Alert 扩展程序执行此操作的方式如下：

function main () {
  // ...
  window.alert = function() {/* ... */};
  // ...
}

var script = document.createElement('script');
script.appendChild(document.createTextNode('('+ main +')();'));
(document.body || document.head || document.documentElement).appendChild(script);

Answer 2

我有这个：

contentscript.js：

function injectJs(link) {
var scr = document.createElement('script');
scr.type="text/javascript";
scr.src=link;
document.getElementsByTagName('head')[0].appendChild(scr)
//document.body.appendChild(scr);
}

injectJs(chrome.extension.getURL('injected.js'));

injected.js：

function main() {
     alert('Hello World!');
}

main();

Answer 3

其他答案要么强制您使用 函数表达式，导入 外部附加文件或使用长补丁黑客。

此答案将直接从源代码将 JavaScript 添加到页面中。它将使用 ECMAScript 6 (ES6) 模板文字轻松地将多行 JavaScript 字符串放到页面上。

var script = document.createElement('script'); 
script.type = "text/javascript"; 
script.innerHTML = ` 
   function test() {
      alert(1);
   }
`;
document.getElementsByTagName('head')[0].appendChild(script);

请注意反引号 `` 定义多行字符串的开头和结尾。

Answer 4

我快速浏览了 Greasemonkey wiki 上的unsafeWindow 的替代品，但它们看起来都很丑。我是否完全走错了路，或者我应该更仔细地研究这些？

你应该看看，因为这是唯一可用的选择。我更喜欢使用位置黑客。

myscript.user.js：

function myFunc(){
  alert('Hello World!');
}

location.href="javascript:(function(){" + myFunc + "})()"

example.com/mypage.html

<script>
myFunc() // Hello World!
</script>

当然，它很丑。但效果很好。

---

Max S.提到的Content Scope Runner方法比location hack更好，因为它更容易调试。