CSS not applying to div I inject into page

Question

So I am making a chrome extension that effectively gives you a preview of a webpage when you hover over a hyperlink directed to it.

I am doing this by creating a div and populating it with various items. The problem is for some reason the css stylesheet I am designating is not being injected into the div and instead the div is taking on the styling of its parent (the website you are currently on) which is problematic because I can't control the look.

Here is my manifest where I try to inject the 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"]

}

here is the html file with the elements. If I apply styles to the items within the html it works but to be honest it is a pain to do it this way.

  <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>

Here is the CSS that fails to inject, I even tried styling h1 instead of title_string and that didn't work either:

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

I would really appreciate any help, I have been working on this forever

Answer 1

Xan is right, you need to look at this question . In particular I would point you to my answer here . I researched pretty much everything there is to know about this issue. The short summary is in that answer. I shared everything I learned in a blog post I linked there.