CSS不适用于我注入页面的div

Question

所以我正在制作一个 chrome 扩展程序，当您将鼠标悬停在指向它的超链接上时，它可以有效地为您提供网页预览。

我通过创建一个 div 并用各种项目填充它来做到这一点。问题是由于某种原因，我指定的 css 样式表没有被注入到 div 中，而是 div 采用了其父级（您当前所在的网站）的样式，这是有问题的，因为我无法控制外观.

这是我尝试注入 css 的清单：

{
  "manifest_version": 2,

  "name": "Link Preview",
  "description": "This extension provides a preview of a hyperlinks destination on hover action.",
  "version": "1.0",

  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["jquery-1.11.1.min.js","core.js"],
      "css" : ["style.css"],
      "run_at":"document_end",
      "all_frames": false
    }
  ],
  "browser_action": {
    "default_popup": "popup.html"
  },
  "permissions": [
    "tabs",
    "<all_urls>"
  ],
  "web_accessible_resources": ["index.html","style.css"]

}

这是包含元素的 html 文件。如果我将样式应用于 html 中的项目，它会起作用，但老实说，这样做很痛苦。

  <div id="icon_wrapper">
    <img id="icon_img"
      src="https://i.imgur.com/mLAiR8t.png"
      alt="Webpage Icon" >
  </div>

  <div id="title_wrapper" >
    <h1 id="title_string">
        testing</h1>
  </div>

  <div id="description_wrapper">
    <h1>description</h1>
  </div>

这是无法注入的 CSS，我什至尝试设置 h1 而不是 title_string 的样式，但也没有用：

#title_string {
    background-color: #ffffff !important;
    margin: 3px !important;
    padding: 3px !important;
    font-family: "Times New Roman", Times, serif !important;
    color: #a48938 !important;
}

非常感谢任何帮助，我一直在努力解决这个问题

Answer 1

Xan 是对的，你需要看看at this question。特别是我会指出我的答案here。我研究了几乎所有关于这个问题的知识。简短的摘要在那个答案中。我在链接的一篇博文中分享了我学到的一切。