web-dev-qa-db-ja.com

Chrome拡張機能でコンテンツスクリプトファイルを使用してCSSを挿入する方法？

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

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

CSSの挿入について 類似した質問 を見つけましたが、 accepted answer のコードを使用しているときに問題が発生しました。これが私の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：//phkgaaiaakklogbhkdnpjncedlbamani/fix.cssのロードを拒否します。拡張機能の外部のページでロードするには、リソースがweb_accessible_resourcesマニフェストキーにリストされている必要があります。

これを修正する方法はありますか？または、おそらく、そのJavaScriptファイルからCSSを挿入する他の方法はありますか？

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

javascriptgoogle-chrome-extensioncontent-script
33
Roman

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

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

"Programmatic injection" も参照してください。および insertCSS() 。

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

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

ただし、この正確なインスタンスではこれを行いたくないことを理解しています。

56
Brock Adams