google-chrome-extension
コンテンツスクリプト

備考

マニフェスト内のコンテンツスクリプトの宣言

コンテンツスクリプトは、一連のURLパターンに一致するページに常に注入されるように、 manifest.jsonで宣言することができます 。

最小の例

"content_scripts" : [
  {
    "js": ["content.js"],
    "css": ["content.css"]
    "matches": ["http://example.com/*"]
  }
]

このマニフェストエントリは、コンテンツスクリプト注入するChromeを指示content.js CSSファイルと一緒に、 content.css一致するページへのナビゲーションの後、 マッチパターンを http://example.com/*

jsとcss両方のキーはオプションです。必要なものに応じて、そのうちの1つだけまたは両方を持つことができます。

content_scripts keyは配列で、いくつかのコンテンツスクリプト定義を宣言できます：

"content_scripts" : [
  {
    "js": ["content.js"],
    "matches": ["http://*.example.com/*"]
  },
  {
    "js": ["something_else.js"],
    "matches": ["http://*.example.org/*"]
  }
]

エントリが1つしかない場合でも、 jsとmatches両方が配列であることに注意してください。

より多くのオプションは、 公式文書やその他の例で利用できます。

重要な注意点

マニフェストで宣言されたコンテンツスクリプトは、拡張ロード後の新しいナビゲーションにのみ挿入されます 。既存のタブには挿入されません。これは、開発中の拡張リロードや、リリース後の拡張機能にも適用されます。

現在開いているタブが確実に覆われていることを確認する必要がある場合は、起動時にプログラムによる注入も検討してください。

拡張ページからコンテンツスクリプトを挿入する

URLに基​​づいてコンテンツスクリプトが常に注入されるのではなく、コンテンツスクリプトがいつ注入されるかを直接制御したい場合は、 Programmatic Injectionを使用できます。

最小の例

• JavaScript

  chrome.tabs.executeScript({file: "content.js"});
  

• CSS

  chrome.tabs.insertCSS({file: "content.css"});
  

拡張ページ（背景やポップアップなど）から呼び出され、挿入権限があると仮定すると、これはcontent.jsを実行するか、 content.cssをコンテンツスクリプトとして現在のタブの上部フレームに挿入します。

インラインコード

コンテンツスクリプトとしてファイルの代わりにインラインコードを実行することができます：

var code = "console.log('This code will execute as a content script');";
chrome.tabs.executeScript({code: code});

タブの選択

現在アクティブ以外のタブで実行するタブID（通常は他のchrome.tabsメソッドまたはメッセージングから）を提供することができます。

chrome.tabs.executeScript({
  tabId: tabId,
  file: "content.js"
});

chrome.tabs.executeScript()マニュアルやその他のchrome.tabs.executeScript()では、より多くのオプションが利用できます。

アクセス許可

chrome.tabs.executeScript()を使用すると、 "tabs"権限は必要ありませんが、ページのURLに対するホスト権限が必要です 。

エラーのチェック

スクリプトの挿入が失敗した場合、オプションのコールバックでそれをキャッチできます：

chrome.tabs.executeScript({file: "content.js"}, function() {
  if(chrome.runtime.lastError) {
    console.error("Script injection failed: " + chrome.runtime.lastError.message);
  }
});

マニフェスト内の複数のコンテンツスクリプト

同じ条件、複数のスクリプト

他のすべての条件が同じである複数のファイルを挿入する必要がある場合、たとえばライブラリを含める場合は、それらをすべて"js"配列にリストすることができます。

"content_scripts" : [
  {
    "js": ["library.js", "content.js"],
    "matches": ["http://*.example.com/*"]
  }
]

順序が重要： library.js前に実行されますcontent.js 。

同じスクリプト、複数のサイト

複数のサイトに同じファイルを挿入する必要がある場合は、複数の一致パターンを指定できます。

"matches": ["http://example.com/*", "http://example.org/*"]

基本的にすべてのページを挿入する必要がある場合は、 "*://*/*" （すべてのHTTP（S）ページに一致）や"<all_urls>" （ サポートされているすべてのページに一致）などの部分一致パターンを使用できます。

異なるスクリプトまたは異なるサイト

"content_scripts"セクションも配列であるため、複数のコンテンツスクリプトブロックを定義できます。

"content_scripts" : [
  {
    "js": ["content.js"],
    "matches": ["http://*.example.com/*"]
  },
  {
    "js": ["something_else.js"],
    "matches": ["http://*.example.org/*"]
  }
]