如何使用 JavaScript 创建 Chrome 扩展来隐藏或删除页面元素？答案

【问题标题】：How to create a Chrome Extension to Hide or Remove a Page Element using JavaScript?如何使用 JavaScript 创建 Chrome 扩展来隐藏或删除页面元素？
【发布时间】：2020-12-28 09:48:22
【问题描述】：

我正在尝试创建一个Chrome Extension 来操作页面上的 HTML。扩展程序应在激活时从页面中删除或隐藏某些元素。

我创建了一个简单的manifest.json 文件：

{
  "manifest_version": 2,

  "name": "hide-msgs-ext",
  "version": "0.0.1",
  "description": "Hide msgs extension",

  "content_scripts": [{
    "js": ["content.js"],
    "matches": ["https://website.example.com/*"],
    "run_at":  "document_idle"
  }]

}

还有一个脚本content.js，它应该删除/隐藏我所有的目标元素：

var elements = document.querySelectorAll('div.card');
for (var i = 0, l = elements.length; i < l; i++) {
  subElement = elements[i].querySelector(':scope div.card-body');
  if (subElement.firstChild.tagName != 'A') {
    elements[i].style.display = "none";
  }
}

如果我在 chrome 控制台中执行上述脚本，我可以隐藏我想要的所有元素，并且不会触发任何错误。但是我不知道如何使它在扩展中工作。

有人能指出我正确的方向吗？提前谢谢你！

【问题讨论】：

在 chrome 控制台中运行它是否有效？有什么错误吗？
它是否在页面加载之前运行？ document.onload = ....
@JasonGoemaat，它在控制台中工作得很好，没有错误。
如果内容是由javascript创建的，您可能需要设置一个计时器以便稍后运行您的脚本。挂钩到页面正在运行的任何框架可能太困难了，但是您可以将代码包装在 function myFunction() {} 中并执行“setTimeout(myFunction, 5000)”来检查它。如果解决了问题，您可以查看“MutationObserver”并监听 dom 更改，以便立即删除它们。
要验证您的脚本正在加载并且该函数正在从内容脚本运行，请将您的代码包装在一个函数中并在脚本末尾调用它，然后执行console.log('Script loaded!') 或其他操作。然后，当您看到您认为应该删除的卡片时，通过转到 chrome 控制台并从下拉列表中选择脚本的上下文（最初显示为“顶部”）来测试代码，并尝试在控制台中运行您的函数。如果可行，请尝试上述超时...

标签： javascript html dom google-chrome-extension code-injection

【解决方案1】：

听起来内容可能是在页面加载后由 javascript 创建的，因此您需要等待它出现。您可以将代码包装在一个函数中并在超时后执行它：

function hideCards() {
  var elements = document.querySelectorAll('div.card');
  for (var i = 0, l = elements.length; i < l; i++) {
    subElement = elements[i].querySelector(':scope div.card-body');
    if (subElement.firstChild.tagName != 'A') {
      elements[i].style.display = "none";
    }
  }
}

// execute after a second to give the page time to create the
// elements you want to remove
setTimeout(hideCards, 1000);

如果您希望它在页面的整个生命周期中都能正常工作并且非常快速，您可以尝试使用MutationObserver。这使您可以侦听 DOM 更改。这是如何使用它的示例。 “添加项目”按钮添加一个新项目，每个其他项目都有“删除我”类。 MutationObserver 执行一个函数，该函数自动删除任何添加到该类的 LI 节点，因此它们不会出现：

const observer = new MutationObserver(function(mutations) {
  let added = [];
  for (let i = 0; i < mutations.length; i++) {
    let m = mutations[i];
    for (let j = 0; j < m.addedNodes.length; j++) {
      let n = m.addedNodes[j];
      if (n.tagName === 'LI' && n.classList.contains('remove-me')) {
        added.push(n);
      }
    }
  }
  added.forEach(element => element.remove())
});

const config = { subtree: true, childList: true };
observer.observe(document.body, config);
 
let index = 0;
document.getElementById('btnAddItem')
.addEventListener('click', (event) => {
  let li = document.createElement('li');
  if (index & 1 == 1)  li.classList.add('remove-me');
  li.innerText = `Item ${index++}`;
  document.getElementById('myList').appendChild(li);
});

<ol id="myList">
  <li>First Item</li>
</ol>

<button id="btnAddItem">Add Item</button>

【讨论】：