コンテンツスクリプトのjsファイルを使用してプログラムでCSSファイルを挿入できますか?
Jsファイルがpopup.htmlにリンクされているときにcssを挿入することは可能です。問題は、ボタンをクリックしてポップアップを開き、CSSを挿入する必要があることです。私はそれが自動的にそしてバックグラウンドで起こることを望みます。
私のコードで何が起こりますか...
前に述べたように、ポップアップを使用して機能します。ただし、CSSを挿入する前に、ポップアップを開く必要があります。
これをすべて自動的に、ユーザーの操作なしで?
これが私のコードです:
function getData() {
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
user_data = xmlhttp.responseText;
window.user_data = user_data;
processdata();
}
}
xmlhttp.open("GET","http://localhost:8888/g_dta.php",true);
xmlhttp.send();
}
getData();
function processdata() {
var downdata = user_data.split('|||||');
var installedthemes = downdata[0];
var currenttheme = downdata[1].toString();
window.currenttheme = currenttheme;
click();
}
function click(e) {
function setCSS() {
chrome.tabs.insertCSS(null, {file:currenttheme + ".css"});
}
setTimeout(function(){setCSS()}, 1250);
document.getElementById('iFrameLocation').innerHTML = "<iframe src='http://localhost:8888/wr_dta.php?newid="+e.target.id+"'></iframe>";
getData();
}
document.addEventListener('DOMContentLoaded', function () {
var divs = document.querySelectorAll('div');
for (var i = 0; i < divs.length; i++) {
divs[i].addEventListener('click', click);
}
});
JSファイルが動的にロードされるのと同じように、プログラムで新しい<link>
タグを作成し、それを<head>
セクションに追加できます。
var link = document.createElement("link");
link.href = "http://example.com/mystyle.css";
link.type = "text/css";
link.rel = "stylesheet";
document.getElementsByTagName("head")[0].appendChild(link);
ここに 記事 トピックがあります。
修正するのが難しいことではない生態系へのトラマ
序文:
Cssをページに追加する多くの方法の中で、それらのほとんどは画面をちらつきます-最初はcssを適用せずにページを表示し、次にそれを適用します。私はいくつかの方法を試しましたが、以下が私の発見です。
<link>
に挿入されたコンテンツスクリプト にcss <style>
またはdocument_start
タグを追加する必要があります
そのコードは次のようになります。
var link = document.createElement('link');
link.href = chrome.runtime.getURL('main.css');
//chrome-extension://<extension id>/main.css
link.rel = 'stylesheet';
document.documentElement.insertBefore(link);
一部の動的CSSコードの場合:
var customStyles = document.createElement('style');
customStyles.appendChild(document.createTextNode(
'body { background-color: ' + localStorage.getItem('background-color') + '}'
));
document.documentElement.insertBefore(customStyles);
document_start
のスクリプトでこれを行うと、ちらつきがなくなります!
このJavaScriptファイルでは、プログラムによるものをいくつでも処理できます。 manifest.json
で提供されるURLパターンマッチングは非常に限られていますが、ここでは実際にURLのすべての?query_string
と#hash
を確認し、完全な正規表現と文字列操作を使用して、 cssを注入しないかどうか。そのcssは、設定に基づいたり、バックグラウンドページへのメッセージングと調整したりすることもできます。
.insertCSS
は使用しないでください。ちらつきがあります。マニフェストのパーミッションフィールドに追加できるのは簡単です。web_accessible_resources
を参照してください。
, "web_accessible_resources": [
"mystyle.css"
]
また、これをcontent_scripts
に追加します
"content_scripts": [
{
"matches": ["<all_urls>"],
"css": ["mystyle.css"],
"js": ["jquery-1.10.2.min.js","content.js","my.min.js"]
}],
プログラムインジェクションと insertCSS() を使用して同じものを追加します。
chrome.tabs.insertCSS(integer tabId, object details, function callback)