Chrome 扩展程序不编辑页面答案

【问题标题】：Chrome extension not editing pageChrome 扩展程序不编辑页面
【发布时间】：2022-09-27 20:24:39
【问题描述】：

我正在尝试为网站 PCPartPicker 制作 Chrome 扩展程序。它应该找到每个产品，然后找到其中的 <p> 元素以获取它的名称，然后取该名称并添加 \" - Hello there!\" 到它的末尾。

var items = document.getElementsByTagName(\'tr\');
for (var i = 0, l = items.length; i < l; i++) {
    var name = items[i].getElementsByTagName(\'p\');
    name[0].innerText = name + \' - Hello there!\';
}

这可能意味着元素是动态添加的。使用MutationObserver 来检测它们。
我对 JavaScript 真的很陌生，你能提供更多信息并可能提供代码吗？

标签： javascript google-chrome-extension

【解决方案1】：

假设您的扩展程序在上述网站的所有页面上运行，即 pcpartpicker.com，这样的事情应该适用于您的情况。

chrome.webNavigation.onCompleted.addListener(
  (details) => {
    if(details.url.includes('/product/cpu')) {
      startObserver();
    }
  }
)

const startObserver = () => {
  const elem = document.querySelector('.productList--detailed');
  var config = { attributes: true, childList: true, subtree: true };
  var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
  const observer = new MutationObserver(changeProductName);
  observer.observe(elem, config); 
}

const changeProductName = (mutationList, observer) => {
  mutationList.forEach( (mutation) => {
    mutation.addedNodes.forEach( (node) => {
      if(node.nodeName === 'TR') {
        var name = node.getElementsByTagName('p');
        name[0].innerText = name + ' - Hello there!';
      }
    })
  })
}

正如 wOxxOm 所建议的，我们正在使用 MutationObserver 来观察对具有类 productList--detailed 的表的更改。每当添加任何新的tr 元素时，代码都会修改新添加的tr 的第一个p 元素内的文本。你可以阅读更多关于MutationObserverhere的信息。

【讨论】：