チュートリアル: Manifest V2 に移行する

マニフェスト バージョン 1 は Chrome 18 で非推奨となっており、 マニフェスト バージョン 1 のサポート スケジュールをご覧ください。バージョン 1 からバージョン 2 への変更は 2 つに分類されます。 API の変更とセキュリティの変更という幅広いカテゴリがあります。

このドキュメントでは、Chrome 拡張機能をマニフェスト バージョン 1 から その後、変更の意味と変更理由についてさらに詳しい説明を記述しています。

API 変更チェックリスト

  • browser_actions プロパティと chrome.browserActions API のどちらを使用していますか?

  • browser_actions は、単一の browser_action プロパティに置き換えます。

  • chrome.browserActionschrome.browserAction に置き換えます。

  • icons プロパティを default_icon に置き換えます。

  • name プロパティを default_title に置き換えます。

  • popup プロパティを default_popup に置き換えます(現在は文字列にする必要があります)。

  • page_actions プロパティと chrome.pageActions API のどちらを使用していますか?

  • page_actionspage_action に置き換えます。

  • chrome.pageActionschrome.pageAction に置き換えます。

  • icons プロパティを default_icon に置き換えます。

  • name プロパティを default_title に置き換えます。

  • popup プロパティを default_popup に置き換えます(現在は文字列にする必要があります)。

  • chrome.self プロパティを使用していますか?

  • chrome.extension に置き換えます。

  • Port.tab プロパティを使用していますか?

  • Port.sender に置き換えます。

  • chrome.extension.getTabContentses() または chrome.extension.getExtensionTabs() API?

  • chrome.extension.getViews( { "type" : "tab" } ) に置き換えます。

  • 拡張機能でバックグラウンド ページを使用していますか?

  • background_page プロパティを background プロパティに置き換えます。

  • ページのコードを含む scripts または page プロパティを追加します。

  • バックグラウンド ページをイベントに変換するには、persistent プロパティを追加して false に設定します。 ページ

セキュリティ変更チェックリスト

  • HTML ページでインライン スクリプト ブロックを使用していますか?

  • <script> タグ内に含まれる JS コードを削除して、外部 JS ファイル内に配置します。

  • インライン イベント ハンドラ(click など)を使用していますか?

  • HTML コードから削除して外部 JS ファイルに移動し、addEventListener() を使用します。 してください。

  • 拡張機能によって、リソース( イメージやスクリプトなど)は何ですか。

  • web_accessible_resources プロパティを定義し、リソースを一覧表示します。必要に応じて、 コンテンツ セキュリティ ポリシーを適用する必要があります。

  • 拡張機能に外部ウェブページは埋め込まれていますか?

  • sandbox プロパティを定義します。

  • コードまたはライブラリが eval() を使用しているか、新しい Function()innerHTMLsetTimeout()、または 動的に評価される JS コードの文字列を渡すのでしょうか。

  • JSON コードを解析してオブジェクトにする場合は JSON.parse() を使用します。

  • AngularJS などの CSP に適したライブラリを使用します。

  • マニフェストでサンドボックス エントリを作成し、 postMessage(): サンドボックス化されたページと通信します。

  • jQuery や Google アナリティクスなどの外部コードを読み込んでいますか。

  • ライブラリをダウンロードして拡張機能にパッケージ化し、 使用します。

  • リソースを提供する HTTPS ドメインを content_security_policy で許可リストに登録するの一部である 使用します。

API の変更の概要

マニフェスト バージョン 2 では、ブラウザの操作とページ操作の API にいくつかの変更が加えられており、 古い API と新しい API が混在しています

ブラウザ アクションの変更

ブラウザ アクション API で、名前が変更されました。

  • browser_actions プロパティと chrome.browserActions プロパティが、 単数形の browser_actionchrome.browserAction
  • 以前の browser_actions プロパティには、iconsnamepopup プロパティがありました。 これらは、次のように置き換えられました。

  • ブラウザのアクション バッジ アイコンの default_icon

  • default_name: バッジにカーソルを合わせたときにツールチップに表示されるテキスト

  • default_popup: ブラウザ アクションの UI を表す HTML ページ用(現在は必須) 文字列、オブジェクトは指定できない)

ページ操作の変更

ブラウザ アクションの変更と同様に、Page Actions API も変更されました。

  • page_actions プロパティと chrome.pageActions プロパティを単数形に置き換えました。 対応する page_actionchrome.pageAction
  • 以前の page_actions プロパティには、iconsnamepopup プロパティがありました。これらの が次のように置き換えられます。

  • ページ アクション バッジ アイコンの default_icon

  • default_name: バッジにカーソルを合わせたときにツールチップに表示されるテキスト

  • default_popup: ページ アクションの UI を表す HTML ページ(現在は 文字列。オブジェクトは指定できない)

削除および変更された API

いくつかの拡張機能 API が削除され、対応する新しい API に置き換えられました。

  • background_page プロパティは background に置き換えられました。
  • chrome.self プロパティは削除されました。chrome.extension を使用してください。
  • Port.tab プロパティは Port.sender に置き換えられました。
  • chrome.extension.getTabContentses() API と chrome.extension.getExtensionTabs() API には、 chrome.extension.getViews( { "type" : "tab" } ) に置き換えられました。

セキュリティの変更の概要

マニフェスト バージョン 1 からバージョン 1 への移行に伴い、セキュリティ関連の変更が多数あります。 バージョン 2 です。こうした変更の多くは、Chrome によるコンテンツ セキュリティ ポリシーの採択に起因しています。 このポリシーの詳細を読んで、その影響をご確認ください。

インライン スクリプトとイベント ハンドラは許可されていません

コンテンツ セキュリティ ポリシーが使用されているため、インラインの <script> タグを使用できなくなりました HTML コンテンツと一緒に移動します外部 JS ファイルに移動する必要があります。また、インライン イベント ハンドラでは、 サポートされていません。たとえば、拡張機能に次のコードがあるとします。

<html>
<head>
  <script>
    function myFunc() { ... }
  </script>
</head>
</html>

このコードを実行すると、実行時にエラーが発生します。この問題を解決するには、<script> タグの内容を外部ファイルに移動します src='path_to_file.js' 属性で参照します。

同様に、インライン イベント ハンドラもよく使用されます。これは多くのイベントで 実行されません。たとえば、次のような一般的なインスタンスについて考えてみましょう。

<body onload="initialize()">
<button onclick="handleClick()" id="button1">

これらは Manifest V2 拡張機能では機能しません。インライン イベント ハンドラを削除し、 外部 JS ファイルを開き、代わりに addEventListener() を使用してそれらのイベント ハンドラを登録します。対象 たとえば、JS コードで次のようにします。

window.addEventListener("load", initialize);
...
document.getElementById("button1").addEventListener("click",handleClick);

これにより、拡張機能の動作をユーザー インターフェースのマークアップから明確に分離できます。

コンテンツを埋め込む

シナリオによっては、外部または内部で使用可能なコンテンツが拡張機能に埋め込まれている場合があります。 外部のソースから取得されます。

ウェブページ内の拡張機能のコンテンツ: 拡張機能に、コンテンツで使用されるリソース(画像、スクリプト、CSS スタイルなど)が埋め込まれている場合 スクリプトをウェブページに挿入するには、web_accessible_resources プロパティを使用する必要があります。 これらのリソースを許可リストに登録して外部ウェブページで使用できるようにします。

{
...
  "web_accessible_resources": [
    "images/image1.png",
    "script/myscript.js"
  ],
...
}

外部コンテンツの埋め込み: コンテンツ セキュリティ ポリシーでは、パッケージからのローカル スクリプトとオブジェクトの読み込みのみが許可されます。 外部の攻撃者から未知のコードが拡張機能に侵入するのを防ぎます。一方で 外部サービスのリソース(jQuery や Google アナリティクスのコードなど)を読み込む際に、追加の接続が必要になることもあります。 変換には次の 2 つの方法があります。

  1. 関連するライブラリ(jQuery など)をローカルにダウンロードし、拡張機能とともにパッケージ化します。
  2. HTTPS オリジンを許可リストに登録することで、制限付きの CSP を緩和できます。 &quot;content_security_policy&quot;セクションにあります。Google アナリティクスなどのライブラリを組み込むには 次のようなアプローチがあります。

    {
      ...,
      "content_security_policy": "script-src 'self'
      https://ssl.google-analytics.com; object-src 'self'",
      ...
    }
    

動的スクリプト評価の使用

新しい Manifest V2 スキームの最大の変更点の一つは、拡張機能が eval() や新しい Function() などの動的スクリプト評価手法を使用するか、JS の文字列を渡します。 eval() を使用させる関数(setTimeout() など)に変換する必要があります。また Google マップや特定のテンプレート ライブラリなど、一般的に使用されている JavaScript ライブラリが知られています。 いくつかご紹介します

Chrome には、ページを独自のオリジンで実行するためのサンドボックスが用意されており、Chrome へのアクセスは拒否されます*。 API新しいコンテンツ セキュリティ ポリシーに基づいて eval() などを使用するには:

  1. マニフェスト ファイルにサンドボックス エントリを作成します。
  2. サンドボックスのエントリで、サンドボックスで実行するページをリストします。
  3. postMessage() を介したメッセージ受け渡しを使用して、サンドボックス化されたページと通信します。

詳しい方法については、サンドボックス化の評価に関するドキュメントをご覧ください。

関連情報

マニフェスト バージョン 2 の変更は、より安全で堅牢な 堅牢な設計の拡張機能とアプリマニフェスト バージョン 1 からの変更の完全なリストを表示する マニフェスト ファイルのドキュメントをご覧ください。サンドボックスの使用について詳しくは、 安全でないコードを分離するには、サンドボックスの評価に関する記事をご覧ください。コンテンツの詳細や セキュリティ ポリシーについては、拡張機能関連のチュートリアルと HTML5Rocks をご覧ください。