使用Chrome扩展名中的content.js注入HTML。 我正在为获取歌曲的歌词制作Chrome Extension。我希望它与YouTube和Spotify互动。 HTML将内容脚本注入Spotify网站时出现问题。我会简单...

Question

：

const popup = document.createElement("div");
popup.innerHTML = `
    <div id="popup" style="position: absolute; top: 0; right: 0; width: 100px; height: 100px; background: red; z-index: 9999999;">
        <p>Some text.</p>
    </div>
`;
document.body.appendChild(popup);

big红色正方形出现在youtube.com上，但没有在open.spotify.com上出现。当我检查元素时，我可以看到

#popup

在两个网站上都存在于

body

元素中的两个网站上。

这里有什么问题？在我的原始扩展中，所有逻辑都可以正常工作，但弹出窗口未显示。

在需要的情况下，如果需要：

contents.js 问题是在open.spotify.com上是CSS样式，它隐藏了没有特定属性的CSS样式：

manifest.json

在

{
    "manifest_version": 3,
    "name": "Name",
    "version": "1.0",
    "description": "Desc.",
    "host_permissions": [
      "https://www.youtube.com/*",
      "https://open.spotify.com/*"
    ],
    "action": {
      "default_title": "Title."
    },
    "background": {
      "service_worker": "background.js"
    },
    "content_scripts": [
      {
        "matches": [
          "https://www.youtube.com/*",
          "https://open.spotify.com/*"
        ],
        "js": ["content.js"]
      }
    ]
  }
  

中定义的html代码，该代码插入另一个。因此，最终插入open.spotify.com页面看起来像这样：

div

Answer 1

body > div:not([id], [class]) {
    display: none;
}

ID“弹出”，并将弹出窗口的内容复制到其中。这样：

content.js

也许有效的是编写自定义CSS代码以覆盖Spotify的有问题的CSS代码，但我没有尝试过。