挿入されたCSSファイルを削除するにはどうすればよいですか？

Question

私はchrome.tabs.insertCSS(null, {file: "style.css"});を使ってページにCSSファイルを挿入しても問題ありません。

• ただし、ファイルを削除する方法はありますか？
• また、style.cssという名前の別のファイルを挿入すると、最初のファイルが上書きされますか？
• ところで、注入されたCSSファイルはどこで見ることができますか？スクリプトはクロム開発ツールの「ソース/コンテンツスクリプト」で見ることができますが、CSSファイルは見つかりません。

Answer 1

私はこの質問の文脈が何であるか分かりませんが、特定の方法でページの特定の要素をハイライトし、そのカスタムハイライトを切り替えることができるように思えます。あなたが実際にCSSファイルを削除するか、単に同じ名前のファイルを追加することによって、それを消去することはできませんので

を（むしろスタイリング要素よりも、あなたの拡張機能が作成し）、私は次のことをお勧め：

• はあなたを包みますbody.JMaylinCustomStyles
• JMaylinCustomStylesクラスをbody要素に追加または削除するにはJavaScriptを使用してください。
• はメリットは、それはあなたがあなたのカスタムスタイルを上書きする方法を見つけ出す必要がないこと、あなたが持っているものの上に多くの仕事を追加していないということです何のステップ3

ありません2番目のスタイルシート（それは常に非常に迷惑でエラーを起こす可能性が高い）、さらにCSS specificityのビットを取得して、スタイルを適用する可能性が高くなります。あなたは文字通り、ファイルの先頭にbody.JMaylinCustomStyles {を追加し、下部の}することができますので、あなたのスタイルを「ラップ」するための最良の方法は、SassまたはLESSを用いることであろうことを

は注意してください。

Answer 2

CSSファイルを削除するには、no API https://developer.chrome.com/extensions/tabs.html

はありませんあなたの最善の策は、おそらくあなたが挿入され、最初のファイルからすべてのCSSの設定を置き換えます別のファイルを挿入します。

Answer 3

私はちょうど同じ問題に立ち向かい、私の解決策を分かち合うと思った。私はそのようにようにCSSをロードまたはアンロードされますコンテンツスクリプトを呼んでいる：

function loadCSS(file) { 
    var link = document.createElement("link"); 
    link.href = chrome.extension.getURL(file + '.css'); 
    link.id = file; 
    link.type = "text/css"; 
    link.rel = "stylesheet"; 
    document.getElementsByTagName("head")[0].appendChild(link); 
} 

function unloadCSS(file) { 
    var cssNode = document.getElementById(file); 
    cssNode && cssNode.parentNode.removeChild(cssNode); 
} 

呼び出す者のためのロジックはchrome.storageのデータに基づいて、コンテンツスクリプトでもあります。だからあなたがする必要があるのは、スクリプトを注入することです。それはCSSを追加/削除します。

私のケースは実際はちょっと複雑なので、私はいつもコンテンツスクリプトを読み込み、メッセージを送信してCSSをロードまたはアンロードします。しかし、これは、すべてのページのロード時にファイルをロードするオーバーヘッドがあります。