javascript - 内容脚本样式表泄漏到页面中

Question

我正在开发一个扩展。用户双击页面上的某个术语并通过侧面板弹出窗口获取数据。
我得到的数据被格式化并存储在一个名为 innerDiv 的 div 中，其类为 inner-div，它是附加到正文中的 div 的子级。
js 部分工作正常，但该页面的 css 覆盖了我的 css，而且扩展样式表泄漏到页面中。它是双向的。

.inner-div{
  position: relative;
  overflow-y: auto;
  color: wheat;
  height: 90%;
  width: 100%;
  text-align: justify;
  font-size: 16px;
}

.inner-div p, h1, h2 , h3, article{
  margin-bottom: 10px;
  color: wheat;
  text-decoration: none;
  border: none;
}

如您所见，我已尽可能使我的 CSS 具体化。因此，具有不同类的 dom 的页面无法继承我的 css。

css渗入页面图片

dom元素和类的图片

我不明白为什么扩展 css 会泄漏到页面中。请帮忙!

编辑:

根据建议将 div 名称更改为更具体的 extension-inner-div。问题仍然存在。

list .json:

{
    "manifest_version" : 2,

    "name" : "QWiki",
    "description" : "", 
    "version" : "1.0",

    "browser_action" : {
      "default_popup" : "Wiki_Viewer.html",
      "default_title" : "QWiki"
    },

    "content_scripts" : [{
      "css": ["inject.css"],
      "matches": ["http://*/*" , "https://*/*"],
      "js" : ["jquery.min.js" , "inject.js"]
    }],

    "permissions" : [
      "activeTab",
      "https://en.wikipedia.org/*"
    ]
}   

Answer 1

只是撞Beslinda N's comment ，我遇到了这个问题，通过采纳该建议并从 content_scripts 中删除我的 CSS 文件解决了这个问题。

虽然这可能会破坏您的某些扩展 - 因为您可能希望使用自定义 CSS 来设置普通页面的样式。为了解决这个问题，我创建了两个 CSS 文件，internal.css 和 external.css。内部文件包含我的 popup.html 的所有样式，外部文件包含我实际想要应用于扩展用户的 DOM 的 CSS。最后，我在 content_scripts 中仅引用了 external.css。