web-dev-qa-db-ja.com

Chrome拡張機能を使用してCSSをWebページに挿入する方法は？

Chrome拡張機能を通じてCSSをWebページに挿入する方法がわかりません。これをWebページに挿入しようとしています。

body {
   background: #000 !important;
}

a {
   color: #777 !important;
}

ここに私のmanifest.jsonがあります：

{
"update_url":"http://clients2.google.com/service/update2/crx",
  "name": "Test Extension",
  "version": "1.0",
  "description": "This is a test extension for Google Chrome.",
  "icons": { "16": "icon16.png",
           "48": "icon48.png",
          "128": "icon128.png" },
  "background_page": "background.html",
  "browser_action": {
    "default_icon": "icon19.png"
  },
  "content_scripts": [
    {
      "matches": ["http://test-website.com/*"], 
      "js": ["js/content-script.js"]
    }
  ],

    "permissions": [ "tabs", "http://test-website.com/*" ]

}
javascriptcssgoogle-chromegoogle-chrome-extension
36
timmya

マニフェストファイルに次の行を追加する必要があります。

"content_scripts": [
    {
      "matches": ["http://test-website.com/*"], 
      "js": ["js/content-script.js"],
      "css" : ["yourcss.css"]
    }
],

"css": ["..."]で定義されているCSSファイルは、matchesで指定されている場所に一致するすべてのページに追加されます。

Chrome拡張機能を開発している場合は、次のページをご覧ください。

  1. 開発者ガイド （
58
Rob W

Chrome Tabs API webpage で説明されている次の構文を使用して、cssファイルを1つ以上のタブのコンテンツに挿入することもできます。

chrome.tabs.insertCSS(integer tabId, object details, function callback);

もちろん、まずターゲットタブのIDが必要です。

Chrome拡張機能のドキュメントでは、挿入されたCSSの解釈howは説明されていませんが、実際には、CSSファイルはこのメソッドによって、またはマニフェストに含めることにより、Webページに挿入され、ユーザースタイルシートとして解釈されます。

この点で、これらのメソッドを使用してスタイルシートをdo挿入すると、1つの重要な方法で制限されることに注意してください（少なくとも、 as Chrome v.19）：Chromeは、ユーザースタイルシートの「！important」ディレクティブを無視します。挿入されたスタイルルールは、ページに含まれるすべてのものに勝ります。作成されたとおり。

インラインスタイルルールの挿入を回避する場合の回避策の1つは、次のとおりです（実際の挿入にはjQueryを使用していますが、ストレートJavascriptで実行できます）。

$(document).ready(function() {
var path = chrome.extension.getURL('styles/myExtensionRulz.css');
$('head').append($('<link>')
    .attr("rel","stylesheet")
    .attr("type","text/css")
    .attr("href", path));
});

その後、スタイルシートを拡張機能のスタイルフォルダーに配置できますが、マニフェストのどこにでもリストする必要はありません。上記の関連部分は、chrome APIを使用してスタイルシートのURLを取得し、それをリンクのhref値としてプラグインします。必要に応じて「！important」ディレクティブを使用できます。

これは、Chromeの最新バージョンで動作する唯一のソリューションです。

21
jCyCle