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。我研究了很多关于这个问题的知识。简短的总结就是答案。我在我链接的博客文章中分享了我所学到的一切。

CSS不适用于div我注入页面

1 个答案: