同じ問題に直面したばかりで、解決策を共有したいと思いました。次のように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 をロードまたはアンロードします。ただし、これには、ページの読み込みごとにファイルを読み込むというオーバーヘッドがあります。