Question

所以我正在尝试为一个网站创建用户脚本。我无法更改网站的任何源代码，因为它不是我的。网站到处都在使用AngularJS控制器。我正在研究如何做到这一点，但没有成功。

因此，当我通过Firefox开发者控制台执行此操作时，我正在尝试注入代码$(".nav").after("<div>test</div>");，但是当我尝试通过Userscript执行此操作时，为什么它不起作用。

我确实在代码中添加了$(function () { ... });，所以它在DOM准备好之后触发句柄，但它仍然不起作用。

有办法吗？我迫切希望了解AngularJS的工作原理......

我将不胜感激。

Answer 1

Angular在加载页面后很好地修改了DOM，所以你需要一些方法来等待你关心的事件或节点。

此外，您必须保持代码（尤其是jQuery）不会干扰页面的代码。这意味着你应该努力保持沙箱的开启。

对于Firefox + Greasemonkey或Chrome + Tampermonkey（或大多数支持@require指令的引擎），您可以使用the waitForKeyElements() utility和@grant指令来实现这些目标。

这个完整的示例脚本适用于FF + GM和Chrome + TM：

// ==UserScript==
// @name     _Add a div after .nav elements
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

waitForKeyElements (".nav", addTestDiv);

function addTestDiv (jNode) {
    jNode.after ('<div>test</div>');
}

如果您使用的引擎不支持@require指令（如直接的Chrome用户脚本），请切换！ Tampermonkey值得转换。

用户脚本 - 有没有办法将jquery代码注入angularjs dom？

1 个答案: