Userscript - 有沒有辦法將jquery代碼注入到angularjs dom中？

Question

所以我試圖爲一個網站創建userscript。我不能更改網站的任何源代碼，因爲它不是我的。 網站到處都是使用AngularJS控制器。 我正在研究幾天如何做到這一點，但沒有成功。

所以我試圖注入代碼$(".nav").after("<div>test</div>");當我通過Firefox開發者控制檯執行它時，它正在工作，但爲什麼當我嘗試通過用戶腳本執行它時，它不起作用。

我沒有添加$(function() { ... }); thingy代碼，所以它在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值得轉換。