Userscript - 有没有办法将 jquery 代码注入 angularjs dom？答案

【问题标题】：Userscript - Is there a way to inject jquery code into angularjs dom?Userscript - 有没有办法将 jquery 代码注入 angularjs dom？
【发布时间】：2014-02-19 01:35:16
【问题描述】：

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

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

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

有办法吗？我非常想了解 AngularJS 的工作原理......

我将不胜感激。

【问题讨论】：

标签： javascript jquery angularjs userscripts

【解决方案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 值得切换。

【讨论】：

谢谢。非常感谢:)