javascript - 動的に読み込まれたコンテンツを検出するための Chrome 拡張 Javascript

Question

私はクロム拡張アプリを実装しています。タグ (webapp のホームページ) の href 属性を "#" に置き換えたい。問題は、タグが ajax によって動的に読み込まれ、ユーザーの操作によって再読み込みされる可能性があることです。chrome-extension に ajax でロードされた html コンテンツを検出させる方法に関する提案はありますか?

Answer 1

それを行うには2つの方法があります。

最初の解決策は ajax リクエストの処理です

ページ上のすべての ajax リクエストを処理する jQuery には.ajaxComplete()関数があります。

ではcontent script、

var actualCode = '(' + function() {
    $(document).ajaxComplete(function() { 
      alert('content has just been changed, you should change href tag again');
      // chaging href tag code will be here      
    });
} + ')();';
var script = document.createElement('script');
script.textContent = actualCode;
(document.head||document.documentElement).appendChild(script);
script.parentNode.removeChild(script);

2番目の解決策は、コンテンツの変更をリッスンすることです

これはミューテーション イベントで可能です。content script

$(document).bind("DOMSubtreeModified", function() {
    alert("something has been changed on page, you should update href tag");
});

変更を制御している要素を制限するために、いくつかの異なるセレクターを使用する場合があります。

$("body").bind("DOMSubtreeModified", function() {}); // just listen changes on body content

$("#mydiv").bind("DOMSubtreeModified", function() {}); // just listen changes on #mydiv content