サイト 'reddit' に特定の機能を追加する chrome の拡張機能を作成しました。次の jQuery を使用して、サイトの各投稿に追加のボタンを追加します。
...
$(this).append('<li><span class="grab_button">grab</span></li>');
...
クラスgrab_button
は新しいです。reddit スタイルシートには存在しませんが、拡張スタイルシート chrome がロードするはずの CSS が適用されていません:
html body span.grab_button {
color: #888 !important;
font-weight: bold !important;
padding: 0 1px !important;
}
!important
適用される CSS がオーバーライドされるようにするためのルールを追加しました。私は定義を非常に具体的にしました (おそらくもっと具体的にすることもできますが、そうする必要はありません)。いったいなぜ適用されないのでしょうか。Webkit 開発者ツールを使用して追加されたボタンを調べると、オーバーライドされているものも含め、適用されるすべてのスタイルが一覧表示されますが、カスタムのスタイルは表示されません。
マニフェストの関連セクションは次のとおりです。
"content_scripts": [
{
"matches": ["http://www.reddit.com/*"],
"js": ["jquery-2.0.3.min.js", "script.js"],
"css": ["style.css"]
}
],
"web_accessible_resources": [
"style.css",
"script.js",
"jquery-2.0.3.min.js"
]
これが機能しない理由を誰か説明できますか?