Edited at

Chrome ExtensionのContent Scriptsで、CSSが読み込まれないのをなんとかする方法

More than 5 years have passed since last update.

私の開発環境に依存しているのかもしれませんが、Chrome ExtensionのContent Scriptsを使用する際、CSSがうまく読み込まれません。

そのため、力づくでなんとかすることにしました。


manifest.json

{

"name": "My extension",
...
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"css": ["mystyles.css"],
"js": ["jquery.js", "myscript.js"]
}
],
...
}

これはChromeのディベロッパーページにも書かれているExampleです。

しかし、"css": ["mystyles.css"]がうまく適用されません。

仕方ないのでlinkタグを使用して呼び出すことにしました。

まず、manifest.jsonを以下のように変更します。


manifest.json

{

"name": "My extension",
...
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"js": ["jquery.js", "myscript.js"]
}
],
,"web_accessible_resources": ["mystyles.css"]
...
}

web_accessible_resourcesmystyles.cssの読み込み許可をします。


myscript.js

var style = document.createElement('link');

style.rel = 'stylesheet';
style.type = 'text/css';
style.href = chrome.extension.getURL('mystyles.css');
(document.head||document.documentElement).appendChild(style);

myscript.jsで、Chrome Extensionにおけるmyscript.cssのパスを取得してlinkタグとして埋め込んでいます。

こうすることで、Content ScriptsでCSSを読み込むことができます。

そもそも、何故CSSオプションがあるのに読み込みできないかが謎ですが、ご存知の方がいらっしゃいましたら是非ご教授下さい。