无法在具有内容脚本的网站上添加新的 HTML 元素

Question

所以，我一直在尝试制作一个 Web 扩展，以帮助将我的应用程序更好地与网站集成，但我一直坚持注入新的

a

标签。我要整合的网站是 https://modrinth.com/(mod or resourcepack or shader)/foo

src/onMod.js

const main = () => {
  let inputGroup = document.getElementsByClassName("input-group")[0];
  let mcmodpackmanagerbutton = document.createElement("a");

  let slug = "sodium"; // Place holder

  slug = window.location.href.split("/")[4]; // This thing doesn't change

  mcmodpackmanagerbutton.href = "mcmodpackmanager://modrinthopen?id=" + slug;
  mcmodpackmanagerbutton.className = "iconified-button";
  mcmodpackmanagerbutton.innerHTML = "Open with Minecraft Modpack Manager";
  mcmodpackmanagerbutton.setAttribute("rel", "noopener nofollow"); // Other links on modrinth.com use this

  console.log("SLUG: " + slug);

  inputGroup.appendChild(mcmodpackmanagerbutton);
};

main();

我一直期待这样的事情：https://i.imgur.com/UdkQ5ZM.png， 但是按钮出现了一秒钟然后消失了

Answer 1

很像 React，Vue。 js 使用虚拟 DOM，它是实际 DOM 的表示或副本；它也被称为“影子 DOM”，使用 JavaScript 呈现。

但是，如果值更改或任何其他触发，元素 html 可能会被实际的虚拟 DOM 内容覆盖。

我只能想出一个零散的方法来解决这个问题，并使用

MutationObserver

来检测父元素的变化并立即重新添加按钮。它甚至可能不会闪烁。

// select the element to observe
const targetElement = document.querySelector('#target-element');

// create a button element
const button = document.createElement('button');
button.textContent = 'button one - revived';

// create a mutation observer instance
const observer = new MutationObserver(mutations => {
  if (!targetElement.querySelector("button")) {
    targetElement.appendChild(button);
  }
});

// configure the observer to watch for child node removals
const config = {
  childList: true
};

// start observing the target element for changes
observer.observe(targetElement, config);

<div id="target-element" style="padding:20px">
  <button>button one</button>
</div>

<button onclick="document.querySelector('#target-element button').remove();">remove button 1</button>