DOMを準備する前にCSSを<head>に挿入しますか？

質問：DOMの負荷はすでに彼らと一緒に適用されるようにがどのように私は、DOM準備する前にCSSスタイルを適用することができ、 IF chrome.storage.sync.get（ 'gacMakeup'）が1に等しいのですか？DOMを準備する前にCSSを<head>に挿入しますか？

私はクロムエクステンションを使用して、社内の一部のページにカスタムCSSスタイルを作成していますが、現在自分のクロムエクステンションを作成して同僚と共有して共有しようとしています。

スタイリッシュなエクステンションを使用している間、DOMは既にスタイルが適用された状態で完全にロードされています。このエクステンションにも同じ効果があります。私はjQueryを使ってCSSコードを追加しようとしましたが、$（ 'head'）を使用して以来、append（）;明らかに、domが準備完了した後にロードされるため、動作しませんでした。

私は、オン/オフトグルのために使用されるchrome.storage.syncを使用してgacMakeup呼ばVARを設定するeventpage.jsを持っています。この場合、私は第一の開口部に1にVARを設定するには、以下のコードを使用しています：

：

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

これは私がgacMakeup == 1の場合に適用したいと思いmakeup.css内部のCSSコードです
'.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

これは重複ではありません。 chrome.storage.sync.getが== 1ならファイルを添付しようとしています – SoMeGoD

はい、そうです。そのために残念。 –

Stylishは 'document.head'がないときに' 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

このコードエフェクトは私のものと同じですが、AFTER domがまだ読み込まれています。BEFORE DOM readyというスタイルを適用しようとしています。そのため、ちらちらの影響を受けずにスタイルが適用された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" }) 
} })

ドキュメント：私はすぐに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>に挿入しますか？

答えて

関連する問題