使用内容脚本删除一个dom元素 [英] Using content script to remove a dom element

问题描述

我正在创建一个相当简单的Chrome扩展。所有它需要做的是每当我访问一个特定的网站时删除两个dom元素。

问题是我的脚本在$（document）.ready时运行，并检查我正在查找的两个元素是否存在。这两个元素不存在，然后我的脚本不执行它所需的任务。脚本运行后，当网站实际插入元素的HTML。所以我的脚本基本上跑得太早了。

似乎并不像document.ready实际上等待所有元素出现。有没有解决这个问题的方法？

解决方案

最好的方法是使用 MutationObserver 来观察DOM（例如身体或更好但是，要删除这两个元素的直接父项 - 如果您事先知道），直到插入这些元素。只要您检测到每个元素，就可以将其删除（并且当两个元素都被检测到（并移除）时，您可以取消（断开）观察者以节省资源。）

例如：

  var elem1removed = false; 
 var elem2removed = false; 
 var elemParent = document.body; / *或其他* / 
 
 var observer = new MutationObserver（function（mutations）{
 mutations.forEach（function（mutation）{
 if（mutation.addedNodes&& amp; ;（变种添加的节点长度> 0））{
 var node1 = mutation.target.querySelector（< selectorForElem1>）; 
 if（node1）{
 node1.parentNode.removeChild （node1）; 
 elem1removed = true; 
} 
 
 var node2 = mutation.target.querySelector（< selectorForElem2>）; 
 if（node2）{
 node2.parentNode.removeChild（node2）; 
 elem2removed = true; 
} 
 
 if（elem1removed& elem2removed）{
 observer.disconnect （）; 
} 
} 
}）; 
}）; 
 
 observer.observe（elemParent，{
 childList：true，
 subtree：true 
}）; 
  

对于一个操作动态添加元素的相当复杂的示例（以及如何将该技术整合到Chrome扩展中），请参阅 其他答案 。

I'm creating a fairly simple chrome extension. All it needs to do is remove two dom element whenever I visit a specific website.

The problem is that my script runs when $(document).ready and checks if the two elements I'm looking for exist. The two elements don't exist and then my script does not perform it's required task. After the script runs is when the website actually inserts the elements to the html. So my script essentially ran too early.

It doesn't seem like document.ready is actually waiting for all elements to be present. Is there a solution to this?

解决方案

The best approach (imo) is to use a MutationObserver to "observe" the DOM (e.g. the body or better yet, the direct parent of the two elements you want to remove - if you know it beforehand) until those elements are inserted. As soon as you detect each element, you can remove it (and when both have been detected (and removed) you can cancel ("disconnect") the observer to save on resources).

E.g.:

var elem1removed = false;
var elem2removed = false;
var elemParent = document.body; /* or whatever */

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.addedNodes && (mutation.addedNodes.length > 0)) {
            var node1 = mutation.target.querySelector(<selectorForElem1>);
            if (node1) {
                node1.parentNode.removeChild(node1);
                elem1removed = true;
            }

            var node2 = mutation.target.querySelector(<selectorForElem2>);
            if (node2) {
                node2.parentNode.removeChild(node2);
                elem2removed = true;
            }

            if (elem1removed && elem2removed) {
                observer.disconnect();
            }
        }
    });
});

observer.observe(elemParent, {
    childList: true,
    subtree: true
});

For a fairly complex example of manipulating dynamically added elements (and how to incorporate the technique into a Chrome Extension), see this other answer.

这篇关于使用内容脚本删除一个dom元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！