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

Question

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

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

我确实$(function () { ... });在代码中添加了东西,所以它在DOM准备好之后触发句柄,但它仍然无效.

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

我将不胜感激任何帮助.

Answer 1

Angular在加载页面后很好地修改了DOM,因此您需要某种方法来等待您关心的事件或节点.

此外,您必须保持代码(尤其是jQuery)不会干扰页面的代码.这意味着您应该努力保持沙箱开启.

对于Firefox + Greasemonkey或Chrome + Tampermonkey(或大多数支持该@require指令的引擎),您可以使用waitForKeyElements()实用程序和@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值得转换.