Question

我有问题..

“DOMNodeInserted”无法正常工作。我不确定我是否正确使用它。

有什么想法吗？

Answer 1

<子> 编辑：使用 MutationObserver 进一步向下滚动以获得更好的方法。

在页面加载时构造DOM时，不会触发DOMNodeInserted个事件。我不认为有一种方法可以让HTML在渲染之前通过你的过滤器（或者如果我不知道的话）。

过滤DOMContentLoaded代替，可能足够快，用户不会注意到差异（或者至少不会太烦恼）。

当然，您必须侦听DOM中的动态更改（例如，通过AJAX加载的内容等）并动态过滤它。 MutationObserver 可能会派上用场。

看看这个演示代码，开始使用这种方法：

<强>的manifest.json
（请注意，为此，不需要以下任何一项：
browser_action，page_action，background，permissions）

...
"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

DOMNodeInserted无法正常工作

1 个答案:

的更新