13

chrome.tabs.insertCSS(null, {file: "style.css"});ページにcssファイルを挿入するために使用しましたが、正常に動作します。

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

3 に答える 3

9

この質問の文脈が何であるかはわかりませんが、ページの特定の要素を特定の方法で強調表示し、そのカスタムの強調表示を切り替えたいと思うかもしれません。(拡張機能が作成するスタイル要素ではなく)

CSSファイルを実際に削除したり、同じ名前のファイルを追加して消去したりすることはできないため、次のことをお勧めします。

  • カスタムスタイルを次のようにラップしますbody.JMaylinCustomStyles
  • JMaylinCustomStylesJavaScript を使用して、クラスをbody要素に追加または削除します。
  • ステップ3はありません。

利点は、持っているものの上に多くの作業を追加しないこと、2 番目のスタイルシートでカスタム スタイルをオーバーライドする方法を理解する必要がないこと (常に非常に煩わしく、エラーが発生しやすいこと) です。スタイルが適用される可能性が高くなるように、 CSS の特異性も少し得られます。

スタイルを「ラップ」する最良の方法は、SassまたはLESSを使用することです。文字通りbody.JMaylinCustomStyles {、ファイルの上部と}下部に追加できるからです。

于 2013-08-30T15:56:38.233 に答える
8

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

于 2013-10-01T23:14:57.157 に答える