UserScripts & Greasemonkey:调用网站的 JavaScript 函数

IT技术 javascript google-chrome-extension greasemonkey userscripts
2021-01-21 14:54:55

我正在为 Firefox 和 Chrome 创建一个 UserScript 扩展,我正在尝试使用网站 JavaScript 中的一些代码,例如:

function: myFunction(){
    return  Grooveshark.playNextSong();
}

问题是当我测试这段代码时, Grooveshark是一个空引用。

我知道还有其他人这样做了:

见 BetterGrooveshark

但是我不知道为什么我的简单扩展不能调用 Grooveshark 的 JavaScript 函数。

我是否需要将我的脚本“附加”到文档中才能使其工作?: document.document.body.appendChild(script);

Greasemonkey 不是已经注入我的扩展 JavaScript 了吗?有人可以为我澄清这一点。

谢谢。

2个回答

背景

Greasemonkey 不是已经注入我的扩展 JavaScript 了吗?有人可以为我澄清这一点。

Greasemonkey 在沙箱中执行您的脚本,沙箱是一个受限环境,无法直接访问页面中的 JavaScript。早期版本的 Greasemonkey 将脚本直接注入页面,但这引入了严重的安全漏洞。在旧模型中,脚本以浏览器 chrome 的提升权限运行,这允许远程页面使用一些巧妙的 JavaScript访问 Greasemonkey 的内置函数这很糟糕:

Greasemonkey 脚本包含它们自己的 GM_xmlhttprequest 对象,与普通的 xmlttprequest 对象不同,它可以访问自己计算机的任何本地文件或向任意站点发出任意请求,而无需考虑通常适用于 xmlhttprequest 的同源策略。(来源)

当您window今天从 Greasemonkey 脚本访问对象时,您得到的是一个包装对象,它间接引用了实际window的属性。这个包装对象可以安全地修改,但有重要的限制对实际窗口对象的访问由unsafeWindow( 的简写window.wrappedJSObject)提供。使用unsafeWindow重新打开所有 Greasemonkey 的原始安全问题,并且在 Chrome 中不可用。应尽可能避免。

好消息:至少有两种方法可以安全地使用 Greasemonkey 的新安全模型。

脚本注入

既然 Greasemonkey 脚本可以安全地访问 DOM,那么在目标文档的 中注入一个<script>标签就很简单了<head>创建一个这样的函数:

function exec(fn) {
    var script = document.createElement('script');
    script.setAttribute("type", "application/javascript");
    script.textContent = '(' + fn + ')();';
    document.body.appendChild(script); // run the script
    document.body.removeChild(script); // clean up
}

使用起来很简单:

exec(function() {
    return Grooveshark.playNextSong();
});

定位黑客

在某些情况下,脚本注入可能有点过头,尤其是当您只需要修改页面中变量的值或执行单个函数时。位置黑客利用javascript:URL来访问代码的文档的内容。这很像在 Greasemonkey 脚本中运行书签。

location.assign("javascript:Grooveshark.playNextSong();void(0)");

奖金脚本

这是一个完整的 Greasemonkey 脚本,用于演示上述示例。您可以在此页面上运行它。

// ==UserScript==
// @name           Content Function Test
// @namespace      lwburk
// @include        http://stackoverflow.com/questions/5006460/userscripts-greasemonkey-calling-a-websites-javascript-functions
// ==/UserScript==

function exec(fn) {
    var script = document.createElement('script');
    script.setAttribute("type", "application/javascript");
    script.textContent = '(' + fn + ')();';
    document.body.appendChild(script); // run the script
    document.body.removeChild(script); // clean up
}

window.addEventListener("load", function() {
    // script injection
    exec(function() {
        // alerts true if you're registered with Stack Overflow
        alert('registered? ' + isRegistered);
    });
    // location hack
    location.assign("javascript:alert('registered? ' + isRegistered);void(0)");
}, false);
我不知道你所说的“偶尔使用”是什么意思?如果您确定脚本只会在您控制或您绝对信任的页面上执行,您应该只使用 unsafeWindow。您向 unsafeWindow 公开的任何页面都有可能使用此处描述的技术提升其访问权限:groups.google.com/group/greasemonkey-dev/tree/browse_frm/thread/...
2021-03-18 14:54:55
你的新措辞很好。GM wiki 过于偏执和律师式的(这可能是最好的)。这就像警告你永远不要开车,因为你可能会死于车祸。如果您知道目标页面,则使用 unsafeWindow 的风险可以忽略不计。
2021-03-22 14:54:55
unsafeWindow 在 Chrome 中不可用;偶尔在 FF-only 脚本中使用很好。
2021-03-29 14:54:55
尤扎!你的手现在疼吗?
2021-04-07 14:54:55
@PointedEars 最近版本的 Chrome 确实支持unsafeWindow.
2021-04-13 14:54:55

出于显而易见的原因,在您的 GreaseMonkey 脚本(和 Chrome 的用户脚本)中声明的函数和变量与网页声明的函数和变量是分开的。对于 Firefox 中的 GM 脚本,您可以通过unsafeWindow.

安全性和兼容性的最佳方法是使用脚本元素将您的功能注入页面。我在我的用户脚本中使用以下代码段:

function addFunction(func, exec) {
  var script = document.createElement("script");
  script.textContent = "-" + func + (exec ? "()" : "");
  document.body.appendChild(script);
}

"-"这里,使某些功能被解析为以使得表达exec可用于立即执行在添加它。你像这样调用函数:

function myFunction () {
    return Grooveshark.playNextSong();
}

// Inject the function and execute it:
addFunction(myFunction, true);