From 265afa30bb497c3dc6503af4659a014c35a12a1e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 2 Jun 2021 23:26:54 +0900 Subject: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension を更新 (#975) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/02/20 時点の英語版に同期 - 英語版章題マクロを削除 --- .../anatomy_of_a_webextension/index.html | 123 +++++++++++---------- 1 file changed, 66 insertions(+), 57 deletions(-) diff --git a/files/ja/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html b/files/ja/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html index 2956a356a2..fb0f981c25 100644 --- a/files/ja/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html +++ b/files/ja/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html @@ -5,41 +5,44 @@ tags: - WebExtensions translation_of: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension --- -

{{AddonSidebar}}

+
{{AddonSidebar}}

拡張機能は複数のファイルで構成されており、それらのファイルが配布・インストール用にパッケージ化されたものです。この記事では、拡張機能に含まれるファイルについて簡単に説明します。

-

manifest.json

+

manifest.json

どの拡張機能においても不可欠な唯一のファイルです。このファイルには名前やバージョン、必要とするパーミッションなど、拡張機能に関する基本的なメタデータが含まれます。加えて、アドオンに含まれている他のファイルへの参照も含んでいます。

このマニフェストには、下記のファイルに対する参照を含めることができます。

- - -

+
+
バックグラウンドスクリプト
+
長時間動作するロジックを実装します。
+
アイコン
+
拡張機能とそれが定義するボタンのアイコン。
+
サイドバー、ポップアップ、オプションページ
+
色々な UI コンポーネントを提供する HTML 文書です。
+
コンテンツスクリプト
+
拡張機能に含まれる JavaScript で、ウェブページに挿入するもの
+
ウェブでアクセス可能なリソース
+
まとめられたコンテンツをウェブページやコンテンツスクリプトにアクセス可能とする。
+
-

詳細は manifest.json のリファレンスを参照してください。

+

-

マニフェストに載っているものの他に、拡張機能はサポートするファイルの拡張機能ページを持つことができます。

+

詳細は manifest.json のリファレンスを参照してください。

-

バックグラウンドスクリプト

+

マニフェストに載っているものの他に、拡張機能はサポートするファイルの拡張機能ページを持つことができます。

-

しばしば拡張機能は、ウェブページやブラウザーウィンドウと独立したうえで、状態を長く維持したり処理を長時間実行する必要があります。バックグラウンドスクリプトはそのような場合のためのスクリプトなのです。

+

バックグラウンドスクリプト

-

バックグラウンドスクリプトは拡張機能が読み込まれると同時にロードされ、拡張機能が無効にされるかアンインストールされるまでロードされた状態を維持します。あらかじめ要求された必要なパーミッションの限りにおいて、スクリプト中で WebExtention API を使うことができます。

+

拡張機能には、特定のウェブページやブラウザーウィンドウの寿命とは無関係に、長期的な状態を維持したり、長期的な処理を実行したりする必要があることがよくあります。そのためのものがバックグラウンドスクリプトです。

-

{{英語版章題("Specifying background scripts")}}

+

バックグラウンドスクリプトは拡張機能が読み込まれると同時にロードされ、拡張機能が無効にされるかアンインストールされるまでロードされた状態を維持します。あらかじめ要求された必要なパーミッションの限りにおいて、スクリプト中で WebExtention API を使うことができます。

-

バックグラウンドスクリプトを定義する

+

バックグラウンドスクリプトを定義する

-

"manifest.json" の中に background キーを用いることでバックグラウンドスクリプトをインクルードできます。

+

manifest.json の中に "background" キーを用いることでバックグラウンドスクリプトをインクルードできます。

// manifest.json
 
@@ -47,83 +50,89 @@ translation_of: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension
   "scripts": ["background-script.js"]
 }
-

複数のバックグラウンドスクリプトを定義することも可能であり、その場合は 1 つの ウェブページに複数のスクリプトが読み込まれているのと同様に、スクリプトは同じコンテキストで動作します。

+

複数のバックグラウンドスクリプトを指定することもできます。その場合は、 1 つのウェブページに複数のスクリプトが読み込まれた場合と同じように、同じコンテキストで実行されます。

-

バックグラウンドスクリプトを指定する代わりに、ES5 モジュールをサポートするという追加された利点のあるバックグラウンドページを指定することもできます:

+

バックグラウンドスクリプトを指定する代わりに、ES6 モジュールをサポートするバックグラウンドページを指定することもできます。

-

manifest.json

- -
// manifest.json
+

+ 
manifest.json

+ 

+ 
// manifest.json
 
 "background": {
   "page": "background-page.html"
 }

-
-
background-page.html

-
-
<!DOCTYPE html>
+ 

+ 
background-page.html

+ 

+ 
<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
     <script type="module" src="background-script.js"></script>
   </head>
 </html>

+ 

+

 
-
{{英語版章題("Background script environment")}}

-
-
バックグラウンドスクリプトの実行環境

+
バックグラウンドスクリプトの実行環境

 
-
DOM APIs

+
DOM API

 
-
バックグラウンドスクリプトはバックグラウンドページと呼ばれる特殊なページのコンテキストで実行されます。ここでは window というグローバルオブジェクトが利用でき、そのオブジェクトによってすべての DOM API 標準が利用できます。

+
バックグラウンドスクリプトは、バックグラウンドページと呼ばれる特殊なページのコンテキストで実行されます。ここでは window というグローバルオブジェクトが利用でき、そのオブジェクトによってすべての DOM API 標準が利用できます。

 
-

-
 Firefoxでは、バックグラウンドページではalert()、confirm()、prompt()の使用はサポートされません。

+

+
Firefoxでは、バックグラウンドページではalert()、confirm()、prompt()の使用はサポートされません。

 

 
-
WebExtension APIs

+
WebExtension API

 
-
バックグラウンドスクリプトは、その拡張機能が持つパーミッションの範囲で WebExtension API にアクセスできます。

+
バックグラウンドスクリプトは、その拡張機能が持つパーミッションの範囲で WebExtension API にアクセスできます。

 
-
Cross-origin access

+
オリジン間アクセス

 
-
バックグラウンドスクリプトは、拡張機能が持つ host パーミッションに一致するホストに XHR リクエストを送信できます。

+
バックグラウンドスクリプトは、拡張機能が持つ host パーミッションに一致するホストに XHR リクエストを送信することができます。

 
-
Web content

+
ウェブコンテンツ

 
-
バックグラウンドスクリプトからウェブページに直接アクセスすることができません。しかし、ウェブページにコンテンツスクリプトを読み込ませれば、メッセージを渡す API を使ってコンテンツスクリプトと通信をすることができます。

+
バックグラウンドスクリプトからウェブページに直接アクセスすることができません。しかし、ウェブページにコンテンツスクリプトを読み込ませれば、メッセージを渡す API を使ってコンテンツスクリプトと通信をすることができます。

 
-
Content security policy

+
コンテンツセキュリティポリシー

 
-
バックグラウンドスクリプトは Content Security Policy による制約を受けており、eval() のように危険な処理は実行できません。詳細は Content Security Policy を参照してください。

+
バックグラウンドスクリプトは Content Security Policy による制約を受けており、 eval() のように危険な処理は実行できません。

 
-
+
詳細は Content Security Policy を参照してください。

+
+
 
 
拡張機能には HTML 文書で中身を決めたいろいろなユーザーインターフェイスコンポーネントを入れる事ができます。

 
-
 
 
各コンポーネント用に、HTML ファイルと、それを指定する manifest.json の特定プロパティを作成します。HTML ファイルには、通常のウェブページと同様に、CSS と JavaScript ファイルを入れる事ができます。

 
-
これらのすべては拡張機能ページの一種で、通常のウェブページと異なり、JavaScript はバックグラウンドスクリプトと同じ権限で WebExtension API を使用できます。バックグラウンドページの変数にも{{WebExtAPIRef("runtime.getBackgroundPage()")}} を使って直接アクセスすることさえできます。

+
これらのすべては拡張機能ページの一種で、通常のウェブページと異なり、JavaScript はバックグラウンドスクリプトと同じ権限で WebExtension API を使用できます。

 
-
拡張機能ページ

+
拡張機能ページ

 
-
拡張機能に事前定義された UI コンポーネントに属さない HTML 文書を入れることもできます。サイドバー、ポップアップ、オプションページに提供されるドキュメントと違って、これは manifest.json 内にエントリーがないです。しかし、バックグラウンドスクリプトと同様に権限のある WebExtension API のすべてにアクセスできます。

+
拡張機能に事前定義された UI コンポーネントに属さない HTML 文書を入れることもできます。サイドバー、ポップアップ、オプションページに提供されるドキュメントと違って、これは manifest.json 内にエントリーがないです。しかし、バックグラウンドスクリプトと同様に権限のある WebExtension API のすべてにアクセスできます。

 
 
典型的には {{WebExtAPIRef("windows.create()")}} か {{WebExtAPIRef("tabs.create()")}} を使ってページを読み込みます。

 
 
詳しくは拡張機能ページを見てください。

 
-
コンテンツスクリプト

+
コンテンツスクリプト

 
 
ウェブページにアクセスして操作するにはコンテンツスクリプトが用いられます。コンテンツスクリプトは ウェブページに読み込まれて実行されます。

 
-
コンテンツスクリプト はアドオンが提供するスクリプトであり、ウェブページのコンテキスト内で動作します。このため、{{HTMLElement("script")}} 要素で取得されたものなど、そのページ自身が読み込んだスクリプトとは異なります。

+
コンテンツスクリプトはアドオンが提供するスクリプトであり、ウェブページのコンテキスト内で動作します。このため、{{HTMLElement("script")}} 要素で取得されたものなど、そのページ自身が読み込んだスクリプトとは異なります。

 
 
ウェブページに読み込まれた通常のスクリプトと同様に、コンテンツスクリプトも ウェブページの DOM へアクセスできます。

 
@@ -132,19 +141,19 @@ translation_of: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension
 
 
 
コンテンツスクリプトから通常のスクリプトに直接アクセスすることはできませんが、標準化されている window.postMessage() API を用いれば、スクリプト間でメッセージを交換することが可能です。

 
 
ここでの議論対象であるコンテンツスクリプトとは基本的に JavaScript のことを指していますが、先ほどと同じ方法で ウェブページに CSS を差し込むこともできます。

 
-
詳しくは コンテンツスクリプトの記事を参照してください。

+
詳しくは コンテンツスクリプトの記事を参照してください。

 
-
Web accessible resources

+
Web accessible resources

 
 
Web accessible resources とは、拡張機能にインクルードしてコンテンツスクリプトや ウェブページのスクリプトからアクセスできるリソースのことであり、代表的なものは画像や HTML / CSS / JavaScript です。web-accessible なリソースは、特殊な URI スキームを介して ウェブページのスクリプトやコンテンツスクリプトから参照できます。

 
 
例えばコンテンツスクリプトから ウェブページ内に画像を挿入したい場合、拡張機能に画像をインクルードして web-accessible とし、画像を src 属性で参照する img タグをコンテンツスクリプトが作成して ウェブページに追加する、といったシナリオが考えられます。

 
-
詳細は、manifest.json のキーの web_accessible_resources の文書を見てください。

+
詳細は、 manifest.json のキーである web_accessible_resources のドキュメントを見てください。

-- 
cgit v1.2.3-54-g00ecf