在DOM準備好之前插入CSS到<head>？

問題：我如何申請CSS樣式之前DOM已準備就緒，以便與他們已經應用的DOM負荷，IFchrome.storage.sync.get（ 'gacMakeup'）等於1？在DOM準備好之前插入CSS到<head>？

我一直在使用Stylish chrome擴展爲我公司的一些內部頁面創建自定義css樣式，現在我正在嘗試創建一個自己的chrome擴展應用並與同事共享這些樣式。

在使用Stylish擴展時，DOM已經完美地加載了所應用的樣式，我希望在我的擴展中具有相同的效果。我嘗試使用jQuery附加CSS代碼，但由於我使用了$（'head'）。append（）;顯然它沒有工作，因爲它在dom準備好之後加載。

我有一個eventpage.js設置VAR稱爲gacMakeup使用chrome.storage.sync將被用於開/關切換。在這種情況下，我使用下面的代碼VAR設置爲1的第一開口：

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

這裏面makeup.css的CSS代碼，我想申請如果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;}

這是我的清單文件：

{ 
    "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"] 
    } 
    ] 
}

來源

2016-07-26 SoMeGoD

這不是重複的，因爲我並不想附加CSS文件的時候了。我試圖附加文件，如果chrome.storage.sync.get是== 1 – SoMeGoD

是的，你是對的。對不起。 –

當沒有'document.head'時，Stylish會添加到'document.documentElement'。另外，您可以在內容腳本中訪問chrome.storage.sync。 – wOxxOm

你並不需要使用jquery了點。

試試這個：

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

來源

2016-07-26 22:24:07

感謝您的回覆，這個代碼效果和我的一樣，但是它仍然會在加載完dom後準備好。我正在嘗試應用BEFORE DOM準備好的樣式，以便在已應用樣式的情況下加載dom，而沒有任何閃爍效果。 – SoMeGoD

您可以設置加載頁面之前要執行的腳本。

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

或者，因爲您只是注入樣式，所以可以使用css文件來應用它們。

"content_scripts": [ { 
"css": [ "styles.css" ], 
"matches": [ "<all_urls>" ] 
} ]

如果通過背景頁面滿足某些條件，也只能應用樣式。

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

文檔：https://developer.chrome.com/extensions/content_scripts，https://developer.chrome.com/extensions/tabs#method-insertCSS

來源

2016-07-26 22:42:14

太好了，太簡單了！我擔心如何用jQuery實現這一點，並且認爲通過更改清單並不可能。非常感謝！ :) – SoMeGoD

我該如何配合開/關切換？我使用chrome.storage.sync.set（{'pageStyle'：'1'}）;並且我想只在pageStyle == 1時才加載CSS。 – SoMeGoD

您需要在後臺頁面中執行此操作，請參閱更新。 –

在DOM準備好之前插入CSS到<head>？

回答

相關問題