0

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

BionicSheep
  • 444
  • 5
  • 14
  • 1
    Well, this is not a full answer, but you need to look into the direction of Shadow DOM. Here's a couple of related questions on the topic: http://stackoverflow.com/questions/12783217/how-to-really-isolate-stylesheets-in-the-google-chrome-extension http://stackoverflow.com/questions/20725770/chrome-extension-content-scripts-custom-ui – Xan Sep 22 '14 at 10:44
  • Your manifest lists two different html files. I assume `index.html` is what you gave us? Could you show us how you're injecting? Your manifest lists `style.css` twice. The content script style shouldn't be necessary. – Teepeemm Sep 22 '14 at 14:22

1 Answers1

0

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.

Community
  • 1
  • 1
anderspitman
  • 9,230
  • 10
  • 40
  • 61