简体   繁体   中英

Content Scripts stylesheet leaks into the page

I am working on an extension. The user double clicks on some term on the page and gets the data via a side panel popup.
The data I get is formatted and stored inside a div called innerDiv with class inner-div which is the child of div that is appended into the body.
The js part works fine but the css of that page overwrites my css and also, the extension stylesheet leaks into the page. It goes both ways.

.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;
}

As you can see I've kept my CSS as specific as possible. So, there is not way that the page having dom with different classes inherit my css.

Picture of css leaking into page

在此处输入图片说明

Picture of dom element and the class

在此处输入图片说明

I cannot figure out why the extension css is leaking into the page. Please help!

EDIT :

Changed the div name to be more specific extension-inner-div according to the suggestions. The problem persists.

在此处输入图片说明

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/*"
    ]
}   

Just to bump Beslinda N's comment , I had this problem and it was resolved by taking that advice and removing my CSS file from content_scripts .

This might break some of your extension though - as you may want to style normal pages with custom CSS. To solve this problem I created two CSS files, internal.css and external.css . The internal file had all the styling for my popup.html , and the external had the CSS I actually wanted to apply to the extension user's DOM. Finally I referenced only external.css in content_scripts .

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM