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

Question

我正在进行扩展。用户双击页面上的某个术语，并通过侧面板弹出窗口获取数据 我获得的数据被格式化并存储在一个名为innerDiv的div中，其中class为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。问题依然存在。

Manifest.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，我遇到了这个问题，并通过提出建议并从internal.css删除我的CSS文件解决了这个问题。

这可能会破坏您的某些扩展程序 - 因为您可能希望使用自定义CSS设置普通页面的样式。为了解决这个问题，我创建了两个CSS文件external.css和popup.html。内部文件具有我external.css的所有样式，外部具有我实际想要应用于扩展用户的DOM的CSS。最后，我在content_scripts中仅引用了var streamEvent = connection.streamEvents['stream-id']; var mediaStreamObject = streamEvent.stream; var videoFreshURL = URL.createObjectURL(mediaStreamObject); yourVideo.src = videoFreshURL; 。