Inhalt Scripts Stylesheet leckt in die Seite

Ich arbeite an einer Erweiterung. Der Benutzer klickt doppelt auf einen Begriff auf der Seite und ruft die Daten über ein Popup auf der Seitenleiste ab.
Die Daten, die ich erhalte, werden formatiert und in einem div namens innerDiv mit der Klasse inner-div gespeichert, das das Kind von div ist, das an den Körper angehängt wird.
Die js Teil funktioniert gut, aber die CSS dieser Seite überschreibt meine CSS und auch die Erweiterung Stylesheet leckt in die Seite. Es geht in beide Richtungen.Inhalt Scripts Stylesheet leckt in die Seite

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

Wie Sie sehen können, habe ich meine CSS so spezifisch wie möglich gehalten. Also, es gibt keine Möglichkeit, dass die Seite, die dom mit verschiedenen Klassen hat, meine css erbt.

Bild von CSS in Seite undichte

Bild von dom Elemente und die Klasse

ich kann nicht herausfinden, warum die Erweiterung CSS in der Seite undicht. Bitte helfen Sie!

EDIT:

Changed die div Namen präziser dehnungsinner div auf die Vorschläge nach sein. Das Problem besteht weiterhin.

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

Quelle

2017-02-09 user3762742

Versuchen Sie, den Selektor noch spezifischer zu machen, wie '.my-extension-inner-div'. Es ist länger, aber es ist weniger wahrscheinlich, dass es zu Konflikten mit der Seite kommt. – TricksfortheWeb

Ich könnte das tun, aber warum würden die Klassen in Konflikt geraten, wenn sie anders sind. Es sind nur einige Seiten, nicht alle. – user3762742

'.inner-div' ist ziemlich generisch. Wahrscheinlich haben diese Seiten auch ein '.inner-div'. Websites, die diese Klassen nicht enthalten, sind nicht betroffen. – TricksfortheWeb

Nur zu stoßen Beslinda N's comment, hatte ich dieses Problem und es wurde beschlossen, durch, dass die Beratung zu nehmen und von content_scripts meine CSS-Datei zu entfernen.

Dies könnte jedoch einige Ihrer Erweiterungen unterbrechen - da Sie normale Seiten mit benutzerdefiniertem CSS formatieren möchten. Um dieses Problem zu lösen, habe ich zwei CSS-Dateien erstellt, internal.css und external.css. Die interne Datei hatte das ganze Styling für meine popup.html, und die externe hatte das CSS, das ich eigentlich auf das DOM des Erweiterungsbenutzers anwenden wollte. Schließlich referenzierte ich nur external.css in content_scripts.

Quelle

2017-02-19 14:11:24 hughjdavey

Inhalt Scripts Stylesheet leckt in die Seite

Antwort

Verwandte Themen