From 6ef1fa4618e08426b874529619a66adbd3d1fcf0 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:07:59 +0100 Subject: unslug ja: move --- .../api/devtools.inspectedwindow/eval/index.html | 211 ---------- .../api/devtools.inspectedwindow/index.html | 79 ---- .../api/devtools.inspectedwindow/tabid/index.html | 77 ---- .../webextensions/api/devtools.network/index.html | 74 ---- .../webextensions/api/devtools.panels/index.html | 105 ----- .../api/devtools/inspectedwindow/eval/index.html | 211 ++++++++++ .../api/devtools/inspectedwindow/index.html | 79 ++++ .../api/devtools/inspectedwindow/tabid/index.html | 77 ++++ .../webextensions/api/devtools/network/index.html | 74 ++++ .../webextensions/api/devtools/panels/index.html | 105 +++++ .../index.html | 21 + .../packaging_and_installation/index.html | 219 ---------- .../porting_from_google_chrome/index.html | 24 -- .../add-ons/webextensions/prerequisites/index.html | 17 + .../publishing_your_webextension/index.html | 68 ---- .../index.html" | 21 - .../add-ons/webextensions/walkthrough/index.html | 451 --------------------- .../your_second_webextension/index.html | 451 +++++++++++++++++++++ .../index.html" | 17 - 19 files changed, 1035 insertions(+), 1346 deletions(-) delete mode 100644 files/ja/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/eval/index.html delete mode 100644 files/ja/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/index.html delete mode 100644 files/ja/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/tabid/index.html delete mode 100644 files/ja/mozilla/add-ons/webextensions/api/devtools.network/index.html delete mode 100644 files/ja/mozilla/add-ons/webextensions/api/devtools.panels/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/tabid/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/devtools/network/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/devtools/panels/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/developing_webextensions_for_thunderbird/index.html delete mode 100644 files/ja/mozilla/add-ons/webextensions/packaging_and_installation/index.html delete mode 100644 files/ja/mozilla/add-ons/webextensions/porting_from_google_chrome/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/prerequisites/index.html delete mode 100644 files/ja/mozilla/add-ons/webextensions/publishing_your_webextension/index.html delete mode 100644 "files/ja/mozilla/add-ons/webextensions/thunderbird\343\201\253\343\201\212\343\201\221\343\202\213webextensions\343\201\253\343\202\210\343\202\213\343\202\242\343\203\211\343\202\244\343\203\263\351\226\213\347\231\272/index.html" delete mode 100644 files/ja/mozilla/add-ons/webextensions/walkthrough/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/your_second_webextension/index.html delete mode 100644 "files/ja/mozilla/add-ons/webextensions/\345\211\215\346\217\220\346\235\241\344\273\266/index.html" (limited to 'files/ja/mozilla/add-ons') diff --git a/files/ja/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/eval/index.html b/files/ja/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/eval/index.html deleted file mode 100644 index 5ed0d6580f..0000000000 --- a/files/ja/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/eval/index.html +++ /dev/null @@ -1,211 +0,0 @@ ---- -title: devtools.inspectedWindow.eval() -slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval ---- -
{{AddonSidebar()}}
- -

devtools が接続されているウィンドウで JavaScript を実行します。

- -

これは {{WebExtAPIRef("tabs.executeScript()")}} を使用してコンテンツスクリプトを添付することに似ていますが、主に2つの違いがあります。

- -

第1に、JavaScript はブラウザが通常 devtools コンソール実装で提供する特別なコマンドのセットを使用できます。たとえば、"$0" を使用してインスペクタで現在選択されている要素を参照します。

- -

次に、実行する JavaScript はページが読み込んだスクリプトによってページに加えられた変更を確認できます。これは、ページスクリプトが読み込まれなかった場合に存在するページを表示するコンテンツスクリプトとは対照的です。ただし、コンテンツスクリプトによって提供される分離は意図的なセキュリティ機能であり、DOM 関数とプロパティを再定義することにより、悪意のあるまたは単に非協力的な Web ページがWebExtensions API を混乱または破壊することを困難にすることを目的としています。つまり eval() を使用してこの保護を放棄する場合は非常に注意する必要があり、eval() を使用する必要がない限りコンテンツスクリプトを使用する必要があります。

- -

スクリプトは、ページのメインフレームでデフォルトで評価されます。スクリプトは、JSON として表現できる値に評価する必要があります (たとえば、関数または関数を含むオブジェクトには評価されない可能性があることを意味します)。デフォルトでは、スクリプトはページに添付されたコンテンツスクリプトを表示しません。

- -

"about:addons" などの特権ブラウザウィンドウで eval() を呼び出すことはできません。

- -

オプションで options パラメータを指定できます。options パラメータには、異なるフレームまたは添付コンテンツスクリプトのコンテキストでスクリプトを評価するオプションが含まれます。Firefox はまだ options パラメータをサポートしていないことに注意してください。

- -

eval() 関数は、スクリプトの評価結果またはエラーを解決する Promise を返します。

- -

ヘルパー

- -

The script gets access to a number of objects that help the injected script interact with the developer tools. The following helpers are currently supported:

- -
-
$0
-
Contains a reference to the element that's currently selected in the devtools Inspector.
-
inspect()
-
Given an object, if it is an DOM element in the page, selects it in the devtools Inspector, otherwise it creates an object preview in the webconsole.
-
- -

See some examples.

- -

Syntax

- -
var evaluating = browser.devtools.inspectedWindow.eval(
-  expression,       // string
-  options           // object
-)
-
- -

Parameters

- -
-
expression
-
string. The JavaScript expression to evaluate. The string must evaluate to a object that can be represented as JSON, or an exception will be thrown. For example, expression must not evaluate to a function.
-
options{{optional_inline}}
-
object. Options for the function (Note that Firefox does not yet support this options), as follows:
-
-
-
frameURL{{optional_inline}}
-
string. The URL of the frame in which to evaluate the expression. If this is omitted, the expression is evaluated in the main frame of the window.
-
useContentScriptContext{{optional_inline}}
-
boolean. If true, evaluate the expression in the context of any content scripts that this extension has attached to the page. If you set this option, then you must have actually attached some content scripts to the page, or a Devtools error will be thrown.
-
contextSecurityOrigin {{optional_inline}}
-
string. Evaluate the expression in the context of a content script attached by a different extension, whose origin matches the value given here. This overrides useContentScriptContext.
-
-
-
- -

Return value

- -

A Promise that will be fulfilled with an array containing two elements.

- -

If no error occurred, element 0 will contain the result of evaluating the expression, and element 1 will be undefined.

- -

If an error occurred, element 0 will be undefined, and element 1 will contain an object giving details about the error. Two different sorts of errors are distinguished:

- - - -

ブラウザの対応状況

- -

{{Compat("webextensions.api.devtools.inspectedWindow.eval")}}

- - - -

例

- -

This tests whether jQuery is defined in the inspected window, and logs the result. Note that this wouldn't work in a content script, because even if jQuery were defined, the content script would not see it.

- -
function handleError(error) {
-  if (error.isError) {
-    console.log(`Devtools error: ${error.code}`);
-  } else {
-    console.log(`JavaScript error: ${error.value}`);
-  }
-}
-
-function handleResult(result) {
-  console.log(result);
-  if (result[0] !== undefined) {
-    console.log(`jQuery: ${result[0]}`);
-  } else if (result[1]) {
-    handleError(result[1]);
-  }
-}
-
-const checkjQuery = "typeof jQuery != 'undefined'";
-
-evalButton.addEventListener("click", () => {
-  browser.devtools.inspectedWindow.eval(checkjQuery)
-    .then(handleResult);
-});
- -

Helper examples

- -

This uses the $0 helper to set the background color of the element that's currently selected in the Inspector:

- -
const evalButton = document.querySelector("#reddinate");
-const evalString = "$0.style.backgroundColor = 'red'";
-
-function handleError(error) {
-  if (error.isError) {
-    console.log(`Devtools error: ${error.code}`);
-  } else {
-    console.log(`JavaScript error: ${error.value}`);
-  }
-}
-
-function handleResult(result) {
-  if (result[1]) {
-    handleError(result[1]);
-  }
-}
-
-evalButton.addEventListener("click", () => {
-  browser.devtools.inspectedWindow.eval(evalString)
-    .then(handleResult);
-});
-
- -

This uses the inspect() helper to select the first <h1> element in the page:

- -
const inspectButton = document.querySelector("#inspect");
-const inspectString = "inspect(document.querySelector('h1'))";
-
-function handleError(error) {
-  if (error.isError) {
-    console.log(`Devtools error: ${error.code}`);
-  } else {
-    console.log(`JavaScript error: ${error.value}`);
-  }
-}
-
-function handleResult(result) {
-  if (result[1]) {
-    handleError(result[1]);
-  }
-}
-
-inspectButton.addEventListener("click", () => {
-  browser.devtools.inspectedWindow.eval(inspectString)
-    .then(handleResult);
-});
-
- -

{{WebExtExamples}}

- -
Acknowledgements - -

This API is based on Chromium's chrome.devtools API.

- -

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

-
- - diff --git a/files/ja/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/index.html b/files/ja/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/index.html deleted file mode 100644 index e7a8f7181d..0000000000 --- a/files/ja/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: devtools.inspectedWindow -slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow -tags: - - API - - Add-ons - - Extensions - - Reference - - WebExtensions - - devtools.inspectedWindow -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow ---- -
{{AddonSidebar}}
- -
-

このページは Firefox 54 に存在する WebExtensions devtools APIs を記述しています。このAPI は Chrome devtools APIs に基づいていますが、Firefoxでは実装されていない多くの機能があり、よってここに文書化されていません。現在欠けている機能を見るには、 Limitations of the devtools APIs を見てください。

-
- -

devtools.inspectedWindow API によって開発ツール拡張機能では開発ツールが割当てられたウィンドウと相互作用できます。

- -

すべての devtools API と同様に、この API はmanifest.json devtools_page キー内に定義されたドキュメントや、拡張機能が作成するその他の開発ツールドキュメント(例えば拡張機能が作ったパネル自身のドキュメント)の中だけでコードを利用できます。詳細は developer tools の拡張 を見てください。

- -

プロパティ

- -
-
devtools.inspectedWindow.tabId
-
開発ツールが付属しているウィンドウの ID
-
- -

Functions

- -
-
devtools.inspectedWindow.eval()
-
ターゲットウィンドウ内の  JavaScript を評価する
-
devtools.inspectedWindow.reload()
-
ターゲットウィンドウのドキュメントを再読み込みする
-
- -

ブラウザ実装状況

- -

{{Compat("webextensions.api.devtools.inspectedWindow")}}{{WebExtExamples("h2")}}

- -
謝辞 - -

この API は Chromium の chrome.devtools.inspectedWindow API に基づいています。また、このドキュメントは bookmarks.json における Chromium のコードに基づいています。

- -

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

-
- - diff --git a/files/ja/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/tabid/index.html b/files/ja/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/tabid/index.html deleted file mode 100644 index 6837e95e36..0000000000 --- a/files/ja/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/tabid/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: devtools.inspectedWindow.tabId -slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/tabId -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/tabId ---- -
{{AddonSidebar()}}
- -

devtools のこのインスタンスがアタッチされる {{WebExtAPIRef("tabs.Tab", "tab")}} の ID。番号で表されます。

- -

これは拡張機能のバックグラウンドページに送信できるため、バックグラウンドページは {{WebExtAPIRef("tabs")}} API を使用してタブと対話できます:

- -
// devtools-panel.js
-
-const scriptToAttach = "document.body.innerHTML = 'Hi from the devtools';";
-
-attachContentScriptButton.addEventListener("click", () => {
-  browser.runtime.sendMessage({
-    tabId: browser.devtools.inspectedWindow.tabId,
-    script: scriptToAttach
-  });
-});
- -
// background.js
-
-function handleMessage(request, sender, sendResponse) {
-  browser.tabs.executeScript(request.tabId, {
-    code: request.script
-  });
-}
-
-browser.runtime.onMessage.addListener(handleMessage);
- -

ブラウザの対応状況

- -

{{Compat("webextensions.api.devtools.inspectedWindow.tabId")}}

- - - -

{{WebExtExamples}}

- -
謝辞 - -

この API は Chromium の chrome.devtools API に基づいています。

- -

Microsoft Edge の互換性データは Microsoft Corporation によって提供され、Creative Commons Attribution 3.0 United States License に含まれています。

-
- - diff --git a/files/ja/mozilla/add-ons/webextensions/api/devtools.network/index.html b/files/ja/mozilla/add-ons/webextensions/api/devtools.network/index.html deleted file mode 100644 index b5d97b1b1e..0000000000 --- a/files/ja/mozilla/add-ons/webextensions/api/devtools.network/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: devtools.network -slug: Mozilla/Add-ons/WebExtensions/API/devtools.network -tags: - - API - - Add-ons - - Extensions - - Reference - - WebExtensions - - devtools.network -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.network ---- -
{{AddonSidebar}}
- -
-

このページは Firefox 54 に存在する WebExtensions devtools APIs を記述しています。このAPI は Chrome devtools APIs に基づいていますが、Firefoxでは実装されていない多くの機能があり、よってここに文書化されていません。現在欠けている機能を見るには、 Limitations of the devtools APIs を見てください。

-
- -

devtools.network API によって開発ツール拡張機能では開発ツールが付属しているウィンドウ(インスペクト対象ウィンドウ)に関連するネットワークリクエストの情報を取得できます。

- -

すべての devtools API と同様に、この API はmanifest.json devtools_page キー内に定義されたドキュメントや、拡張機能が作成するその他の開発ツールドキュメント(例えば拡張機能が作ったパネル自身のドキュメント)の中だけでコードを利用できます。これ以上は 開発ツールを拡張するを見てください。

- -

Events

- -
-
devtools.network.onNavigated
-
ユーザーが新規ページのインスペクト対象ウィンドウに移動した時に発火します
-
- -

ブラウザ実装状況

- -

{{Compat("webextensions.api.devtools.network")}}

- -

{{WebExtExamples("h2")}}

- -
謝辞 - -

この API は Chromium の chrome.devtools.network API に基づいています。また、このドキュメントは bookmarks.json における Chromium のコードに基づいています。

- -

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

- -

 

-
- - diff --git a/files/ja/mozilla/add-ons/webextensions/api/devtools.panels/index.html b/files/ja/mozilla/add-ons/webextensions/api/devtools.panels/index.html deleted file mode 100644 index efb826a25f..0000000000 --- a/files/ja/mozilla/add-ons/webextensions/api/devtools.panels/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: devtools.panels -slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels -tags: - - API - - Add-ons - - Extensions - - Reference - - WebExtensions - - devtools.panels -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels ---- -
{{AddonSidebar}}
- -
-

このAPI は Chrome devtools APIs に基づいていますが、Firefoxでは実装されていない多くの機能があり、よってここに文書化されていません。現在欠けている機能を見るには、 Limitations of the devtools APIs を見てください。

-
- -

devtools.panels API によって開発ツール拡張機能では開発ツールウィンドウ内のユーザーインターフェイスの定義ができます。

- -

開発ツールウィンドウにはいくつもの個別のツールがあります - JavaScript デバッガー、ネットワークモニター、などが。最上位のタブの行でユーザーは色々なツールを切り替えられます。ツールのUIをホストするこのウィンドウは「パネル」と呼ばれます。

- -

devtools.panels API にて開発ツールウィンドウ内の新規パネルを作成できます。

- -

すべての devtools API と同様に、この API はmanifest.json devtools_page キー内に定義されたドキュメントや、拡張機能が作成するその他の開発ツールドキュメント(例えばパネル自身のドキュメント)の中だけでコードを利用できます。これ以上は 開発ツールを拡張するを見てください。

- -

型

- -
-
devtools.panels.ElementsPanel
-
ブラウザーの開発ツールの HTML/CSS インスペクターを表す
-
devtools.panels.ExtensionPanel
-
拡張機能によって作られた開発ツールパネルを表す
-
devtools.panels.ExtensionSidebarPane
-
ブラウザーの開発ツールの HTML/CSS インスペクターに、拡張機能が追加したペインを表す
-
- -

プロパティ

- -
-
devtools.panels.elements
-
ElementsPanel オブジェクトの参照
-
devtools.panels.themeName
-
現在の開発ツールテーマの名前
-
- -

関数

- -
-
devtools.panels.create()
-
開発ツールを作成する
-
- -

イベント

- -
-
devtools.panels.onThemeChanged
-
開発ツールテーマが変更された時に発火する
-
- -

ブラウザ実装状況

- -

{{Compat("webextensions.api.devtools.panels", 2)}}

- -

{{WebExtExamples("h2")}}

- -
謝辞 - -

この API は Chromium の chrome.devtools.panels API に基づいています。

- -

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

- -

 

-
- - diff --git a/files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.html b/files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.html new file mode 100644 index 0000000000..5ed0d6580f --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.html @@ -0,0 +1,211 @@ +--- +title: devtools.inspectedWindow.eval() +slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval +--- +
{{AddonSidebar()}}
+ +

devtools が接続されているウィンドウで JavaScript を実行します。

+ +

これは {{WebExtAPIRef("tabs.executeScript()")}} を使用してコンテンツスクリプトを添付することに似ていますが、主に2つの違いがあります。

+ +

第1に、JavaScript はブラウザが通常 devtools コンソール実装で提供する特別なコマンドのセットを使用できます。たとえば、"$0" を使用してインスペクタで現在選択されている要素を参照します。

+ +

次に、実行する JavaScript はページが読み込んだスクリプトによってページに加えられた変更を確認できます。これは、ページスクリプトが読み込まれなかった場合に存在するページを表示するコンテンツスクリプトとは対照的です。ただし、コンテンツスクリプトによって提供される分離は意図的なセキュリティ機能であり、DOM 関数とプロパティを再定義することにより、悪意のあるまたは単に非協力的な Web ページがWebExtensions API を混乱または破壊することを困難にすることを目的としています。つまり eval() を使用してこの保護を放棄する場合は非常に注意する必要があり、eval() を使用する必要がない限りコンテンツスクリプトを使用する必要があります。

+ +

スクリプトは、ページのメインフレームでデフォルトで評価されます。スクリプトは、JSON として表現できる値に評価する必要があります (たとえば、関数または関数を含むオブジェクトには評価されない可能性があることを意味します)。デフォルトでは、スクリプトはページに添付されたコンテンツスクリプトを表示しません。

+ +

"about:addons" などの特権ブラウザウィンドウで eval() を呼び出すことはできません。

+ +

オプションで options パラメータを指定できます。options パラメータには、異なるフレームまたは添付コンテンツスクリプトのコンテキストでスクリプトを評価するオプションが含まれます。Firefox はまだ options パラメータをサポートしていないことに注意してください。

+ +

eval() 関数は、スクリプトの評価結果またはエラーを解決する Promise を返します。

+ +

ヘルパー

+ +

The script gets access to a number of objects that help the injected script interact with the developer tools. The following helpers are currently supported:

+ +
+
$0
+
Contains a reference to the element that's currently selected in the devtools Inspector.
+
inspect()
+
Given an object, if it is an DOM element in the page, selects it in the devtools Inspector, otherwise it creates an object preview in the webconsole.
+
+ +

See some examples.

+ +

Syntax

+ +
var evaluating = browser.devtools.inspectedWindow.eval(
+  expression,       // string
+  options           // object
+)
+
+ +

Parameters

+ +
+
expression
+
string. The JavaScript expression to evaluate. The string must evaluate to a object that can be represented as JSON, or an exception will be thrown. For example, expression must not evaluate to a function.
+
options{{optional_inline}}
+
object. Options for the function (Note that Firefox does not yet support this options), as follows:
+
+
+
frameURL{{optional_inline}}
+
string. The URL of the frame in which to evaluate the expression. If this is omitted, the expression is evaluated in the main frame of the window.
+
useContentScriptContext{{optional_inline}}
+
boolean. If true, evaluate the expression in the context of any content scripts that this extension has attached to the page. If you set this option, then you must have actually attached some content scripts to the page, or a Devtools error will be thrown.
+
contextSecurityOrigin {{optional_inline}}
+
string. Evaluate the expression in the context of a content script attached by a different extension, whose origin matches the value given here. This overrides useContentScriptContext.
+
+
+
+ +

Return value

+ +

A Promise that will be fulfilled with an array containing two elements.

+ +

If no error occurred, element 0 will contain the result of evaluating the expression, and element 1 will be undefined.

+ +

If an error occurred, element 0 will be undefined, and element 1 will contain an object giving details about the error. Two different sorts of errors are distinguished:

+ + + +

ブラウザの対応状況

+ +

{{Compat("webextensions.api.devtools.inspectedWindow.eval")}}

+ + + +

例

+ +

This tests whether jQuery is defined in the inspected window, and logs the result. Note that this wouldn't work in a content script, because even if jQuery were defined, the content script would not see it.

+ +
function handleError(error) {
+  if (error.isError) {
+    console.log(`Devtools error: ${error.code}`);
+  } else {
+    console.log(`JavaScript error: ${error.value}`);
+  }
+}
+
+function handleResult(result) {
+  console.log(result);
+  if (result[0] !== undefined) {
+    console.log(`jQuery: ${result[0]}`);
+  } else if (result[1]) {
+    handleError(result[1]);
+  }
+}
+
+const checkjQuery = "typeof jQuery != 'undefined'";
+
+evalButton.addEventListener("click", () => {
+  browser.devtools.inspectedWindow.eval(checkjQuery)
+    .then(handleResult);
+});
+ +

Helper examples

+ +

This uses the $0 helper to set the background color of the element that's currently selected in the Inspector:

+ +
const evalButton = document.querySelector("#reddinate");
+const evalString = "$0.style.backgroundColor = 'red'";
+
+function handleError(error) {
+  if (error.isError) {
+    console.log(`Devtools error: ${error.code}`);
+  } else {
+    console.log(`JavaScript error: ${error.value}`);
+  }
+}
+
+function handleResult(result) {
+  if (result[1]) {
+    handleError(result[1]);
+  }
+}
+
+evalButton.addEventListener("click", () => {
+  browser.devtools.inspectedWindow.eval(evalString)
+    .then(handleResult);
+});
+
+ +

This uses the inspect() helper to select the first <h1> element in the page:

+ +
const inspectButton = document.querySelector("#inspect");
+const inspectString = "inspect(document.querySelector('h1'))";
+
+function handleError(error) {
+  if (error.isError) {
+    console.log(`Devtools error: ${error.code}`);
+  } else {
+    console.log(`JavaScript error: ${error.value}`);
+  }
+}
+
+function handleResult(result) {
+  if (result[1]) {
+    handleError(result[1]);
+  }
+}
+
+inspectButton.addEventListener("click", () => {
+  browser.devtools.inspectedWindow.eval(inspectString)
+    .then(handleResult);
+});
+
+ +

{{WebExtExamples}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.devtools API.

+ +

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.html b/files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.html new file mode 100644 index 0000000000..e7a8f7181d --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.html @@ -0,0 +1,79 @@ +--- +title: devtools.inspectedWindow +slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow +tags: + - API + - Add-ons + - Extensions + - Reference + - WebExtensions + - devtools.inspectedWindow +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow +--- +
{{AddonSidebar}}
+ +
+

このページは Firefox 54 に存在する WebExtensions devtools APIs を記述しています。このAPI は Chrome devtools APIs に基づいていますが、Firefoxでは実装されていない多くの機能があり、よってここに文書化されていません。現在欠けている機能を見るには、 Limitations of the devtools APIs を見てください。

+
+ +

devtools.inspectedWindow API によって開発ツール拡張機能では開発ツールが割当てられたウィンドウと相互作用できます。

+ +

すべての devtools API と同様に、この API はmanifest.json devtools_page キー内に定義されたドキュメントや、拡張機能が作成するその他の開発ツールドキュメント(例えば拡張機能が作ったパネル自身のドキュメント)の中だけでコードを利用できます。詳細は developer tools の拡張 を見てください。

+ +

プロパティ

+ +
+
devtools.inspectedWindow.tabId
+
開発ツールが付属しているウィンドウの ID
+
+ +

Functions

+ +
+
devtools.inspectedWindow.eval()
+
ターゲットウィンドウ内の  JavaScript を評価する
+
devtools.inspectedWindow.reload()
+
ターゲットウィンドウのドキュメントを再読み込みする
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.devtools.inspectedWindow")}}{{WebExtExamples("h2")}}

+ +
謝辞 + +

この API は Chromium の chrome.devtools.inspectedWindow API に基づいています。また、このドキュメントは bookmarks.json における Chromium のコードに基づいています。

+ +

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/tabid/index.html b/files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/tabid/index.html new file mode 100644 index 0000000000..6837e95e36 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/tabid/index.html @@ -0,0 +1,77 @@ +--- +title: devtools.inspectedWindow.tabId +slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/tabId +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/tabId +--- +
{{AddonSidebar()}}
+ +

devtools のこのインスタンスがアタッチされる {{WebExtAPIRef("tabs.Tab", "tab")}} の ID。番号で表されます。

+ +

これは拡張機能のバックグラウンドページに送信できるため、バックグラウンドページは {{WebExtAPIRef("tabs")}} API を使用してタブと対話できます:

+ +
// devtools-panel.js
+
+const scriptToAttach = "document.body.innerHTML = 'Hi from the devtools';";
+
+attachContentScriptButton.addEventListener("click", () => {
+  browser.runtime.sendMessage({
+    tabId: browser.devtools.inspectedWindow.tabId,
+    script: scriptToAttach
+  });
+});
+ +
// background.js
+
+function handleMessage(request, sender, sendResponse) {
+  browser.tabs.executeScript(request.tabId, {
+    code: request.script
+  });
+}
+
+browser.runtime.onMessage.addListener(handleMessage);
+ +

ブラウザの対応状況

+ +

{{Compat("webextensions.api.devtools.inspectedWindow.tabId")}}

+ + + +

{{WebExtExamples}}

+ +
謝辞 + +

この API は Chromium の chrome.devtools API に基づいています。

+ +

Microsoft Edge の互換性データは Microsoft Corporation によって提供され、Creative Commons Attribution 3.0 United States License に含まれています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/devtools/network/index.html b/files/ja/mozilla/add-ons/webextensions/api/devtools/network/index.html new file mode 100644 index 0000000000..b5d97b1b1e --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/devtools/network/index.html @@ -0,0 +1,74 @@ +--- +title: devtools.network +slug: Mozilla/Add-ons/WebExtensions/API/devtools.network +tags: + - API + - Add-ons + - Extensions + - Reference + - WebExtensions + - devtools.network +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.network +--- +
{{AddonSidebar}}
+ +
+

このページは Firefox 54 に存在する WebExtensions devtools APIs を記述しています。このAPI は Chrome devtools APIs に基づいていますが、Firefoxでは実装されていない多くの機能があり、よってここに文書化されていません。現在欠けている機能を見るには、 Limitations of the devtools APIs を見てください。

+
+ +

devtools.network API によって開発ツール拡張機能では開発ツールが付属しているウィンドウ(インスペクト対象ウィンドウ)に関連するネットワークリクエストの情報を取得できます。

+ +

すべての devtools API と同様に、この API はmanifest.json devtools_page キー内に定義されたドキュメントや、拡張機能が作成するその他の開発ツールドキュメント(例えば拡張機能が作ったパネル自身のドキュメント)の中だけでコードを利用できます。これ以上は 開発ツールを拡張するを見てください。

+ +

Events

+ +
+
devtools.network.onNavigated
+
ユーザーが新規ページのインスペクト対象ウィンドウに移動した時に発火します
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.devtools.network")}}

+ +

{{WebExtExamples("h2")}}

+ +
謝辞 + +

この API は Chromium の chrome.devtools.network API に基づいています。また、このドキュメントは bookmarks.json における Chromium のコードに基づいています。

+ +

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+ +

 

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/devtools/panels/index.html b/files/ja/mozilla/add-ons/webextensions/api/devtools/panels/index.html new file mode 100644 index 0000000000..efb826a25f --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/devtools/panels/index.html @@ -0,0 +1,105 @@ +--- +title: devtools.panels +slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels +tags: + - API + - Add-ons + - Extensions + - Reference + - WebExtensions + - devtools.panels +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels +--- +
{{AddonSidebar}}
+ +
+

このAPI は Chrome devtools APIs に基づいていますが、Firefoxでは実装されていない多くの機能があり、よってここに文書化されていません。現在欠けている機能を見るには、 Limitations of the devtools APIs を見てください。

+
+ +

devtools.panels API によって開発ツール拡張機能では開発ツールウィンドウ内のユーザーインターフェイスの定義ができます。

+ +

開発ツールウィンドウにはいくつもの個別のツールがあります - JavaScript デバッガー、ネットワークモニター、などが。最上位のタブの行でユーザーは色々なツールを切り替えられます。ツールのUIをホストするこのウィンドウは「パネル」と呼ばれます。

+ +

devtools.panels API にて開発ツールウィンドウ内の新規パネルを作成できます。

+ +

すべての devtools API と同様に、この API はmanifest.json devtools_page キー内に定義されたドキュメントや、拡張機能が作成するその他の開発ツールドキュメント(例えばパネル自身のドキュメント)の中だけでコードを利用できます。これ以上は 開発ツールを拡張するを見てください。

+ +

型

+ +
+
devtools.panels.ElementsPanel
+
ブラウザーの開発ツールの HTML/CSS インスペクターを表す
+
devtools.panels.ExtensionPanel
+
拡張機能によって作られた開発ツールパネルを表す
+
devtools.panels.ExtensionSidebarPane
+
ブラウザーの開発ツールの HTML/CSS インスペクターに、拡張機能が追加したペインを表す
+
+ +

プロパティ

+ +
+
devtools.panels.elements
+
ElementsPanel オブジェクトの参照
+
devtools.panels.themeName
+
現在の開発ツールテーマの名前
+
+ +

関数

+ +
+
devtools.panels.create()
+
開発ツールを作成する
+
+ +

イベント

+ +
+
devtools.panels.onThemeChanged
+
開発ツールテーマが変更された時に発火する
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.devtools.panels", 2)}}

+ +

{{WebExtExamples("h2")}}

+ +
謝辞 + +

この API は Chromium の chrome.devtools.panels API に基づいています。

+ +

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+ +

 

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/developing_webextensions_for_thunderbird/index.html b/files/ja/mozilla/add-ons/webextensions/developing_webextensions_for_thunderbird/index.html new file mode 100644 index 0000000000..a6e6fd4bc6 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/developing_webextensions_for_thunderbird/index.html @@ -0,0 +1,21 @@ +--- +title: ThunderbirdにおけるWebExtensionsによるアドイン開発 +slug: Mozilla/Add-ons/WebExtensions/ThunderbirdにおけるWebExtensionsによるアドイン開発 +translation_of: Mozilla/Add-ons/WebExtensions/Developing_WebExtensions_for_Thunderbird +--- +

{{AddonSidebar}}{{Draft}}

+ +

Thunderbirdのアドイン開発はFirefoxと同様の方法でコーディングすることが可能です。
+ テキストエディタや、あなたの選んだコーディングツールで。

+ +

APIの違い

+ +

両者ともGeckoベースであるため、いくつかの違いはあるものの、Thunderbirdでは、Firefoxで使えるAPIの多くをサポートしています。
+ 詳細は、browser compatibility for manifest.json と browser support for JavaScript APIsを参照してください。

+ +

参考

+ + diff --git a/files/ja/mozilla/add-ons/webextensions/packaging_and_installation/index.html b/files/ja/mozilla/add-ons/webextensions/packaging_and_installation/index.html deleted file mode 100644 index 4afb4fe00e..0000000000 --- a/files/ja/mozilla/add-ons/webextensions/packaging_and_installation/index.html +++ /dev/null @@ -1,219 +0,0 @@ ---- -title: パッケージ化とインストール -slug: Mozilla/Add-ons/WebExtensions/Packaging_and_installation -translation_of: Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox -translation_of_original: Mozilla/Add-ons/WebExtensions/Packaging_and_installation ---- -
{{AddonSidebar}}
- -

この記事では、WebExtension を Firefox にインストールする方法を 2 つ紹介します。

- - - -

{{英語版章題("Loading from disk")}}

- -

ディスクから読み込む

- -

WebExtension を Firefox で動作させるには、この方法が最もシンプルです。また、ブートストラップ型拡張機能 や Add-on SDK を使ったアドオン といった、再起動の要らないアドオンはすべてこの方法でインストールできます。

- -

ここでは Firefox 45 以降が必要となります。

- -

ディスクから読み込むには、

- - - -

これでアドオンがインストールされ、Firefox を再起動するまで有効になります。

- -

{{EmbedYouTube("sAM78GU4P34")}}

- -

{{英語版章題("Updating a temporary add-on")}}

- -

一時的なアドオンの更新

- -

この方法でアドオンをインストールした場合、アドオンのファイルを更新すると何が起きるでしょうか？

- -

{{英語版章題("Before Firefox 48")}}

- -

Firefox 47 以前

- - - -
-

Firefox 47 以前では、Firefox を再起動せずに「一時的なアドオンを読み込む」をクリックしても更新は反映されない ことに注意してください。

-
- -

{{英語版章題("Firefox 48 onwards")}}

- -

Firefox 48 以降

- - - -
-

Firefox 48 のみに関する注意点として、about:debugging と about:addons に表示されるアドオンの名前と説明文は、「リロード」ボタンをクリックしても更新されません。この問題は Firefox 49 で修正されます。

-
- -

{{英語版章題("Package and install")}}

- -

パッケージ化してインストールする

- -

ディスクからの読込は 開発 / テスト / デバッグ のサイクルにおいては有効です。しかし、アドオンを他の人と共有したい場合は、アドオンを インストール可能な形式にパッケージ化する必要があります。

- -

{{英語版章題("Packaging")}}

- -

パッケージ化

- -

Firefox のアドオンは XPI ファイルでパッケージ化されます。XPI ファイルとは単なる ZIP ファイルですが、ファイルの拡張子は ".xpi" となります。

- -

一つ注意しなければならないのは、アドオンのファイルを含んだディレクトリの ZIP ファイルではなく、アドオンのファイルを直接含んだ ZIP ファイルとする必要がある点です。

- -

Windows

- -
    -
  1. アドオンのファイルが含まれているフォルダを開きます。
    2. -
  2. ファイルすべてを選択します。
    3. -
  3. 右クリックして "送る" → "圧縮（zip 形式）フォルダー" を選択します。
    4. -
  4. 作成されたファイルの名前を "something.zip" から "something.xpi" に変更します。
    5. -
- -

- -

Mac OS X

- -
    -
  1. アドオンのファイルが含まれているフォルダを開きます。
    2. -
  2. ファイルすべてを選択します。
    3. -
  3. 右クリックして "n 項目を圧縮" を選択します。
    4. -
  4. 作成されたファイルの名前を Archive.zip から something.xpi に変更します。
    5. -
- -

- -

Linux / Mac OS X Terminal

- -
    -
  1. cd path/to/my-addon/
    2. -
  2. zip -r ../my-addon.xpi *
    3. -
- -

{{英語版章題("Installation")}}

- -

インストール

- -

XPI ファイルをインストールする前に、次のどちらかの手順を踏む必要があります。

- - - -

{{英語版章題("Getting your add-on signed")}}

- -

アドオンに署名する

- -

XPI ファイルに署名するには、Signing and distributing your Add-on の記事を参照してください。

- -

{{英語版章題("Enabling unsigned add-ons")}}

- -

未署名のアドオンを有効にする

- -

未署名のアドオンを有効にするには、以下の手順に従ってください。

- - - -

{{EmbedYouTube("HgtBYDWtH4w")}}

- -

{{英語版章題("Installing an XPI in Firefox")}}

- -

XPI ファイルを Firefox にインストールする

- -

XPI ファイルに署名した場合でも、署名の制約を無効化した場合でも、XPI ファイルをインストールする手順はどちらも同じです。

- -
    -
  1. about:addons に移動します。
    2. -
  2. XPI ファイルをページにドラッグ & ドロップするか、歯車アイコンのメニューを開いて "ファイルからアドオンをインストール" を選択します。
    3. -
  3. 表示されたダイアログで "インストール" をクリックします。
    4. -
- -

他にも、"ファイル" → "開く" から XPI ファイルを選択したり、Control+O (Command+O) で選択することも可能です。

- -

{{英語版章題("Installing your extension of Firefox OS")}}

- -

アドオンを Firefox OS にインストールする

- -

USB か Wifi で接続されたデスクトップ PC で WebIDE を起動すれば、WebIDE からアドオンをインストールすることができます。WebIDE で "path/to/my-extension" をパッケージ型アプリとして開いてください。

- -

manifest.json の認証状況が正しければ、接続されたデバイス（Firefox OS の nightly ビルドで動作しているもの）にアドオンをインストールし、実行することができます。

- -

このアドオンの初回実行時は、Firefox OS のデバイスで Settings → Add-ons で有効にする必要があります。

- -

{{英語版章題("Troubleshooting")}}

- -

トラブルシューティング

- -

起こりやすい問題には以下のようなものがあります。

- -

"This add-on could not be installed because it has not been verified."

- - - -

"This add-on could not be installed because it appears to be corrupt."

- - - -

{{英語版章題("Nothing happens")}}

- -

何も起こらない

- - - -

{{英語版章題("Check the console")}}

- -

コンソールを確認する

- -

アドオンが解凍されたり読み込まれる過程に関して、他のエラーメッセージが ブラウザコンソール に表示されている場合があります。

diff --git a/files/ja/mozilla/add-ons/webextensions/porting_from_google_chrome/index.html b/files/ja/mozilla/add-ons/webextensions/porting_from_google_chrome/index.html deleted file mode 100644 index 3baef65043..0000000000 --- a/files/ja/mozilla/add-ons/webextensions/porting_from_google_chrome/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Google Chrome からの移行 -slug: Mozilla/Add-ons/WebExtensions/Porting_from_Google_Chrome -tags: - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension ---- -
{{AddonSidebar}}
- -

WebExtension API で開発する拡張機能は、ブラウザー間で互換性が維持されるように設計されており、大半は Google Chrome や Opera でサポートされている extension API とコード互換性があります。これらのブラウザー向けに書かれた拡張機能はほとんどの場合、少しの変更を加えるだけで Firefox でも動くようになります。ほぼすべての WebExtension API は、Chrome と同様に chrome 名前空間のコールバック関数を使ってサポートされています。chrome 名前空間でサポートされない唯一の API は、わざと Chrome と互換性がないものです。こうしたまれな場合は、API ドキュメントページでは明示的に、browser 名前空間だけでサポートされることを述べています。Chrome や Opera から拡張機能を移行する手順は下記の通り:

- -
    -
  1. manifest.json の設定項目や使用している WebExtensionAPI が Chrome との非互換性リファレンスに載っているか確認します。もし Firefox でサポートされていない設定項目や API を利用している場合、まだ移行できないかもしれません。 Mozilla はこの手順を自動化するサービスを次にて提供しています: https://www.extensiontest.com/.
    2. -
  2. 拡張機能を Firefox にインストールしてテストします。
    3. -
  3. もし何か問題が見つかったら、 dev-addons mailing list または IRC の  #webextensions に連絡してください。
    4. -
  4. アドオンの署名と配布を行うため、アドオンを AMO に送ります。
    5. -
- -

展開された拡張機能をロードするのに Chrome のコマンドラインオプションを使用していた場合、開発用に Firefox へ自動的に仮インストールを行う web-ext ツールを使用してみてください。  

- - - -
diff --git a/files/ja/mozilla/add-ons/webextensions/prerequisites/index.html b/files/ja/mozilla/add-ons/webextensions/prerequisites/index.html new file mode 100644 index 0000000000..751de9fe15 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/prerequisites/index.html @@ -0,0 +1,17 @@ +--- +title: 前提条件 +slug: Mozilla/Add-ons/WebExtensions/前提条件 +translation_of: Mozilla/Add-ons/WebExtensions/Prerequisites +--- +

WebExtension API を使って開発するには、いくつかの小さいセットアップが必要です。

+ + diff --git a/files/ja/mozilla/add-ons/webextensions/publishing_your_webextension/index.html b/files/ja/mozilla/add-ons/webextensions/publishing_your_webextension/index.html deleted file mode 100644 index 8b78f7bf11..0000000000 --- a/files/ja/mozilla/add-ons/webextensions/publishing_your_webextension/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: 拡張機能をパッケージ化する -slug: Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension -tags: - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Package_your_extension_ ---- -
{{AddonSidebar}}
- -

 

- -
-
-

Firefox ではパッケージされた拡張機能を "XPI ファイル" と呼び、これは単に色々な拡張機能を集めた ZIP ファイルです。

- -

AMO にアップロードする時に、XPI 拡張機能を使う必要はありません。

-
-
- -

 

- -

開発期間中、拡張機能は manifest.json ファイルとその他の必要なファイル—スクリプト、アイコン、HTML 文書などを含む 1 つのディレクトリで構成されるでしょう。AMO にアップロードするにはこれを 1 つの zip ファイルにまとめる必要があります。

- -

web-ext を使っている場合、拡張機能をパッケージ化するのに web-ext build を使います。その他の場合、下記の OS ごとの手順に従ってください。

- -
-

Tip. ZIP ファイルは拡張機能を構成するファイル自身でなくてはならず、これらを含んだディレクトリであってはいけません。

-
- -

Windows

- -
    -
  1. あなたの拡張機能を格納したフォルダを開きます。
    2. -
  2. すべてのファイルを選択します。
    3. -
  3. 右クリックメニューの「送る」 から zip圧縮を選びます。
    4. -
- -

- -

Mac OS X

- -
    -
  1. あなたの拡張機能を格納したディレクトリを開きます。
    2. -
  2. すべてのファイルを選択します。
    3. -
  3. 右クリックメニューから圧縮を選びます。
    4. -
- -

- -
-
コマンドについて http://www.info-zip.org/mans/zip.html.
-
- -

Linux / Mac OS X ターミナル

- -
    -
  1. ターミナルを開きます。
    2. -
  2. 拡張機能を含むディレクトリを開きます、そのコマンドは
    - cd path/to/my-extension/
    3. -
  3. ディレクトリの中身を ZIP します、そのコマンドは
    - zip -r -FS ../my-extension.zip *
    4. -
- -

 

- -

 

- -

 

diff --git "a/files/ja/mozilla/add-ons/webextensions/thunderbird\343\201\253\343\201\212\343\201\221\343\202\213webextensions\343\201\253\343\202\210\343\202\213\343\202\242\343\203\211\343\202\244\343\203\263\351\226\213\347\231\272/index.html" "b/files/ja/mozilla/add-ons/webextensions/thunderbird\343\201\253\343\201\212\343\201\221\343\202\213webextensions\343\201\253\343\202\210\343\202\213\343\202\242\343\203\211\343\202\244\343\203\263\351\226\213\347\231\272/index.html" deleted file mode 100644 index a6e6fd4bc6..0000000000 --- "a/files/ja/mozilla/add-ons/webextensions/thunderbird\343\201\253\343\201\212\343\201\221\343\202\213webextensions\343\201\253\343\202\210\343\202\213\343\202\242\343\203\211\343\202\244\343\203\263\351\226\213\347\231\272/index.html" +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: ThunderbirdにおけるWebExtensionsによるアドイン開発 -slug: Mozilla/Add-ons/WebExtensions/ThunderbirdにおけるWebExtensionsによるアドイン開発 -translation_of: Mozilla/Add-ons/WebExtensions/Developing_WebExtensions_for_Thunderbird ---- -

{{AddonSidebar}}{{Draft}}

- -

Thunderbirdのアドイン開発はFirefoxと同様の方法でコーディングすることが可能です。
- テキストエディタや、あなたの選んだコーディングツールで。

- -

APIの違い

- -

両者ともGeckoベースであるため、いくつかの違いはあるものの、Thunderbirdでは、Firefoxで使えるAPIの多くをサポートしています。
- 詳細は、browser compatibility for manifest.json と browser support for JavaScript APIsを参照してください。

- -

参考

- - diff --git a/files/ja/mozilla/add-ons/webextensions/walkthrough/index.html b/files/ja/mozilla/add-ons/webextensions/walkthrough/index.html deleted file mode 100644 index 3eb93ad7c9..0000000000 --- a/files/ja/mozilla/add-ons/webextensions/walkthrough/index.html +++ /dev/null @@ -1,451 +0,0 @@ ---- -title: 2 つめの拡張機能 -slug: Mozilla/Add-ons/WebExtensions/Walkthrough -tags: - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension ---- -
{{AddonSidebar}} -

初めての拡張機能を一通り読んでいる場合、既に拡張機能の書き方を知っていることと思います。この記事では、API の使い方をより詳しく説明するため、前回よりも少し複雑なアドオンを書いてみます。

- -

この拡張機能では Firefox のツールバーにボタンを新しく追加します。ユーザーがこのボタンをクリックすると、動物を選択できるポップアップが表示されます。ユーザーが動物を選択すると、ウェブページのコンテンツが選択した動物の画像に置き換わります。

- -

これらの機能を以下のように実装していきます。

- - - -

この拡張機能は次のような全体構成になっています。

- -

- -

この拡張機能はシンプルですが、WebExtensions API の基本的なコンセプトを多く含んでいます。

- - - -

ソースコード一式は GitHub で参照できます 。

- -

この拡張機能を作成するには、Firefox 45 以上が必要です。

- -

拡張機能を書く

- -

新しいディレクトリーを作成し、そのディレクトリーに移動します。

- -
mkdir beastify
-cd beastify
- -

manifest.json

- -

それでは、"beastify" ディレクトリー配下に新しいファイル "manifest.json" を作成します。以下の内容を書き込んで保存してください。

- -
{
-
-  "manifest_version": 2,
-  "name": "Beastify",
-  "version": "1.0",
-
-  "description": "Adds a browser action icon to the toolbar. Click the button to choose a beast. The active tab's body content is then replaced with a picture of the chosen beast. See https://developer.mozilla.org/ja/Add-ons/WebExtensions/Examples#beastify",
-  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/beastify",
-  "icons": {
-    "48": "icons/beasts-48.png"
-  },
-
-  "permissions": [
-    "activeTab"
-  ],
-
-  "browser_action": {
-    "default_icon": "icons/beasts-32.png",
-    "default_title": "Beastify",
-    "default_popup": "popup/choose_beast.html"
-  },
-
-  "web_accessible_resources": [
-    "beasts/frog.jpg",
-    "beasts/turtle.jpg",
-    "beasts/snake.jpg"
-  ]
-
-}
- - - -

パスはすべて manifest.json 自身からの相対パスで指定することに注意します。

- -

アイコン

- -

拡張機能にはアイコンを用意すると良いでしょう。このアイコンは、アドオンマネージャーで拡張機能のリスト横に表示されます（アドオンマネージャーは "about:addons" の URL から確認できます）。今回の manifest.json では "icons/beasts-48.png" を用意していると宣言しています。

- -

"icons" ディレクトリーを作成して、そこにアイコンを "beasts-48.png" という名前で 保存します。必要であれば サンプルで使用しているアイコン を利用しても構いません（このアイコンは Aha-Soft’s Free Retina iconset から引用したものであり、該当する ライセンス の下で使用しています）。

- -

アイコンを自分で用意する場合 48x48 ピクセルのサイズにする必要があります。高解像度のディスプレイに 96x96 ピクセルのアイコンを表示させたい場合は、manifest.json の icons オブジェクトに 96 というプロパティで設定してください。

- -
"icons": {
-  "48": "icons/beasts-48.png",
-  "96": "icons/beasts-96.png"
-}
- -

ツールバーのボタン

- -

ツールバーのボタンにもアイコンが必要です。今回の manifest.json では "icons/beasts-32.png" を用意していると宣言しています。

- -

アイコンを "beasts-32.png" という名前で "icons" ディレクトリー内に保存します。必要であれば サンプルで使用しているアイコン を利用しても構いません（このアイコンは IconBeast Lite のアイコン集 から引用したものであり、該当する ライセンス の下で使用しています）。

- -

ポップアップを使わない場合、ユーザーがボタンをクリックした際にはクリックイベントが拡張機能に向けて送出されます。ポップアップを使う場合にはクリックイベントは送出されず、代わりにポップアップが開きます。今回はポップアップが必要なので、次の項で作成しましょう。

- -

ポップアップ

- -

今回のポップアップでは、ユーザーが 3 つの動物から 1 つ選択できる機能を持つこととします。

- -

拡張機能のルートディレクトリー配下に "popup" というディレクトリーを新しく作成します。ここにはポップアップ用のコードを保管します。ポップアップは次の 3 ファイルから構成されます。

- - - -
mkdir popup
-cd popup
-touch choose_beast.html choose_beast.css choose_beast.js
- -

choose_beast.html

- -

HTML ファイルは次のようになります。

- -
<!DOCTYPE html>
-
-<html>
-  <head>
-    <meta charset="utf-8">
-    <link rel="stylesheet" href="choose_beast.css"/>
-  </head>
-
-<body>
-  <div id="popup-content">
-    <div class="button beast">Frog</div>
-    <div class="button beast">Turtle</div>
-    <div class="button beast">Snake</div>
-    <div class="button reset">Reset</div>
-  </div>
-  <div id="error-content" class="hidden">
-    <p>Can't beastify this web page.</p><p>Try a different page.</p>
-  </div>
-  <script src="choose_beast.js"></script>
-</body>
-
-</html>
- -

"popup-content" という ID の <div> 要素があって、動物の選択をする要素が入っています。"error-content" という ID の <div> 要素と "hidden" クラスもあります。それはポップアップの初期化に問題がある場合に使います。

- -

通常のウェブページと同じように CSS と JS ファイルを読み込んでいることに注意してください。

- -

choose_beast.css

- -

この CSS ではポップアップのサイズを固定し、3 つの選択肢がポップアップを埋めるようにし、基本的なスタイリングを施しています。また要素を class="hidden" で隠してもいます: つまり "error-content" <div> は既定では隠れています。

- -
html, body {
-  width: 100px;
-}
-
-.hidden {
-  display: none;
-}
-
-.button {
-  margin: 3% auto;
-  padding: 4px;
-  text-align: center;
-  font-size: 1.5em;
-  cursor: pointer;
-}
-
-.beast:hover {
-  background-color: #CFF2F2;
-}
-
-.beast {
-  background-color: #E5F2F2;
-}
-
-.reset {
-  background-color: #FBFBC9;
-}
-
-.reset:hover {
-  background-color: #EAEA9D;
-}
- -

choose_beast.js

- -

これがポップアップ用の JavaScript です:

- -

-/**
- * ページのすべてを隠す CSS、ただし
- * "beastify-image" クラスを持つ要素は除く
- */
-const hidePage = `body > :not(.beastify-image) {
-                    display: none;
-                  }`;
-
-/**
- * ボタンクリックをリッスンし、ページ内のコンテンツスクリプトに
- * 適切なメッセージを送る
- */
-function listenForClicks() {
-  document.addEventListener("click", (e) => {
-
-    /**
-     * 動物の名前を受け取って、対応する画像の URL を取得する
-     */
-    function beastNameToURL(beastName) {
-      switch (beastName) {
-        case "Frog":
-          return browser.extension.getURL("beasts/frog.jpg");
-        case "Snake":
-          return browser.extension.getURL("beasts/snake.jpg");
-        case "Turtle":
-          return browser.extension.getURL("beasts/turtle.jpg");
-      }
-    }
-
-    /**
-     * アクティブなタブにページを隠す CSS を挿入して
-     * 動物の URL を取得し、
-     * アクティブなタブのコンテンツスクリプトに "beastify" メッセージを送る
-     */
-    function beastify(tabs) {
-      browser.tabs.insertCSS({code: hidePage}).then(() => {
-        let url = beastNameToURL(e.target.textContent);
-        browser.tabs.sendMessage(tabs[0].id, {
-          command: "beastify",
-          beastURL: url
-        });
-      });
-    }
-
-    /**
-     * アクティブなタブからページを隠す CSS を削除し、
-     * アクティブなタブのコンテンツスクリプトに "reset" メッセージを送る
-     */
-    function reset(tabs) {
-      browser.tabs.removeCSS({code: hidePage}).then(() => {
-        browser.tabs.sendMessage(tabs[0].id, {
-          command: "reset",
-        });
-      });
-    }
-
-    /**
-     * ただコンソールにエラーをログ出力する
-     */
-    function reportError(error) {
-      console.error(`Could not beastify: ${error}`);
-    }
-
-    /**
-     * アクティブなタブを取得し、
-     * "beastify()" か "reset()" を適切に呼び出す
-     */
-    if (e.target.classList.contains("beast")) {
-      browser.tabs.query({active: true, currentWindow: true})
-        .then(beastify)
-        .catch(reportError);
-    }
-    else if (e.target.classList.contains("reset")) {
-      browser.tabs.query({active: true, currentWindow: true})
-        .then(reset)
-        .catch(reportError);
-    }
-  });
-}
-
-/**
- * スクリプトにエラーがあった。
- * ポップアップのエラーメッセージを表示し、通常の UI を隠す。
- */
-function reportExecuteScriptError(error) {
-  document.querySelector("#popup-content").classList.add("hidden");
-  document.querySelector("#error-content").classList.remove("hidden");
-  console.error(`Failed to execute beastify content script: ${error.message}`);
-}
-
-/**
- * ポップアップを読み込んだ時、コンテンツスクリプトをアクティブなタブに挿入し、
- * クリックハンドラーを追加する。
- * スクリプトの挿入ができない場合、エラー処理をする。
- */
-browser.tabs.executeScript({file: "/content_scripts/beastify.js"})
-.then(listenForClicks)
-.catch(reportExecuteScriptError);
- -

開始するのは 96行です。ポップアップスクリプトはポップアップが読み込まれ次第、アクティブなタブのコンテンツスクリプトを実行し、その手段は browser.tabs.executeScript() API です。コンテンツスクリプトの実行が成功したら、タブが閉じられるかユーザーが別のページに移動するまで、コンテンツスクリプトがページにロードされたままになります。

- -

browser.tabs.executeScript() の呼び出しがよく失敗する理由は、コンテンツスクリプトをすべてのページでは実行できないことです。例えば、about:debugging のような権限のあるブラウザーページでは実行できませんし、addons.mozilla.org ドメイン内のページでも実行できません。失敗した場合、reportExecuteScriptError() は "popup-content" <div> を隠して、"error-content" <div> を表示し、エラーを console にログ出力します。

- -

コンテンツスクリプトの実行が成功したら、listenForClicks() を呼び出します。これはポップアップのクリックをリッスンします。

- - - -

beastify() 関数は次の 3 つを行います:

- - - -

reset() 関数は動物化を取り消す:

- - - -

コンテンツスクリプト

- -

拡張機能のルートディレクトリー配下に "content_scripts" というディレクトリーを新しく作成します。続いてそこに "beastify.js" という名前のファイルを作成し、下記のスクリプトを記述します。

- -
(function() {
-  /**
-   * グローバルなガード変数をチェック、設定する。
-   * コンテンツスクリプトが再び同じページに挿入された場合、
-   * 次は何もしない。
-   */
-  if (window.hasRun) {
-    return;
-  }
-  window.hasRun = true;
-
-  /**
-   * 動物の画像の URL を受け取り、既存の動物をすべて削除し、次に
-   * 画像を指す IMG 要素の作成・スタイル適用を行い、
-   * 作成したノードをドキュメント内に挿入する
-   */
-  function insertBeast(beastURL) {
-    removeExistingBeasts();
-    let beastImage = document.createElement("img");
-    beastImage.setAttribute("src", beastURL);
-    beastImage.style.height = "100vh";
-    beastImage.className = "beastify-image";
-    document.body.appendChild(beastImage);
-  }
-
-  /**
-   * ページからすべての動物を削除する
-   */
-  function removeExistingBeasts() {
-    let existingBeasts = document.querySelectorAll(".beastify-image");
-    for (let beast of existingBeasts) {
-      beast.remove();
-  }
-  }
-
-  /**
-   * バックグラウンドスクリプトからのメッセージをリッスンし、
-   * "beastify()" か "reset()" を呼び出す。
-   */
-  browser.runtime.onMessage.addListener((message) => {
-    if (message.command === "beastify") {
-      insertBeast(message.beastURL);
-    } else if (message.command === "reset") {
-      removeExistingBeasts();
-    }
-  });
-
-})();
- -

このコンテンツスクリプトが最初にすることは、グローバル変数の window.hasRun のチェックです: セットされていればスクリプトは早くリターンし、そうでなければ window.hasRun をセットして処理し続けます。こうする理由は、ユーザーがポップアップを開くたびに、ポップアップはアクティブなタブのコンテンツスクリプトを実行して、そのために 1 つのタブに複数の実行スクリプトのインスタンスができてしまいます。これが起きると、最初のインスタンスだけが処理するのを確かめる必要があります。

- -

その次に、始まる場所は 40行で、ここでコンテンツスクリプトはポップアップからのメッセージをリッスンし、その手段は browser.runtime.onMessage API です。上で見たように、ポップアップスクリプトは 2種類の異なるメッセージを送ります: "beastify" と "reset"

- - - -

動物

- -

最後に、動物の画像を用意しておく必要があります。

- -

拡張機能のルートディレクトリー配下に   "beasts" という名前のディレクトリーを新しく作成し、その中に 3 つの画像を適切な名前で保存します。画像は GitHub リポジトリ から、またはここからでも取得できます。

- -

- -

動かしてみよう

- -

正しいファイルが正しい場所にあるかどうか、もう一度確認してください。

- -
beastify/
-
-    beasts/
-        frog.jpg
-        snake.jpg
-        turtle.jpg
-
-    content_scripts/
-        beastify.js
-
-    icons/
-        beasts-32.png
-        beasts-48.png
-
-    popup/
-        choose_beast.css
-        choose_beast.html
-        choose_beast.js
-
-    manifest.json
- -

Firefox 45 以降では、拡張機能をディスクから一時的にインストールできるようになりました。

- -

Firefox で "about:debugging" を開き、"一時的なアドオンを読み込む" をクリックし、自分で作成した manifest.json ファイルを選択してください。拡張機能のアイコンが Firefox のツールバーに表示されているはずです。

- -

{{EmbedYouTube("sAM78GU4P34")}}

- -

適当なウェブページを開き、拡張機能のアイコンをクリックし、動物を選択してください。するとウェブページが動物の画像に置き換わるはずです。

- -

{{EmbedYouTube("YMQXyAQSiE8")}}

- -

コマンドラインから開発する

- -

仮インストールを web-ext ツールを用いて自動化できます。次を試してください:

- -
cd beastify
-web-ext run
-
diff --git a/files/ja/mozilla/add-ons/webextensions/your_second_webextension/index.html b/files/ja/mozilla/add-ons/webextensions/your_second_webextension/index.html new file mode 100644 index 0000000000..3eb93ad7c9 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/your_second_webextension/index.html @@ -0,0 +1,451 @@ +--- +title: 2 つめの拡張機能 +slug: Mozilla/Add-ons/WebExtensions/Walkthrough +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension +--- +
{{AddonSidebar}} +

初めての拡張機能を一通り読んでいる場合、既に拡張機能の書き方を知っていることと思います。この記事では、API の使い方をより詳しく説明するため、前回よりも少し複雑なアドオンを書いてみます。

+ +

この拡張機能では Firefox のツールバーにボタンを新しく追加します。ユーザーがこのボタンをクリックすると、動物を選択できるポップアップが表示されます。ユーザーが動物を選択すると、ウェブページのコンテンツが選択した動物の画像に置き換わります。

+ +

これらの機能を以下のように実装していきます。

+ + + +

この拡張機能は次のような全体構成になっています。

+ +

+ +

この拡張機能はシンプルですが、WebExtensions API の基本的なコンセプトを多く含んでいます。

+ + + +

ソースコード一式は GitHub で参照できます 。

+ +

この拡張機能を作成するには、Firefox 45 以上が必要です。

+ +

拡張機能を書く

+ +

新しいディレクトリーを作成し、そのディレクトリーに移動します。

+ +
mkdir beastify
+cd beastify
+ +

manifest.json

+ +

それでは、"beastify" ディレクトリー配下に新しいファイル "manifest.json" を作成します。以下の内容を書き込んで保存してください。

+ +
{
+
+  "manifest_version": 2,
+  "name": "Beastify",
+  "version": "1.0",
+
+  "description": "Adds a browser action icon to the toolbar. Click the button to choose a beast. The active tab's body content is then replaced with a picture of the chosen beast. See https://developer.mozilla.org/ja/Add-ons/WebExtensions/Examples#beastify",
+  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/beastify",
+  "icons": {
+    "48": "icons/beasts-48.png"
+  },
+
+  "permissions": [
+    "activeTab"
+  ],
+
+  "browser_action": {
+    "default_icon": "icons/beasts-32.png",
+    "default_title": "Beastify",
+    "default_popup": "popup/choose_beast.html"
+  },
+
+  "web_accessible_resources": [
+    "beasts/frog.jpg",
+    "beasts/turtle.jpg",
+    "beasts/snake.jpg"
+  ]
+
+}
+ + + +

パスはすべて manifest.json 自身からの相対パスで指定することに注意します。

+ +

アイコン

+ +

拡張機能にはアイコンを用意すると良いでしょう。このアイコンは、アドオンマネージャーで拡張機能のリスト横に表示されます（アドオンマネージャーは "about:addons" の URL から確認できます）。今回の manifest.json では "icons/beasts-48.png" を用意していると宣言しています。

+ +

"icons" ディレクトリーを作成して、そこにアイコンを "beasts-48.png" という名前で 保存します。必要であれば サンプルで使用しているアイコン を利用しても構いません（このアイコンは Aha-Soft’s Free Retina iconset から引用したものであり、該当する ライセンス の下で使用しています）。

+ +

アイコンを自分で用意する場合 48x48 ピクセルのサイズにする必要があります。高解像度のディスプレイに 96x96 ピクセルのアイコンを表示させたい場合は、manifest.json の icons オブジェクトに 96 というプロパティで設定してください。

+ +
"icons": {
+  "48": "icons/beasts-48.png",
+  "96": "icons/beasts-96.png"
+}
+ +

ツールバーのボタン

+ +

ツールバーのボタンにもアイコンが必要です。今回の manifest.json では "icons/beasts-32.png" を用意していると宣言しています。

+ +

アイコンを "beasts-32.png" という名前で "icons" ディレクトリー内に保存します。必要であれば サンプルで使用しているアイコン を利用しても構いません（このアイコンは IconBeast Lite のアイコン集 から引用したものであり、該当する ライセンス の下で使用しています）。

+ +

ポップアップを使わない場合、ユーザーがボタンをクリックした際にはクリックイベントが拡張機能に向けて送出されます。ポップアップを使う場合にはクリックイベントは送出されず、代わりにポップアップが開きます。今回はポップアップが必要なので、次の項で作成しましょう。

+ +

ポップアップ

+ +

今回のポップアップでは、ユーザーが 3 つの動物から 1 つ選択できる機能を持つこととします。

+ +

拡張機能のルートディレクトリー配下に "popup" というディレクトリーを新しく作成します。ここにはポップアップ用のコードを保管します。ポップアップは次の 3 ファイルから構成されます。

+ + + +
mkdir popup
+cd popup
+touch choose_beast.html choose_beast.css choose_beast.js
+ +

choose_beast.html

+ +

HTML ファイルは次のようになります。

+ +
<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="choose_beast.css"/>
+  </head>
+
+<body>
+  <div id="popup-content">
+    <div class="button beast">Frog</div>
+    <div class="button beast">Turtle</div>
+    <div class="button beast">Snake</div>
+    <div class="button reset">Reset</div>
+  </div>
+  <div id="error-content" class="hidden">
+    <p>Can't beastify this web page.</p><p>Try a different page.</p>
+  </div>
+  <script src="choose_beast.js"></script>
+</body>
+
+</html>
+ +

"popup-content" という ID の <div> 要素があって、動物の選択をする要素が入っています。"error-content" という ID の <div> 要素と "hidden" クラスもあります。それはポップアップの初期化に問題がある場合に使います。

+ +

通常のウェブページと同じように CSS と JS ファイルを読み込んでいることに注意してください。

+ +

choose_beast.css

+ +

この CSS ではポップアップのサイズを固定し、3 つの選択肢がポップアップを埋めるようにし、基本的なスタイリングを施しています。また要素を class="hidden" で隠してもいます: つまり "error-content" <div> は既定では隠れています。

+ +
html, body {
+  width: 100px;
+}
+
+.hidden {
+  display: none;
+}
+
+.button {
+  margin: 3% auto;
+  padding: 4px;
+  text-align: center;
+  font-size: 1.5em;
+  cursor: pointer;
+}
+
+.beast:hover {
+  background-color: #CFF2F2;
+}
+
+.beast {
+  background-color: #E5F2F2;
+}
+
+.reset {
+  background-color: #FBFBC9;
+}
+
+.reset:hover {
+  background-color: #EAEA9D;
+}
+ +

choose_beast.js

+ +

これがポップアップ用の JavaScript です:

+ +

+/**
+ * ページのすべてを隠す CSS、ただし
+ * "beastify-image" クラスを持つ要素は除く
+ */
+const hidePage = `body > :not(.beastify-image) {
+                    display: none;
+                  }`;
+
+/**
+ * ボタンクリックをリッスンし、ページ内のコンテンツスクリプトに
+ * 適切なメッセージを送る
+ */
+function listenForClicks() {
+  document.addEventListener("click", (e) => {
+
+    /**
+     * 動物の名前を受け取って、対応する画像の URL を取得する
+     */
+    function beastNameToURL(beastName) {
+      switch (beastName) {
+        case "Frog":
+          return browser.extension.getURL("beasts/frog.jpg");
+        case "Snake":
+          return browser.extension.getURL("beasts/snake.jpg");
+        case "Turtle":
+          return browser.extension.getURL("beasts/turtle.jpg");
+      }
+    }
+
+    /**
+     * アクティブなタブにページを隠す CSS を挿入して
+     * 動物の URL を取得し、
+     * アクティブなタブのコンテンツスクリプトに "beastify" メッセージを送る
+     */
+    function beastify(tabs) {
+      browser.tabs.insertCSS({code: hidePage}).then(() => {
+        let url = beastNameToURL(e.target.textContent);
+        browser.tabs.sendMessage(tabs[0].id, {
+          command: "beastify",
+          beastURL: url
+        });
+      });
+    }
+
+    /**
+     * アクティブなタブからページを隠す CSS を削除し、
+     * アクティブなタブのコンテンツスクリプトに "reset" メッセージを送る
+     */
+    function reset(tabs) {
+      browser.tabs.removeCSS({code: hidePage}).then(() => {
+        browser.tabs.sendMessage(tabs[0].id, {
+          command: "reset",
+        });
+      });
+    }
+
+    /**
+     * ただコンソールにエラーをログ出力する
+     */
+    function reportError(error) {
+      console.error(`Could not beastify: ${error}`);
+    }
+
+    /**
+     * アクティブなタブを取得し、
+     * "beastify()" か "reset()" を適切に呼び出す
+     */
+    if (e.target.classList.contains("beast")) {
+      browser.tabs.query({active: true, currentWindow: true})
+        .then(beastify)
+        .catch(reportError);
+    }
+    else if (e.target.classList.contains("reset")) {
+      browser.tabs.query({active: true, currentWindow: true})
+        .then(reset)
+        .catch(reportError);
+    }
+  });
+}
+
+/**
+ * スクリプトにエラーがあった。
+ * ポップアップのエラーメッセージを表示し、通常の UI を隠す。
+ */
+function reportExecuteScriptError(error) {
+  document.querySelector("#popup-content").classList.add("hidden");
+  document.querySelector("#error-content").classList.remove("hidden");
+  console.error(`Failed to execute beastify content script: ${error.message}`);
+}
+
+/**
+ * ポップアップを読み込んだ時、コンテンツスクリプトをアクティブなタブに挿入し、
+ * クリックハンドラーを追加する。
+ * スクリプトの挿入ができない場合、エラー処理をする。
+ */
+browser.tabs.executeScript({file: "/content_scripts/beastify.js"})
+.then(listenForClicks)
+.catch(reportExecuteScriptError);
+ +

開始するのは 96行です。ポップアップスクリプトはポップアップが読み込まれ次第、アクティブなタブのコンテンツスクリプトを実行し、その手段は browser.tabs.executeScript() API です。コンテンツスクリプトの実行が成功したら、タブが閉じられるかユーザーが別のページに移動するまで、コンテンツスクリプトがページにロードされたままになります。

+ +

browser.tabs.executeScript() の呼び出しがよく失敗する理由は、コンテンツスクリプトをすべてのページでは実行できないことです。例えば、about:debugging のような権限のあるブラウザーページでは実行できませんし、addons.mozilla.org ドメイン内のページでも実行できません。失敗した場合、reportExecuteScriptError() は "popup-content" <div> を隠して、"error-content" <div> を表示し、エラーを console にログ出力します。

+ +

コンテンツスクリプトの実行が成功したら、listenForClicks() を呼び出します。これはポップアップのクリックをリッスンします。

+ + + +

beastify() 関数は次の 3 つを行います:

+ + + +

reset() 関数は動物化を取り消す:

+ + + +

コンテンツスクリプト

+ +

拡張機能のルートディレクトリー配下に "content_scripts" というディレクトリーを新しく作成します。続いてそこに "beastify.js" という名前のファイルを作成し、下記のスクリプトを記述します。

+ +
(function() {
+  /**
+   * グローバルなガード変数をチェック、設定する。
+   * コンテンツスクリプトが再び同じページに挿入された場合、
+   * 次は何もしない。
+   */
+  if (window.hasRun) {
+    return;
+  }
+  window.hasRun = true;
+
+  /**
+   * 動物の画像の URL を受け取り、既存の動物をすべて削除し、次に
+   * 画像を指す IMG 要素の作成・スタイル適用を行い、
+   * 作成したノードをドキュメント内に挿入する
+   */
+  function insertBeast(beastURL) {
+    removeExistingBeasts();
+    let beastImage = document.createElement("img");
+    beastImage.setAttribute("src", beastURL);
+    beastImage.style.height = "100vh";
+    beastImage.className = "beastify-image";
+    document.body.appendChild(beastImage);
+  }
+
+  /**
+   * ページからすべての動物を削除する
+   */
+  function removeExistingBeasts() {
+    let existingBeasts = document.querySelectorAll(".beastify-image");
+    for (let beast of existingBeasts) {
+      beast.remove();
+  }
+  }
+
+  /**
+   * バックグラウンドスクリプトからのメッセージをリッスンし、
+   * "beastify()" か "reset()" を呼び出す。
+   */
+  browser.runtime.onMessage.addListener((message) => {
+    if (message.command === "beastify") {
+      insertBeast(message.beastURL);
+    } else if (message.command === "reset") {
+      removeExistingBeasts();
+    }
+  });
+
+})();
+ +

このコンテンツスクリプトが最初にすることは、グローバル変数の window.hasRun のチェックです: セットされていればスクリプトは早くリターンし、そうでなければ window.hasRun をセットして処理し続けます。こうする理由は、ユーザーがポップアップを開くたびに、ポップアップはアクティブなタブのコンテンツスクリプトを実行して、そのために 1 つのタブに複数の実行スクリプトのインスタンスができてしまいます。これが起きると、最初のインスタンスだけが処理するのを確かめる必要があります。

+ +

その次に、始まる場所は 40行で、ここでコンテンツスクリプトはポップアップからのメッセージをリッスンし、その手段は browser.runtime.onMessage API です。上で見たように、ポップアップスクリプトは 2種類の異なるメッセージを送ります: "beastify" と "reset"

+ + + +

動物

+ +

最後に、動物の画像を用意しておく必要があります。

+ +

拡張機能のルートディレクトリー配下に   "beasts" という名前のディレクトリーを新しく作成し、その中に 3 つの画像を適切な名前で保存します。画像は GitHub リポジトリ から、またはここからでも取得できます。

+ +

+ +

動かしてみよう

+ +

正しいファイルが正しい場所にあるかどうか、もう一度確認してください。

+ +
beastify/
+
+    beasts/
+        frog.jpg
+        snake.jpg
+        turtle.jpg
+
+    content_scripts/
+        beastify.js
+
+    icons/
+        beasts-32.png
+        beasts-48.png
+
+    popup/
+        choose_beast.css
+        choose_beast.html
+        choose_beast.js
+
+    manifest.json
+ +

Firefox 45 以降では、拡張機能をディスクから一時的にインストールできるようになりました。

+ +

Firefox で "about:debugging" を開き、"一時的なアドオンを読み込む" をクリックし、自分で作成した manifest.json ファイルを選択してください。拡張機能のアイコンが Firefox のツールバーに表示されているはずです。

+ +

{{EmbedYouTube("sAM78GU4P34")}}

+ +

適当なウェブページを開き、拡張機能のアイコンをクリックし、動物を選択してください。するとウェブページが動物の画像に置き換わるはずです。

+ +

{{EmbedYouTube("YMQXyAQSiE8")}}

+ +

コマンドラインから開発する

+ +

仮インストールを web-ext ツールを用いて自動化できます。次を試してください:

+ +
cd beastify
+web-ext run
+
diff --git "a/files/ja/mozilla/add-ons/webextensions/\345\211\215\346\217\220\346\235\241\344\273\266/index.html" "b/files/ja/mozilla/add-ons/webextensions/\345\211\215\346\217\220\346\235\241\344\273\266/index.html" deleted file mode 100644 index 751de9fe15..0000000000 --- "a/files/ja/mozilla/add-ons/webextensions/\345\211\215\346\217\220\346\235\241\344\273\266/index.html" +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: 前提条件 -slug: Mozilla/Add-ons/WebExtensions/前提条件 -translation_of: Mozilla/Add-ons/WebExtensions/Prerequisites ---- -

WebExtension API を使って開発するには、いくつかの小さいセットアップが必要です。

- - -- cgit v1.2.3-54-g00ecf