javascript - Chrome 拡張機能から CSS を挿入する

Question

ユーザーがページの CSS を変更できるようにする Chrome 拡張機能に取り組んでいます。chrome.tabs API で insertCSS メソッドを使用して、HTML にスタイル タグを追加しようとしましたが、成功しませんでした。insertCSS メソッドがどのように機能するか、または拡張子の .js ファイルから Web ページにアクセスする方法を誰か教えてもらえますか?

Answer 1

インジェクションコードは単純です

chrome.tabs.insertCSS(tabId, {
 file : "mystyle.css"
});

mystyle.css がマニフェストに記載されていることを確認してください

 "web_accessible_resources": [
    "mystyle.css"
  ],

インジェクションが成功したかどうかを確認するには、Chrome Devtools を使用します。CSS が挿入されていないと思われる問題がありました。調査したところ、そうでしたが、セレクターが正しくありませんでした。多くのスタイルに !important を追加することになりました。