Fügen Sie CSS in <head> ein, bevor DOM bereit ist?

Frage: Wie kann ich anwenden, bevor CSS-Stile dom bereit, so dass die DOM Lasten bereits mit ihnen angewendet, IFchrome.storage.sync.get (‚gacMakeup‘) ist-1 gleich?Fügen Sie CSS in <head> ein, bevor DOM bereit ist?

Ich habe Stylish Chrome Extension verwendet, um benutzerdefinierte CSS-Stile zu einigen meiner internen Unternehmensseiten zu erstellen, und jetzt versuche ich eine eigene Chrome-Erweiterung zu erstellen, um diese Stile mit meinen Kollegen anzuwenden und zu teilen.

Während der Verwendung der Stylish-Erweiterung lädt das DOM bereits perfekt mit den verwendeten Stilen und ich möchte diesen Effekt auch auf meine Erweiterung anwenden. Ich habe versucht, den css-Code mit jQuery anzuhängen, aber da ich $ ('head') benutzt habe. Append(); offensichtlich hat es nicht funktioniert, weil es lädt, nachdem das dom bereit ist.

Ich habe ein eventpage.js eine var setzengacMakeup mit chrome.storage.sync genannt, die für schaltet ein/aus verwendet werden. In diesem Fall verwende ich den Code unter var 1 auf dem ersten Öffnen zu setzen:

chrome.storage.sync.get('gacMakeup', function(checkMakeup){ 
    if (checkMakeup.gacMakeup == undefined) { 
     chrome.storage.sync.set({'gacMakeup': '1'}); 
    }; 
});

Dies ist der CSS-Code in makeup.css, Ich mag würde beantragen, wenn gacMakeup == 1:

'.lia-stats-area {display: none !important;} 
'#lia-body td, #lia-body th {padding: 14px 25px !important;} 
'thead#columns {display: none !important;} 
'div#pager, div#pager_0 {padding-top: 18px !important;} 
'.message-subject-body.wrapper-hide-overflow.message-body.justify {font-size: 13px !important;} 
'.lia-info-area {font-size: 11px !important;} 
'.lia-list-row.lia-row-odd:hover, .lia-list-row.lia-row-even:hover {background-color: #E3F2FD !important;}

Das ist mein Manifest-Datei:

{ 
    "manifest_version": 2, 
    "name": "__MSG_appName__", 
    "description": "__MSG_appDescription__", 
    "version": "1.0", 
    "author": "Autor", 
    "permissions": ["tabs", "activeTab", "storage", "notifications", "https://ajax.googleapis.com/"], 
    "options_page": "options.html", 
    "background": {"scripts": ["js/eventpage.js"],"persistent": false}, 
    "web_accessible_resources": ["menu.html"], 
    "default_locale": "en", 

    "browser_action": { 
    "default_icon": "icon.png", 
    "default_popup": "popup.html", 
    "default_title": "styles" 
    }, 

    "icons": {"48": "icon.png"}, 

    "content_scripts": [ 
    { 
     "matches": [ "<all_urls>" ], 
     "css": ["css/menu.css"], 
     "js": ["js/jquery-1.12.4.min.js" ,"js/menu.js"] 
    } 
    ] 
}

Quelle

2016-07-26 SoMeGoD

Dies ist kein Duplikat da ich nicht CSS-Datei anhängen sofort versuchen. Ich versuche Datei anzuhängen, wenn chrome.storage.sync.get == 1 – SoMeGoD

Ja, Sie haben Recht. Das tut mir leid. –

Stylish wird zu "document.documentElement" hinzugefügt, wenn kein 'document.head' vorhanden ist. Außerdem können Sie in Ihrem Inhaltsskript auf chrome.storage.sync zugreifen. – wOxxOm

Sie brauchen nicht jquery dafür zu verwenden.

Try this:

var styleEl = document.createElement('style'); 

styleEl.innerText = '.lia-stats-area {display: none !important;}' + 
'#lia-body td, #lia-body th {padding: 14px 25px !important;} ' + 
'thead#columns {display: none !important;}' + 
'div#pager, div#pager_0 {padding-top: 18px !important;}' + 
'.message-subject-body.wrapper-hide-overflow.message-body.justify {font-size: 13px !important;}' + 
'.lia-info-area {font-size: 11px !important;}' + 
'.lia-list-row.lia-row-odd:hover, .lia-list-row.lia-row-even:hover{background-color: #E3F2FD !important;}'; 

document.head.appendChild(styleEl);

Quelle

2016-07-26 22:24:07

Danke für die Antwort.Dieser Code-Effekt ist der gleiche wie meiner, aber es lädt immer noch AFTER dom ist fertig.Ich versuche, die Styles BEFORE DOM bereit zu stellen, so dass dom bereits mit Style angewendet wird, ohne Flicker-Effekt. – SoMeGoD

Sie können das Skript ausgeführt werden soll, festgelegt, bevor die Seite geladen wird.

"content_scripts": [ { 
"js": [ "styles.js" ], 
"run_at": "document_start", 
"matches": [ "<all_urls>" ] 
} ]

Alternativ können Sie, da Sie nur Stile eingeben, diese mit einer CSS-Datei anwenden.

Sie können die Stile auch nur anwenden, wenn eine Bedingung über die Hintergrundseite erfüllt wird.

chrome.tabs.onUpdated.addListener(function(tabid) { 
if(true) { 
    chrome.tabs.insertCSS(tabid, { file: "styles.css" }) 
} })

Dokumentation: https://developer.chrome.com/extensions/content_scripts, https://developer.chrome.com/extensions/tabs#method-insertCSS

Quelle

2016-07-26 22:42:14

So schön, so einfach! Es ging mir darum, wie ich das mit jQuery erreichen kann, und ich dachte nicht, dass es möglich wäre, das Manifest zu ändern. Ich danke dir sehr! :) – SoMeGoD

Wie kann ich das mit einem Ein/Aus-Schalter binden? Ich verwende chrome.storage.sync.set ({'pageStyle': '1'}); und ich möchte die CSS nur laden, wenn pageStyle == 1. – SoMeGoD

Sie müssen dies auf der Hintergrundseite tun, siehe update. –

Fügen Sie CSS in <head> ein, bevor DOM bereit ist?

Antwort

Verwandte Themen