52

コンテンツ スクリプトとして挿入される JavaScript から CSS を挿入しようとしています。

"content_scripts": [
   {
      "matches": ["http://www.google.com/*"],
      "js": ["script.js"]
   }
],

CSS の注入に関する同様の質問を見つけましたが、受け入れられた回答のコードを使用しているときに問題が発生しました。これが私のscript.js内容です：

var link = document.createElement("link");
link.href = chrome.extension.getURL("style.css");
link.type = "text/css";
link.rel = "stylesheet";
document.getElementsByTagName("head")[0].appendChild(link);

ページを読み込んだ後、コンソールに次のメッセージが表示されます。

chrome-extension://phkgaaiaakkklogbhkdnpjncedlbamani/fix.css の読み込みを拒否しています。拡張機能の外部のページでリソースをロードするには、リソースを web_accessible_resources マニフェスト キーにリストする必要があります。

これを修正する方法はありますか？あるいは、その JavaScript ファイルから CSS を挿入する別の方法でしょうか?

注: マニフェストから直接スタイル シートを含めることはできません。

4

2 に答える 2

102

マニフェストの権限フィールドに追加できます。web_accessible_resourcesを参照してください。したがって、これをマニフェストに追加します。

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

「プログラムによるインジェクション」も参照してください。とinsertCSS()。

ほとんどのアプリケーションでは、そのコードをすべて忘れてcreateElement、CSS ファイルをマニフェストに追加するだけです。

"content_scripts": [
   {
      "matches":    ["http://www.google.com/*"],
      "css":        ["fix.css"],
      "js":         ["script.js"]
   }
],

ただし、この正確な例でそれを行いたくないことは理解しています。

于 2012-07-19T04:50:29.647 に答える
0

element.classList.add("my_new_class") を使用して要素に新しいクラスを追加し、css で新しく追加されたクラスを使用してその要素のスタイルを設定できます。したがって、onClick のみが追加され、その要素の css のみが実行されます。

于 2021-04-26T04:31:22.687 に答える