jquery - 2 つの CSS シートの切り替え - Google Chrome 拡張機能

Question

問題は次のとおりです。私は Google Chrome 拡張機能を構築しています。ユーザーに 2 つのコンテンツスクリプトデザイン (2 つの css ファイル) から選択してもらいたいと考えています。これまでのところ、2つの解決策を見つけました：

chrome.tabs.insertCSS(integer tabId, InjectDetails details, function callback)

2) JavaScript のみで CSS スタイルを変更する。

どちらがベストプラクティスなのか知りたいです。JavaScriptですべてを変更するのは少しクレイジーに思えますが:p. もちろん、3D およびより優れたソリューションがあれば、それは素晴らしいことです。

score 1 · Accepted Answer

これで何かできますか：

<link class='mystyle' href="style1.css" rel="stylesheet" type="text/css">

link タグにクラス名を付けると、href プロパティを jQuery で変更できるようになります。

$(".mystyle").prop("href", "style2.css");

単一の div 要素で簡単なテストを実行したところ、問題なく動作するようです。

それをステートメントに変換します。

if ( choosestyle1 == true) {
       $(".mystyle").prop("href", "style1.css");
} else {
       $(".mystyle").prop("href", "style2.css");
}

スタイルシートのプリロード:

var stylesheets = Array("style1.css", "style2.css");
stylesheets.forEach(function(arg){
    $("<div />").load(arg);
});

score 0 · Accepted Answer

Paul Chrome 拡張機能の開発についてはよくわかりませんが、HTML 基本的な考え方は、現在の CSS についてブラウザに伝えることです。

coockieどのページを使用するかを伝える javascript を介して設定する必要がありCSS、他のページに切り替えるたびCSSに Cookie を変更します。

このリンクを参照してください。デモのダウンロードはこちら

2 に答える 2