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

Question

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

所以我想注入代码$(".nav").after("<div>test</div>"); 当我通过Firefox开发人员控制台进行操作时，它可以工作，但是当我尝试通过用户脚本进行操作时，为什么它不起作用。

我确实添加了$(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值得切换。