1

私は問題があります ..

「DOMNodeInserted」が想定どおりに機能していません。ちゃんと使えているか不安です。

何か案は ？

4

1 に答える 1

4

編集: MutationObserverを使用したより良いアプローチについては、さらに下にスクロールしてください。

ページの読み込み時に DOM を構築する場合、DOMNodeInsertedイベントは発生しません。HTML がレンダリングされる前にフィルタを通過する方法はないと思います (または、ある場合はわかりません)。

代わりにフィルター処理をDOMContentLoaded行うと、ユーザーが違いに気付かないほど (または、少なくとも気にしすぎない) 十分な速さになる可能性があります。

もちろん、DOM の動的な変更 (AJAX 経由で読み込まれたコンテンツなど) をリッスンし、動的にフィルタリングする必要があります。MutationObserverはそのために役立つかもしれません。

このアプローチを開始するには、このデモ コードをご覧ください。

manifest.json
(これが機能するために、次のいずれも必要ないことに注意してください:
browser_action、page_action、)backgroundpermissions

...
"content_scripts": [
    {
        "matches": [
            "http://stackoverflow.com/*",
            "http://www.stackoverflow.com/*"
        ],
        "js":         ["content.js"],
        "run_at":     "document_start",
        "all_frames": true
    }
],
...

content.js

// Implement your filtering mechanism
// Good luck trying not to break the HTML :)
var doFilter = function(elem) {
    // Demo filtering: highlighting links 
    // (and possibly breaking HTML in many pages)
    elem.innerHTML = elem.innerHTML.replace(
        /(<a[^>]*)(>[^<]*<\/a>)/ig,
        "$1 style=\"background-color: yellow;\"$2");
};

window.addEventListener("DOMContentLoaded", function() {
    doFilter(document.body);
});

アップデート

MutationObserverを使用した別のアプローチを次に示します。これはさらに高速です。このアプローチを使用すると、変更はユーザーに対して事実上「透過的」になります。
(これには、動的なノードの更新を処理するなどの微調整が必​​要です。)

content.js

// Highligth the element by giving it a yellow background
var doFilter = function(link) {
    link.style.backgroundColor = "yellow";
}

// Create a MutationObserver to handle events (i.e. filtering <a> elements)
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.addedNodes) {
            for (var i = 0; i < mutation.addedNodes.length; i++) {
                var node = mutation.addedNodes[i];
                if (node.nodeName == "A") {
                    doFilter(node);
                }
            }
        }
    });
});

// Start observing "childList" events in document and its descendants
observer.observe(document, {
    childList:     true,
    subtree:       true
});

MutationObserverアプローチを選択する場合は、この JS ライブラリを使用すると、作業が楽になります: Mutation -summary

于 2013-10-25T07:46:27.920 に答える