用戶腳本-有沒有辦法將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值得切換。