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 - .../how_mozilla_s_build_system_works/index.html | 195 +++++++++ .../windows_prerequisites/index.html | 13 + .../developer_guide/mozilla-central/index.html | 52 +++ .../source_code/getting_comm-central/index.html | 50 +++ .../index.html | 50 --- .../index.html | 33 ++ .../1.5/using_firefox_1.5_caching/index.html | 191 +++++++++ .../2/adding_feed_readers_to_firefox/index.html | 49 +++ .../releases/2/updating_extensions/index.html | 37 ++ .../releases/3.5/updating_extensions/index.html | 73 ++++ .../firefox/releases/3/dom_improvements/index.html | 29 ++ .../firefox/releases/3/full_page_zoom/index.html | 41 ++ .../releases/3/notable_bugs_fixed/index.html | 32 ++ .../firefox/releases/3/svg_improvements/index.html | 56 +++ .../releases/3/updating_extensions/index.html | 157 +++++++ .../3/updating_web_applications/index.html | 107 +++++ .../firefox/releases/4/the_add-on_bar/index.html | 76 ++++ 36 files changed, 2226 insertions(+), 1396 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" create mode 100644 files/ja/mozilla/developer_guide/build_instructions/how_mozilla_s_build_system_works/index.html create mode 100644 files/ja/mozilla/developer_guide/build_instructions/windows_prerequisites/index.html create mode 100644 files/ja/mozilla/developer_guide/mozilla-central/index.html create mode 100644 files/ja/mozilla/developer_guide/source_code/getting_comm-central/index.html delete mode 100644 files/ja/mozilla/developer_guide/source_code/getting_comm-central_source_code_using_mercurial/index.html create mode 100644 files/ja/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html create mode 100644 files/ja/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html create mode 100644 files/ja/mozilla/firefox/releases/2/adding_feed_readers_to_firefox/index.html create mode 100644 files/ja/mozilla/firefox/releases/2/updating_extensions/index.html create mode 100644 files/ja/mozilla/firefox/releases/3.5/updating_extensions/index.html create mode 100644 files/ja/mozilla/firefox/releases/3/dom_improvements/index.html create mode 100644 files/ja/mozilla/firefox/releases/3/full_page_zoom/index.html create mode 100644 files/ja/mozilla/firefox/releases/3/notable_bugs_fixed/index.html create mode 100644 files/ja/mozilla/firefox/releases/3/svg_improvements/index.html create mode 100644 files/ja/mozilla/firefox/releases/3/updating_extensions/index.html create mode 100644 files/ja/mozilla/firefox/releases/3/updating_web_applications/index.html create mode 100644 files/ja/mozilla/firefox/releases/4/the_add-on_bar/index.html (limited to 'files/ja/mozilla') 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 を使って開発するには、いくつかの小さいセットアップが必要です。

- - diff --git a/files/ja/mozilla/developer_guide/build_instructions/how_mozilla_s_build_system_works/index.html b/files/ja/mozilla/developer_guide/build_instructions/how_mozilla_s_build_system_works/index.html new file mode 100644 index 0000000000..ee47b27b6f --- /dev/null +++ b/files/ja/mozilla/developer_guide/build_instructions/how_mozilla_s_build_system_works/index.html @@ -0,0 +1,195 @@ +--- +title: How Mozilla's build system works +slug: How_Mozilla's_build_system_works +tags: + - Build documentation + - Developing Mozilla + - 移行 +--- +

概要

+ +

本ドキュメントは、Mozilla の GNU make ベースビルドシステムを必要とする Mozilla 開発者をターゲットとしています。 本ドキュメントでは、ビルドシステムの基本概念と用語ならびに、コンポーネントのコンパイルや jar ファイルの作成といった共通的作業をどのように行うかを解説しています。

+ +

本書は Mozilla をただビルドしたい人を対象にはしていません。その場合はBuild Documentationを参照してください。

+ +

概念

+ +

Mozilla のビルドシステムは GNU Make をベースにしたシステムです。最も基本的なレベルでは、make はターゲットを自動生成するツールで、ターゲットごとにdependencies とrules を生成します。

+ +

Mozilla プロジェクトでは、make はライブラリと実行モジュールのコンパイル、chrome の jar ファイル作成、関係ファイルのコピーに使用されます。我々は、2 パスのビルドシステムを使用しています:

+ + + +

いずれのフェーズでも、ターゲットを make するだけです。これは、それぞれのディレクトリは export ターゲットとともにまず一度横断し、libs ターゲットとともに、再び横断します。 二段階のビルドは、モジュール間の循環的参照のために存在します。最初にすべてのヘッダファイルを export することで、あるモジュール（Ａとする）は、別のモジュール（Ｂ）の public なヘッダファイルをインクルードしながら、モジュール（Ｂ）はモジュール（Ａ）の public なヘッダファイルをインクルードできます。

+ +

その他の重要なツールとして、configure が挙げられます。これは、ビルドの最初のステップに実行されます。configure スクリプトはシステムやコンパイラの特徴を決定し、オプションを生成します。configure スクリプトから実行される重要な製品が二つあります:

+ + + +

configure スクリプトは bash シェルベースのものです。このスクリプトは M4 とともに書かれた configure.in と呼ばれるファイルから生成され、最終的なスクリプトを生成するために Autoconfを使って処理します。

+ +

Makefile の基礎

+ +

Makefile は、非常に複雑にもなり得ますが、Mozilla チームは、大半の Makefile をとてもシンプルにすべく、多数のビルトインルールを提供しています。make についての網羅的な解説は本説明の範囲を超えますので、こちら（GNU make）を参照してください。

+ +

精通しておくとよいであろう概念の一つとして、make の変数が挙げられます。変数はVARIABLE = VALUE という構文で定義され、その値は$(VARIABLE) と記述することで参照されます。すべての変数は文字列です。

+ +

Mozilla のソースコードに含まれる Makefile.in ファイルはすべて同じ基本的なフォーマットで記述されています。

+ +
{{ page("/ja/docs/Standard_Makefile_Header") }}
+ +
# ... Makefile の中心となる本体部分がここに入ります ...
+
+ +
include $(topsrcdir)/config/rules.mk
+
+# ... 追加のルールがここに入ります ...
+
+ + + +

この他によく使われる変数の一つとして、特定のビルドターゲットを指定しない DIRS があります。DIR は、現在のディレクトリを再帰的に組み込むためのサブディレクトリの一覧です。サブディレクトリは親ディレクトリの後に配置されます。以下に例を示します。

+ +
DIRS = \
+       public \
+       resources \
+       src \
+       $(NULL)
+
+ +

上記の例は、行結合の例でもあります。行の中の最後に現れるバックスラッシュ（訳注：通常の日本の環境では￥記号に見えることも多いので注意）は、変数定義が次の行にも続いていることを示します。行の継ぎ目の余分な空白は縮められます。終端の $(NULL) は表記に一貫性を持たせる手段です。これにより、行末のバックスラッシュの有無を気にせず行の追加・削除が行えます。

+ +

Makefile examples

+ + + +

ライブラリのビルド

+ +

Mozilla のビルドにおけるライブラリは、主として３種に分けられます:

+ + + +

Non-component shared libraries

+ +

non-component shared library は、複数のコンポーネントが共有しなければならない共通コードがあり、それを XPCOM を通じて共有することが、適切でないもしくは不可能な場合に有用です。 一例として、libmsgbaseutil 向けの Makefile の一部を見てみましょう。これは、mailnews コンポーネント全体からリンクされます:

+ +
DEPTH           = ../../..
+topsrcdir       = @top_srcdir@
+srcdir          = @srcdir@
+VPATH           = @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+MODULE          = msgbaseutil
+LIBRARY_NAME    = msgbaseutil
+EXPORT_LIBRARY = 1
+SHORT_LIBNAME   = msgbsutl
+
+ +

上述した component の例との実際問題としての相違点は、IS_COMPONENT が設定されていない事だけである点に注意してください。この値を設定しない事によって、共有ライブラリが生成され、dist/bin にインストールされるでしょう。

+ +

Static libraries

+ +

上述の通り、静的ライブラリの主要な使用方法としては、大規模ライブラリ（主に component）のビルドの中間段階としての使用が挙げられます。これにより、複数のサブディレクトリにソースファイルを分散させて配置することができます。静的ライブラリは実行可能モジュールにもリンクされることがあります。例として、layout/base/src の Makefile の一部を以下に示します。

+ +
DEPTH           = ../../..
+topsrcdir       = @top_srcdir@
+srcdir          = @srcdir@
+VPATH           = @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+MODULE          = layout
+LIBRARY_NAME    = gkbase_s
+
+# REQUIRES and CPPSRCS omitted here for brevity #
+
+# we don't want the shared lib, but we want to force the creation of a static lib.
+FORCE_STATIC_LIB = 1
+
+include $(topsrcdir)/config/rules.mk
+
+ +

ここでは FORCE_STATIC_LIB = 1 というキーが設定されています。これにより、（unix の場合)libgkbase_s.a が、Windows の場合はgkbase_s.lib が生成され、dist/lib にコピーされます。では、コンポーネントを作成するために複数の静的ライブラリを合わせてリンクする方法をざっと見てみましょう。

+ +
DEPTH           = ../..
+topsrcdir       = @top_srcdir@
+srcdir          = @srcdir@
+VPATH           = @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+MODULE          = layout
+LIBRARY_NAME    = gklayout
+EXPORT_LIBRARY = 1
+IS_COMPONENT    = 1
+MODULE_NAME     = nsLayoutModule
+
+CPPSRCS         = \
+                nsLayoutModule.cpp \
+                $(NULL)
+
+SHARED_LIBRARY_LIBS = \
+                $(DIST)/lib/$(LIB_PREFIX)gkhtmlbase_s.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)gkhtmldoc_s.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)gkhtmlforms_s.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)gkhtmlstyle_s.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)gkhtmltable_s.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)gkxulbase_s.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)gkbase_s.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)gkconshared_s.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)gkxultree_s.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)gkxulgrid_s.$(LIB_SUFFIX) \
+                $(NULL)
+
+include $(topsrcdir)/config/rules.mk
+
+ +

SHARED_LIBRARY_LIBS は、本共有ライブラリにリンクすべき静的ライブラリを並べて記述します。LIB_PREFIX や LIB_SUFFIX を使用することで、すべてのプラットフォームで動作させることができることに注意してください。

+ +

Jar ファイルをビルドする

+ +

Jar ファイルは(XUL、JavaScript、CSSといった) chrome ファイルのパッケージングに使用します。Jar パッケージングについてのより詳細な情報は、{{ mediawiki.external('jar-packaging.html このドキュメント') }}で得られます。ここでは、Jar パッケージを行うために Makefile をどのように設定するかのみ述べます。以下に例を示します。

+ +
DEPTH           = ../../../..
+topsrcdir       = @top_srcdir@
+srcdir          = @srcdir@
+VPATH           = @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+include $(topsrcdir)/config/rules.mk
+ +

そうです。ここでは定義が必要な外部変数は使用されていません。Makefile.in と同じディレクトリに jar.mn ファイルがある場合、自動的に処理されるのです。jar.mn と chrome ファイルを含む resources ディレクトリを作成するのが通例ですが、ライブラリを作成するディレクトリに jar.mn を設置したいのであれば、これも動作します（処理されます）。

+ +
+

著作情報

+ + +
diff --git a/files/ja/mozilla/developer_guide/build_instructions/windows_prerequisites/index.html b/files/ja/mozilla/developer_guide/build_instructions/windows_prerequisites/index.html new file mode 100644 index 0000000000..b69868d0d8 --- /dev/null +++ b/files/ja/mozilla/developer_guide/build_instructions/windows_prerequisites/index.html @@ -0,0 +1,13 @@ +--- +title: Building with VC8 Express +slug: Building_with_VC8_Express +tags: + - Build documentation + - Developing Mozilla +--- +

+

このページは破棄されました。標準の Windows ビルドに必要な環境は現在、Microsoft Visual C++ バージョン 8 Express Edition が使用されています。 +

+
+
+{{ languages( { "en": "en/Building_with_VC8_Express" } ) }} diff --git a/files/ja/mozilla/developer_guide/mozilla-central/index.html b/files/ja/mozilla/developer_guide/mozilla-central/index.html new file mode 100644 index 0000000000..ffad18d62b --- /dev/null +++ b/files/ja/mozilla/developer_guide/mozilla-central/index.html @@ -0,0 +1,52 @@ +--- +title: mozilla-central +slug: mozilla-central +tags: + - Developing Mozilla + - Mercurial +translation_of: Mozilla/Developer_guide/mozilla-central +--- +

mozilla-central は Mozilla ソースコードの Mercurial リポジトリです: http://hg.mozilla.org/mozilla-central 。これは、Mozilla 2 コードベースに編入される変更のための、安定した統合ポイントです。 +

mozilla-central の Tinderbox ページは http://tinderbox.mozilla.org/showbui...?tree=Mozilla2 に位置しています。 +{{ Note("Mozilla CVS リポジトリとは異なり、mozilla-central には Firefox と XULRunner のソースのみが含まれています。他のアプリケーションやプロジェクト固有のコードについては別のリポジトリが使用されます。") }} +{{ 英語版章題("mozilla-central tree rules") }} +

+

mozilla-central ツリー規則

+

mozilla-central コードベースは、tier-1 プラットフォーム上では常に stable でなくてはなりません: +

+ +

{{ 英語版章題("API Changes") }} +

+

API の変更

+

1.9.1 への準備のため、API の変更については以下の規則が適用されます: +

+ +

この規則は 1.9.1 branch の後で変更されます。 +

{{ 英語版章題("Pushing changes to mozilla-central") }} +

+

mozilla-central に変更をプッシュする

+

CVS チェックインアクセス権をもつすべての開発者は、バグを投稿して、hg.mozilla.org にプッシュするための LDAP ログインの詳細が書かれた Email を受信してください。変更セットをサーバにプッシュするには <tt>hg push</tt> コマンドを使用します。 +

+ +

{{ 英語版章題("See also") }} +

+

参照

+ +
+
+{{ languages( { "en": "en/Mozilla-central", "es": "es/Mozilla-central" } ) }} diff --git a/files/ja/mozilla/developer_guide/source_code/getting_comm-central/index.html b/files/ja/mozilla/developer_guide/source_code/getting_comm-central/index.html new file mode 100644 index 0000000000..581da56b72 --- /dev/null +++ b/files/ja/mozilla/developer_guide/source_code/getting_comm-central/index.html @@ -0,0 +1,50 @@ +--- +title: Getting comm-central Source Code Using Mercurial +slug: >- + Mozilla/Developer_Guide/Source_Code/Getting_comm-central_Source_Code_Using_Mercurial +translation_of: Mozilla/Developer_guide/Source_Code/Getting_comm-central +--- +

Mercurial は、ソースコードの変更をローカルで追跡し、それらの変更を他のユーザと共有するためのソースコード管理ツールです。Mozilla プロジェクトはソースコードの管理を、Mozilla 1.9 開発用の CVS から Mozilla 1.9.1 とその先の製品開発用の Mercurial へ移行しています。

+
Thunderbird 2.0 や SeaMonkey 1.1, Firefox 3.0 の開発のためのパッチを提出したいときは、CVS を使用してください。
+

クライアントの設定

+

設定は Firefox 3.5/xulrunner 1.9.1 の開発と同じです。次の記事を参照してください。

+

Mozilla_Source_Code_(Mercurial)#Client_settings.

+

ソースツリーのチェックアウト

+

Thunderbird と Seamonkey のソースコードはそれぞれ異なるリポジトリに含まれています。comm-central は、それらのアプリケーション開発用のメインの統合リポジトリです。Thunderbird および Sunbird, SeaMonkey に必要とされるソースコードが含まれています。また、他のソースコードを入手するための client.py スクリプトも含まれています。

+

comm-central のソースコードを入手するには (Mercurial の用語で、リポジトリを "clone" します):

+
# Mozilla ソースコードを src/ フォルダに pull します。
+# 数百メガバイトの履歴が .hg フォルダにダウンロードされるため、しばらく時間がかかります。
+hg clone http://hg.mozilla.org/comm-central/ src
+
+cd src
+
+
すでに mozilla-central ツリーを clone している場合は、mozilla-central 全体を再び pull してしまうことを避けるため、ここでは src/mozilla に clone してください。
+

client.py を使用して、必要な他のすべてのソースコードを更新または pull してください:

+
python client.py checkout
+
+
+ +
+

client.py は以下のタスクを行います:

+ +

リポジトリの更新

+

リポジトリを更新するには、client.py を再び実行します:

+
python client.py checkout
+
+

comm-central の異なるブランチ を pull するには、 http://hg.mozilla.org/comm-central をブランチの場所に置きかえて、上に書かれた最初のステップを行ってください。ブランチの場所は comm-central ページのブランチ章で指定されています。

+
関連するリポジトリを pull すると、同じソースディレクトリを使用して上述のソフトウェアを開発してビルドすることができますが、リポジトリをまたがる変更 (chengeset) を作成できるわけではありません。リポジトリをまたがるパッチを作成するときは、各リポジトリごとの変更 (chengeset) が必要です。
+

ビルド

+

comm-central のアプリケーションについては、次のリンク先をご覧ください:

+ +

Firefox と xulrunner

+

必要であれば、このツリーから Firefox や xulrunner をビルドすることができます。client.py によって mozilla-central リポジトリが pull されるため、Firefox や xulrunner のビルドと開発は comm-central からのリポジトリ内で行うことができます。ただ一つの違いは、ビルドコマンドを実行する前に mozilla/ ディレクトリに移動する必要があることです:

+
cd src/mozilla
+make -f client.mk build
+
+

参照

+ +

{{ languages( { "en": "En/Developer_Guide/Source_Code/Getting_comm-central", "fr": "fr/Code_source_de_comm-central_(Mercurial)" } ) }}

diff --git a/files/ja/mozilla/developer_guide/source_code/getting_comm-central_source_code_using_mercurial/index.html b/files/ja/mozilla/developer_guide/source_code/getting_comm-central_source_code_using_mercurial/index.html deleted file mode 100644 index 581da56b72..0000000000 --- a/files/ja/mozilla/developer_guide/source_code/getting_comm-central_source_code_using_mercurial/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Getting comm-central Source Code Using Mercurial -slug: >- - Mozilla/Developer_Guide/Source_Code/Getting_comm-central_Source_Code_Using_Mercurial -translation_of: Mozilla/Developer_guide/Source_Code/Getting_comm-central ---- -

Mercurial は、ソースコードの変更をローカルで追跡し、それらの変更を他のユーザと共有するためのソースコード管理ツールです。Mozilla プロジェクトはソースコードの管理を、Mozilla 1.9 開発用の CVS から Mozilla 1.9.1 とその先の製品開発用の Mercurial へ移行しています。

-
Thunderbird 2.0 や SeaMonkey 1.1, Firefox 3.0 の開発のためのパッチを提出したいときは、CVS を使用してください。
-

クライアントの設定

-

設定は Firefox 3.5/xulrunner 1.9.1 の開発と同じです。次の記事を参照してください。

-

Mozilla_Source_Code_(Mercurial)#Client_settings.

-

ソースツリーのチェックアウト

-

Thunderbird と Seamonkey のソースコードはそれぞれ異なるリポジトリに含まれています。comm-central は、それらのアプリケーション開発用のメインの統合リポジトリです。Thunderbird および Sunbird, SeaMonkey に必要とされるソースコードが含まれています。また、他のソースコードを入手するための client.py スクリプトも含まれています。

-

comm-central のソースコードを入手するには (Mercurial の用語で、リポジトリを "clone" します):

-
# Mozilla ソースコードを src/ フォルダに pull します。
-# 数百メガバイトの履歴が .hg フォルダにダウンロードされるため、しばらく時間がかかります。
-hg clone http://hg.mozilla.org/comm-central/ src
-
-cd src
-
-
すでに mozilla-central ツリーを clone している場合は、mozilla-central 全体を再び pull してしまうことを避けるため、ここでは src/mozilla に clone してください。
-

client.py を使用して、必要な他のすべてのソースコードを更新または pull してください:

-
python client.py checkout
-
-
- -
-

client.py は以下のタスクを行います:

- -

リポジトリの更新

-

リポジトリを更新するには、client.py を再び実行します:

-
python client.py checkout
-
-

comm-central の異なるブランチ を pull するには、 http://hg.mozilla.org/comm-central をブランチの場所に置きかえて、上に書かれた最初のステップを行ってください。ブランチの場所は comm-central ページのブランチ章で指定されています。

-
関連するリポジトリを pull すると、同じソースディレクトリを使用して上述のソフトウェアを開発してビルドすることができますが、リポジトリをまたがる変更 (chengeset) を作成できるわけではありません。リポジトリをまたがるパッチを作成するときは、各リポジトリごとの変更 (chengeset) が必要です。
-

ビルド

-

comm-central のアプリケーションについては、次のリンク先をご覧ください:

- -

Firefox と xulrunner

-

必要であれば、このツリーから Firefox や xulrunner をビルドすることができます。client.py によって mozilla-central リポジトリが pull されるため、Firefox や xulrunner のビルドと開発は comm-central からのリポジトリ内で行うことができます。ただ一つの違いは、ビルドコマンドを実行する前に mozilla/ ディレクトリに移動する必要があることです:

-
cd src/mozilla
-make -f client.mk build
-
-

参照

- -

{{ languages( { "en": "En/Developer_Guide/Source_Code/Getting_comm-central", "fr": "fr/Code_source_de_comm-central_(Mercurial)" } ) }}

diff --git a/files/ja/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html b/files/ja/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html new file mode 100644 index 0000000000..7106e1df16 --- /dev/null +++ b/files/ja/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html @@ -0,0 +1,33 @@ +--- +title: Firefox 1.5 に XUL アプリケーションを対応させる +slug: Adapting_XUL_Applications_for_Firefox_1.5 +tags: + - Add-ons + - Extensions + - XUL +translation_of: Mozilla/Firefox/Releases/1.5/Adapting_XUL_Applications_for_Firefox_1.5 +--- +

 

+ +

このページでは、Firefox 1.5 の変更点のうち、XUL アプリケーション開発者に影響するものについて、リストで示します。

+ +

仕様の変更

+ + + +

その他の情報

+ + diff --git a/files/ja/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html b/files/ja/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html new file mode 100644 index 0000000000..a2c0c54ea7 --- /dev/null +++ b/files/ja/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html @@ -0,0 +1,191 @@ +--- +title: Using Firefox 1.5 caching +slug: Using_Firefox_1.5_caching +tags: + - Add-ons + - DOM + - Extensions + - HTML + - JavaScript + - Web Development +translation_of: Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching +--- +

{{FirefoxSidebar}}

+ +

はじめに

+ +

Firefox 1.5 ではウェブページ全体をその JavaScript の状態も含めてメモリ内にキャッシュし、1 つのブラウザセッションとして使用します。訪問したページ間の戻る、進むという動作にページのロードが不要になり、JavaScript の状態も保存されます。この機能によってページナビゲーションが非常に高速化します。この機能は bfcache（"Back-Forward Cache" のこと）と呼ばれることもあります。このキャッシュ状態はユーザがブラウザを閉じるまで保存されます。

+ +

Firefox がページをキャッシュしない場合があります。ページがキャッシュされないプログラム的な理由でよくあるものをいくつか以下に示します。

+ + + +

この新しいキャッシュ機能により、ページロードの挙動が変わります。ウェブ作者は次のことをしたいと思うことがあるでしょう。

+ + + +

ブラウザの 2 つの新しいイベントによってウェブ作者はそのどちらもできるようになります。

+ +

ブラウザの新しいイベント

+ +

これらの新しいイベントを使用すると、そのページは他のブラウザでは今までどおりにきちんと表示され（過去の Firefox、Internet Explorer、Opera、Safari でテスト済み）、Firefox 1.5 でロードしたときにこの新しいキャッシュ機能が使用されるようになります。

+ +

ウェブページの標準的な挙動は次のとおりです。

+ +
    +
  1. ユーザがページにナビゲートする。
    2. +
  2. ページロード時にインラインスクリプトが実行される。
    3. +
  3. ページがロードされると onload ハンドラが実行される。
    4. +
+ +

4 ステップ目があるページもあります。ページが unload ハンドラを使用していると、ユーザがそのページから去るナビゲートをするときにそれが実行されます。unload ハンドラが存在しているとそのページはキャッシュされません。

+ +

ユーザがキャッシュされたページにナビゲートしたとき、インラインスクリプトと onload ハンドラは実行されません（ステップ 2 および 3）。ほとんどの場合、これらのスクリプトの効果が保存されているためです。

+ +

そのページにユーザがナビゲートするたびにロード中に実行されるようにしたいスクリプトや他の動作がそのページに含まれている場合、あるいはいつユーザがキャッシュされたページにナビゲートしたかを知りたい場合は、新しい pageshow イベントを使用します。

+ +

ユーザがそのページから去るナビゲートをするときに実行されるようにしたい動作があるものの、この新しいキャッシュ機能を生かしたく、さらにそれゆえに unload ハンドラを使用したくないという場合は、新しい pagehide イベントを使用します。

+ +

pageshow イベント

+ +

このイベントは load イベントと同じように動作しますが、ページがロードされるたびに実行される点で異なります（一方、Firefox 1.5 ではページがキャッシュからロードされたときには load イベントは発動しません）。初めてページがロードされるとき、load イベントの発動直後に pageshow イベントが発動します。pageshow イベントは 初回ロード時には false がセットされる persisted という真偽値プロパティを使用します。初回ロードでなければ true がセットされます（つまり、そのページがキャッシュされているときに true がセットされます）。

+ +

ページロードのたびに実行したい JavaScript は pageshow イベントの発動時に実行されるようにセットします。

+ +

この記事で後に示すサンプルのように、JavaScript の関数を pageshow イベントの一部として呼び出す場合、pageshow イベントを load イベントの一部として呼び出すことで、ページが Firefox 1.5 以外のブラウザでロードされたときにもその関数を呼び出せるようになります。

+ +

pagehide イベント

+ +

ユーザがそのページから去るナビゲートをするときに実行する動作を定義したいものの、unload イベント（そのページがキャッシュされなくなる）を使用したくないという場合は、新しい pagehide イベントを使用することができます。pageshow のように、pagehide イベントは persisted という真偽値プロパティを使用します。このプロパティは、ブラウザがそのページをキャッシュしていなければ false がセットされ、ブラウザがそのページをキャッシュしていれば true がセットされます。このプロパティに false がセットされているとき、unload があれば pagehide イベントの直後にそれが発動します。

+ +

Firefox 1.5 は、そのページの初回ロード時と同じ順番でロードに関するイベントをシミュレートします。フレームはトップレベルの文書と同じように扱われます。そのページにフレームがあると、キャッシュされたページがロードされるときに次のことが起こります。

+ + + +

サンプルコード

+ +

下のサンプルは load イベントと pageshow イベントの両方を使用したページです。このサンプルページは次のような挙動をとります。

+ + + + + + + +

この例では次のことが起こります。

+ + + +
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+   "http://www.w3.org/TR/html4/loose.dtd">
+<HTML>
+<head>
+<title>Order query : Firefox 1.5 Example</title>
+<style type="text/css">
+body, p {
+	font-family: Verdana, sans-serif;
+	font-size: 12px;
+   	}
+</style>
+<script type="text/javascript">
+function onLoad() {
+	loadOnlyFirst();
+	onPageShow();
+}
+
+function onPageShow() {
+// 現在時刻の算出
+
+	var currentTime= new Date();
+	var year=currentTime.getFullYear();
+	var month=currentTime.getMonth()+1;
+	var day=currentTime.getDate();
+	var hour=currentTime.getHours();
+	var min=currentTime.getMinutes();
+	var sec=currentTime.getSeconds();
+	var mil=currentTime.getMilliseconds();
+	var displayTime = (month + "/" + day + "/" + year + " " +
+		hour + ":" + min + ":" + sec + ":" + mil);
+	document.getElementById("timefield").value=displayTime;
+}
+
+function loadOnlyFirst() {
+	document.zipForm.name.focus();
+}
+</script>
+</head>
+<body onload="onLoad();" onpageshow="if (event.persisted) onPageShow();">
+<h2>Order query</h2>
+
+<form name="zipForm" action="http://www.example.com/formresult.html" method="get">
+<label for="timefield">Date and time:</label>
+<input type="text" id="timefield"><br>
+<label for="name">Name:</label>
+<input type="text" id="name"><br>
+<label for="address">Email address:</label>
+<input type="text" id="address"><br>
+<label for="order">Order number:</label>
+<input type="text" id="order"><br>
+<input type="submit" name="submit" value="Submit Query">
+</form>
+</body>
+</html>
+
+ +

一方、上記のページが pageshow イベントをリスンせず、すべての計算を load イベントの一部として扱う（そして代わりに下のサンプルコード片で置き換える）ものだとすると、ユーザがそのページから去るナビゲーションをするとカーソル位置も日時も Firefox 1.5 にキャッシュされます。ユーザがそのページに戻ると、キャッシュされた日時が表示されます。

+ +
<script>
+function onLoad() {
+	loadOnlyFirst();
+
+// 現在時刻の算出
+	var currentTime= new Date();
+	var year = currentTime.getFullYear();
+	var month = currentTime.getMonth()+1;
+	var day = currentTime.getDate();
+	var hour=currentTime.getHours();
+	var min=currentTime.getMinutes();
+	var sec=currentTime.getSeconds();
+	var mil=currentTime.getMilliseconds();
+	var displayTime = (month + "/" + day + "/" + year + " " +
+		hour + ":" + min + ":" + sec + ":" + mil);
+	document.getElementById("timefield").value=displayTime;
+}
+
+function loadOnlyFirst() {
+	document.zipForm.name.focus();
+}
+</script>
+</head>
+
+<body onload="onLoad();">
+
+ +

Firefox 用拡張機能の開発

+ +

Firefox 1.5 の 拡張機能 はこのキャッシュ機能を許容するものである必要があります。1.5 とそれより前のバージョンの両方と互換性を持つ Firefox の拡張機能を開発したいのであれば、キャッシュされるようにするトリガについては load イベントをリスンし、キャッシュされないようにするトリガについては pageshow イベントをリスンしてください。

+ +

例えば Firefox 用 Google ツールバーは、1.5 とそれより前のバージョンの両方と互換性を持たせるためには、autolink 関数については load イベントをリスンすべきであり、PageRank 関数については pageshow イベントをリスンすべきです。

diff --git a/files/ja/mozilla/firefox/releases/2/adding_feed_readers_to_firefox/index.html b/files/ja/mozilla/firefox/releases/2/adding_feed_readers_to_firefox/index.html new file mode 100644 index 0000000000..8139208689 --- /dev/null +++ b/files/ja/mozilla/firefox/releases/2/adding_feed_readers_to_firefox/index.html @@ -0,0 +1,49 @@ +--- +title: Firefox へのフィードリーダーの追加 +slug: Adding_feed_readers_to_Firefox +tags: + - Configuration management +translation_of: Mozilla/Firefox/Releases/2/Adding_feed_readers_to_Firefox +--- +
+ {{ Fx_minversion_header(2) }}
+

Firefox 2 より、Firefox はフィードを読む際に使う RSS または Atom フィードリーダを選択できるようになっています。この記事ではデフォルトではサポートされていないリーダを追加サポートさせる方法について説明します。

+

新しいウェブベースのフィードリーダの追加

+

新しいウェブベースのフィードリーダを追加サポートさせるためにやらなければならないことは、3 つの新しい設定項目を追加することだけです。

+
+
+ browser.contentHandlers.types.number.title
+
+ フィードリーダの名前。
+
+ browser.contentHandlers.types.number.type
+
+ フィードリーダに使用するため、ここは "application/vnd.mozilla.maybe.feed" にする。
+
+ browser.contentHandlers.types.number.uri
+
+ フィードリーダの URI。フィードの URL が挿入されるべき部分に "%s" を使用する。
+
+

number は既に使われている数のうち最大のものよりもより 1 つ大きな数で置き換えてください。例えば "Easy Reader" という新しいフィードリーダを追加したい場合、かつ 0 から 4 までの数が指定されたコンテンツハンドラが既に定義されている場合、このように number には 5 を使用してください。

+ +

about:config を使うことでこれらの設定項目を手動で追加できます。拡張機能で新しいフィードリーダをインストールしたいのであれば、プログラム側で行うこともできます。

+

ウェブアプリケーションからのフィードリーダの追加

+

ウェブ上の JavaScript コードから簡単にフィードリーダを追加することができます。このためには、このような {{domxref("navigator.registerContentHandler()")}} 関数を使用します。

+
navigator.registerContentHandler(
+    "application/vnd.mozilla.maybe.feed",
+    "http://www.theeasyreaderurl.com?feed=%s",
+    "Easy Reader"
+);
+

新しいフィードリーダアプリケーションの追加

+

これを最も簡単に行う方法というのは、単に設定（あるいは オプション、ご使用のプラットフォームによります）ウィンドウの フィード パネルという既存のユーザインタフェースを使用することです。

+
+ 注意: Firefox 8 よりフィードパネルは無くなっています。フィードリーダーの開発者が、Web フィードの処理の為のオプションをご自分で追加する場合、上記の同様の JavaScript コードを実装することをお勧めします。
+

これも拡張機能からプログラムで行うこともできます。フィードリーダに使うアプリケーションのパス名を browser.feeds.handlers.application オプションの値に設定することで可能です。

+

関連情報

+ diff --git a/files/ja/mozilla/firefox/releases/2/updating_extensions/index.html b/files/ja/mozilla/firefox/releases/2/updating_extensions/index.html new file mode 100644 index 0000000000..546bd25562 --- /dev/null +++ b/files/ja/mozilla/firefox/releases/2/updating_extensions/index.html @@ -0,0 +1,37 @@ +--- +title: Updating extensions for Firefox 2 +slug: Updating_extensions_for_Firefox_2 +tags: + - Add-ons + - Extensions +translation_of: Mozilla/Firefox/Releases/2/Updating_extensions +--- +

この記事は、開発者が彼らの拡張機能を更新して Firefox 2 で動作させるために役立つ情報を提供しています。 +

{{ 英語版章題("Step 1: Update the install manifest") }} +

+

ステップ 1: インストール定義ファイルの更新

+

最初のステップ -- ほとんどの拡張機能で唯一必要なこと -- は、インストール定義ファイル <tt>install.rdf</tt> を更新し、Firefox 2 との互換性を持たせることです。 +

単純に、Firefox の最大互換バージョンを指示する行を探します (次のように Firefox 1.5 向けになっています): +

+
 <em:maxVersion>1.5.0.*</em:maxVersion>
+
+

これを変更して Firefox 2 と互換性を持たせます: +

+
 <em:maxVersion>2.0.0.*</em:maxVersion>
+
+

そして、拡張機能を再インストールしてみます。 +

{{ 英語版章題("Step 2: Update XUL overlays") }} +

+

ステップ 2: XUL オーバーレイの更新

+

Firefox 2 はデフォルトのテーマに変更を加えています。さらに、一部のユーザインタフェース要素が変更、または移動されているため、あなたの拡張機能の XUL オーバーレイに依存する部分が影響を受けます。 +

拡張機能の XUL オーバーレイに影響する変更箇所について学ぶには、Firefox 2 におけるテーマの変更点の記事に目を通してください。 +

{{ 英語版章題("Step 3: Test") }} +

+

ステップ 3: テスト

+

公式にリリースする前に、必ず拡張機能を Firefox 2 上でテストしてください。最後にすることは、Firefox のリリース時に起こる問題報告のラッシュに、あなたの拡張機能の新バージョンが責任を持つことです。 +

{{ 英語版章題("Step 4: Release") }} +

+

ステップ 4: リリース

+

http://addons.mozilla.org 上のあなたの拡張機能のエントリを更新してください。ユーザが更新を見つけられるようになります。 +

さらに、あなたの拡張機能のインストール定義ファイルで updateURL を提供している場合は、必ず update manifest を更新し、Firefox が自動的に拡張機能の新バージョンを見つけられるようにしてください。こうすることによって、ユーザが Firefox 2 にアップグレードした後で最初にあなたの拡張機能を実行した時、新バージョンを自動的にインストールさせることができます。 +

{{ languages( { "en": "en/Updating_extensions_for_Firefox_2", "fr": "fr/Mise_\u00e0_jour_des_extensions_pour_Firefox_2", "ko": "ko/Updating_extensions_for_Firefox_2", "pl": "pl/Aktualizacja_rozszerze\u0144_do_Firefoksa_2" } ) }} diff --git a/files/ja/mozilla/firefox/releases/3.5/updating_extensions/index.html b/files/ja/mozilla/firefox/releases/3.5/updating_extensions/index.html new file mode 100644 index 0000000000..a644ae451a --- /dev/null +++ b/files/ja/mozilla/firefox/releases/3.5/updating_extensions/index.html @@ -0,0 +1,73 @@ +--- +title: Updating extensions for Firefox 3.1 +slug: Updating_extensions_for_Firefox_3.1 +--- +

{{ fx_minversion_header(3.1) }}

+

この記事は、自分の拡張機能を Firefox 3.1 で正しく動作するよう更新しようとしている拡張機能開発者のために役立つ情報を提供します。

+

更新の基本

+

この節では、Firefox の新しいバージョンに向けて拡張機能を更新する際に必ず行わなければならないことの基本を説明します。

+

拡張機能のテスト

+

まずはじめに、拡張機能の install.rdf ファイルを編集して、(Firefox 3.1 beta 2 でテストを行っている場合は) maxVersion を 3.1b2 に更新し、それに合わせて version を上げましょう。

+

Firefox のプロファイルを新規作成し、テストが常用のプロファイルに影響しないようにします。 Firefox が含まれるディレクトリに移動して、以下のコマンドを実行します。

+
firefox -createProfile testBeta2
+
+

Mac では、Firefox のアプリケーションバンドル内へはるばる移動する必要があります。

+
cd /Applications/Firefox.app/Contents/MacOS/
+firefox -createProfile testBeta2
+
+

コマンドライン上で以下のコマンドを実行し、新規プロファイルで Firefox を起動します。

+
firefox -P testBeta2
+
+

自分の拡張機能を徹底的にテストします。 JavaScript のあらゆる警告や例外を通知するために、以下の設定項目を true に設定しておくことをお勧めします。

+ +

拡張機能の更新

+

テスト中に何か問題を発見した場合は、コードを更新して問題を修正しましょう。 この記事には、若干の更新作業が必要な箇所についての役立つ情報が載っています。

+

テストが完了したら、今度は常用のプロファイルを使って、再度その拡張機能を使ってみます。 この作業は、保存されている既存のデータとの互換性を確認するのに役立ちます。

+

addons.mozilla.org に登録されている拡張機能の更新

+

ついに、更新した拡張機能を公開するときが来ました。 もし自分の拡張機能に一切コードの変更が必要ない場合は、AMO のダッシュボードにログインして、互換性のあるバージョンを更新するだけで済みます。 何らかの変更を加えた場合は、新しいバージョンを AMO にアップロードする必要があります。

+

詳しくは AMO へのアドオンの登録 を参照してください。

+

Places データベースへのアクセス

+

Firefox 3.1 以前は、Storage API を使って Places データベースへ直接アクセスする場合、以下のように少々工夫が必要でした。

+
var places = Components.classes["@mozilla.org/file/directory_service;1"].
+                        getService(Components.interfaces.nsIProperties).
+                        get("ProfD", Components.interfaces.nsIFile);
+places.append("places.sqlite");
+var db = Components.classes["@mozilla.org/storage/service;1"].
+                    getService(Components.interfaces.mozIStorageService).openDatabase(places);
+
+

これは places.sqlite データベースファイルへのパスを自力で作成し、Storage アクセスのためのファイルを開くものでした。

+

Firefox 3.1 には、Places データベースへアクセスするための便利な方法を提供する、専用のサービスが追加されており、上記の方法は Firefox 3.1 以降では機能しません。

+
var db = Components.classes["@mozilla.org/browser/nav-history-service;1"].
+                    getService(Components.interfaces.nsPIPlacesDatabase).DBConnection;
+
+

テキストボックスの検索

+

textbox の種類のひとつ、timed は廃止予定となりました。代わりに search を使ってください。

+

Firefox 3 では、以下のようなコードが使われていたはずです。

+
<textbox type="timed" timeout="1000" oncommand="alert(this.value);"/>
+
+

Firefox 3.1 では、これを以下のように書き換える必要があります。

+
<textbox type="search" timeout="1000" oncommand="alert(this.value);"/>
+
+

JSON

+

JSON.jsm JavaScript モジュールは Firefox 3.1 では削除され、ネイティブの JSON オブジェクトサポートに置き換えられました。 詳しくは、Firefox で JSON を使用する をご覧ください。JSON のより一般的な概要と、各種バージョンの Firefox で JSON を使う方法については、JSON のページからリンクされている記事を参照してください。

+

Firefox 3 と Firefox 3.1 の両方について互換性を確保するには、以下のように記述します。

+
if (typeof(JSON) == "undefined") {
+  Components.utils.import("resource://gre/modules/JSON.jsm");
+  JSON.parse = JSON.fromString;
+  JSON.stringify = JSON.toString;
+}
+
+

JSON がネイティブサポートされていない場合は JSON.jsm JavaScript モジュールをインポートして、そのモジュールによって提供されているメソッドをネイティブ JSON で使われているものにマッピングします。これによって、同じ呼び出しが可能になります。

+

また、{{ interface("nsIJSON") }} インタフェースを直接利用することでも、この問題を回避できます。

+

クローム登録に関する変更

+

Firefox 3.1 では、リモートのクロームを利用可能にするセキュリティホールが修正されています。 これは、chrome.manifest ファイルに Web サイトを参照するリソースが含まれているすべてのアドオンに影響します。

+

この問題は {{ Bug(466582) }} で詳しく説明されています。{{ interface("nsIProtocolHandler") }} インタフェースに追加された新しいフラグ URI_IS_LOCAL_RESOURCE によって、そのプロトコルがクロームとして登録しても安全であることを示すことができます。 独自のプロトコルハンドラを作成し、それを chrome.manifest 内で登録しようとするアドオンは、正しく動作するようにこのフラグを追加する必要があります。

+

カスタマイズ可能なツールバー

+

Firefox 3.1 では、カスタマイズ可能なツールバーの挙動が次のように変更されました。<xul:toolbar/> バインディングは、関連付けられた <xul:toolbarpalette/> からツールバー削除、もしくはツールバーへ追加するようになりました。これまでは、項目を複製してツールバーへコピーしていました。 つまり、パレットには、ツールバー上に存在しないアイテムしか含めることができません。これまでの挙動では、ツールバー上に表示されているかどうかに関わらず、カスタマイズ可能なすべての要素が含まれていました。 これは、<xul:toolbarpalette/> からカスタマイズ可能なすべてのツールバー項目を取得できることに依存した処理を行っていたり、ツールバーのカスタマイズ中に動的にパレットへ項目を挿入し、それらを利用可能にしようとしているアドオンで問題となる可能性があります。 詳しくは、{{ Bug(407725) }} と {{ Bug(467045) }} をご覧ください。

+

興味深い新機能

+

すべてのタブのイベントを監視する

+

Firefox 3.1 では、すべてのタブを監視するプログレスリスナーを追加、削除できるようになりました。 詳しくは、すべてのタブのイベントを監視する をご覧ください。

+

テーマ開発者の方へ

+ diff --git a/files/ja/mozilla/firefox/releases/3/dom_improvements/index.html b/files/ja/mozilla/firefox/releases/3/dom_improvements/index.html new file mode 100644 index 0000000000..95a990a367 --- /dev/null +++ b/files/ja/mozilla/firefox/releases/3/dom_improvements/index.html @@ -0,0 +1,29 @@ +--- +title: DOM improvements in Firefox 3 +slug: DOM_improvements_in_Firefox_3 +tags: + - DOM + - Firefox 3 +translation_of: Mozilla/Firefox/Releases/3/DOM_improvements +--- +

{{ Fx_minversion_header(3) }} +

Firefox 3 では、特に、他のブラウザによる独自 DOM 拡張 のサポートに関するものを含む、多くの Document Object Model (DOM) 実装が追加されました。この記事は、これらの実装の一覧と詳細なドキュメントへのリンクを提供します。

+ +

{{ 英語版章題("See also") }} +

+

参照

+ +
+
+{{ languages( { "en": "en/DOM_improvements_in_Firefox_3", "es": "es/Mejoras_DOM_en_Firefox_3", "fr": "fr/Am\u00e9liorations_DOM_dans_Firefox_3", "pl": "pl/Poprawki_DOM_w_Firefoksie_3" } ) }} diff --git a/files/ja/mozilla/firefox/releases/3/full_page_zoom/index.html b/files/ja/mozilla/firefox/releases/3/full_page_zoom/index.html new file mode 100644 index 0000000000..c92ff3cc1b --- /dev/null +++ b/files/ja/mozilla/firefox/releases/3/full_page_zoom/index.html @@ -0,0 +1,41 @@ +--- +title: Full page zoom +slug: Full_page_zoom +tags: + - Firefox 3 +translation_of: Mozilla/Firefox/Releases/3/Full_page_zoom +--- +

{{ Fx_minversion_header(3) }} +{{ Gecko_minversion_header(1.9) }} +

フルページズーム (あるいは単にフルズーム) は Firefox 3 の新機能です。 +

{{ 英語版章題("Example (XUL:browser)") }} +

+

例 (XUL:browser)

+

以下の例は、現在フォーカスがあたっているブラウザウィンドウでの利用をデモしています。これは Firefox 拡張機能での典型的な利用方法です。 +

+
var zoom = 1.5;
+var docViewer = getBrowser().selectedBrowser.markupDocumentViewer;
+docViewer.fullZoom = zoom;
+
+

{{ 英語版章題("Example (XUL:iframe)") }} +

+

例 (XUL:iframe)

+

フルズーム機能を XUL:iframe でも同様に使用することができます。しかし、iframe には markupDocumentViewer プロパティがないため、最初に以下のようにする必要があります: +

+
var zoom = 1.5;
+var iframe = document.getElementById("authorFrame");
+var contViewer = iframe.docShell.contentViewer;
+var docViewer = contViewer.QueryInterface(Components.interfaces.nsIMarkupDocumentViewer);
+docViewer.fullZoom = zoom;
+
+

{{ 英語版章題("References") }} +

+

参考資料

+ +
+
+{{ languages( { "en": "en/Full_page_zoom", "es": "es/Zoom_a_p\u00e1gina_completa", "fr": "fr/Zoom_pleine_page" } ) }} diff --git a/files/ja/mozilla/firefox/releases/3/notable_bugs_fixed/index.html b/files/ja/mozilla/firefox/releases/3/notable_bugs_fixed/index.html new file mode 100644 index 0000000000..abef2a2cfd --- /dev/null +++ b/files/ja/mozilla/firefox/releases/3/notable_bugs_fixed/index.html @@ -0,0 +1,32 @@ +--- +title: Notable bugs fixed in Firefox 3 +slug: Notable_bugs_fixed_in_Firefox_3 +tags: + - Firefox 3 +translation_of: Mozilla/Firefox/Releases/3/Notable_bugs_fixed +--- +

この記事は、ドキュメントで必ずしも明白に説明されていない、Firefox 3 で修正された重要なバグの修正の一覧を提供します。 +

+ +

{{ 英語版章題("See also") }} +

+

参照

+ +
+
+{{ languages( { "en": "en/Notable_bugs_fixed_in_Firefox_3", "es": "es/Bugs_importantes_solucionados_en_Firefox_3", "fr": "fr/Bugs_importants_corrig\u00e9s_dans_Firefox_3", "pl": "pl/Istotne_b\u0142\u0119dy_poprawione_w_Firefoksie_3" } ) }} diff --git a/files/ja/mozilla/firefox/releases/3/svg_improvements/index.html b/files/ja/mozilla/firefox/releases/3/svg_improvements/index.html new file mode 100644 index 0000000000..268528b155 --- /dev/null +++ b/files/ja/mozilla/firefox/releases/3/svg_improvements/index.html @@ -0,0 +1,56 @@ +--- +title: SVG improvements in Firefox 3 +slug: SVG_improvements_in_Firefox_3 +tags: + - Firefox 3 + - SVG +translation_of: Mozilla/Firefox/Releases/3/SVG_improvements +--- +

{{ Fx_minversion_header(3) }} +

Firefox 3 では、以前のバージョンの Firefox よりも改善された Scalable Vector Graphics (SVG) サポートが追加されました。これらの機能は、別の場所で文書化されていますが、この記事は、便利な一覧を提供することで、どの機能が Firefox 3 で追加されたのかを判別しやすくします。 +

+ +

{{ 英語版章題("See also") }} +

+

参照

+ +


+


+


+

+
+
+{{ languages( { "en": "en/SVG_improvements_in_Firefox_3", "es": "es/Mejoras_SVG_en_Firefox_3", "fr": "fr/Am\u00e9liorations_SVG_dans_Firefox_3", "pl": "pl/Poprawki_SVG_w_Firefoksie_3" } ) }} diff --git a/files/ja/mozilla/firefox/releases/3/updating_extensions/index.html b/files/ja/mozilla/firefox/releases/3/updating_extensions/index.html new file mode 100644 index 0000000000..f4237195d7 --- /dev/null +++ b/files/ja/mozilla/firefox/releases/3/updating_extensions/index.html @@ -0,0 +1,157 @@ +--- +title: Updating extensions for Firefox 3 +slug: Updating_extensions_for_Firefox_3 +tags: + - Firefox 3 +translation_of: Mozilla/Firefox/Releases/3/Updating_extensions +--- +

このドキュメントは、拡張機能を更新して Firefox 3 に対応させたいと考える開発者のために役立つ情報を提供します。

+ +

読み進める前に、私たちからひとつだけ参考になるヒントをお教えしましょう。もしあなたの拡張機能に必要な変更がインストール定義ファイル内の maxVersion 項目の更新だけで、なおかつ addons.mozilla.org に拡張機能を登録している場合、新しいバージョンの拡張機能をアップロードする必要はありません！ AMO 上の「開発者用コントロールパネル」を使って maxVersion を更新するだけで作業は完了です。この方法なら、拡張機能が再度レビューに回ることもありません。

+ +

Step 1: インストール定義ファイルを更新する

+ +

最初のステップ、そして、ほとんどの拡張機能にとって必要となるたったひとつのステップは、Firefox 3 との互換性を示すために インストール定義ファイル (install.rdf) を更新する作業です。

+ +

ファイルを開いて、互換性がある Firefox の最高バージョンを示す行を見つけます。Firefox 2 向けの拡張機能であれば、以下のように書かれているはずです。

+ +
 <em:maxVersion>2.0.*</em:maxVersion>
+
+ +

これを Firefox 3 との互換性を示すように変更します。

+ +
 <em:maxVersion>3.0.*</em:maxVersion>
+
+ +

次にアドオンを再インストールします。

+ +

なお、Firefox 3 ではバージョン番号の余計な「.0」が廃止されますので、「3.0.0.*」の代わりに「3.0.*」と書くだけで済みます。

+ +

これまでに、一部の拡張機能に影響すると思われる API の変更がいくつも行われています (まだ今後も変更は行われるでしょう)。私たちは現在、これらの変更の完全なリストを作成中です。

+ +
註: もしあなたの拡張機能が、インストール定義ファイル の代わりに、まだ Install.js スクリプトを使っている場合は、今回インストール定義ファイルに移行していただく必要があります。Firefox 3 は XPI ファイル内の install.js スクリプトをサポートしません。
+ +

インストール定義ファイルに翻訳を追加する

+ +

Firefox 3 は、翻訳された説明文を指定するための新しいプロパティを、インストール定義ファイル内でサポートしています。今までの方法も引き続き動作しますが、この新しい方法を利用すれば、アドオンが無効化されていたりインストールが保留されている場合も、各言語で説明文を表示できるようになります。詳しくは 拡張機能の説明の翻訳 をご覧ください。

+ +

Step 2: 安全な更新を提供しているか確認する

+ +

あなたが独自にアドオンを配布していて、addons.mozilla.org のような安全なアドオン提供サービスを利用していない場合、アドオンの更新に安全な方法を用いる必要があります。つまり、SSL を利用した Web サイト上で更新を提供するか、暗号鍵を使って更新情報に署名する必要があります。詳しくは 安全な更新 をご覧ください。

+ +

Step 3: 変更された API に対応する

+ +

いくつかの API は様々な方法で変更が行われています。それらの中で、多くの拡張機能に影響を与えることが予想される最も大幅な変更を以下にまとめました。

+ +

DOM

+ +

外部ドキュメントからのノードは、現在のドキュメントに挿入する前に document.importNode() を使ってクローンを作る (あるいは + document.adoptNode() を使って取り込む) べきです。Node.ownerDocument 問題の詳細については + W3C DOM FAQ を参照してください。

+ +

Firefox では現在このルールを強制していません。Firefox 3 の開発中には強制していた時期もありましたが、このルールを強制すると多くのサイトが機能しなくなってしまうため取りやめになりました。 + 将来的な互換性を高めるため、Web 開発者にはこのルールに従ってコードを修正することを推奨します。

+ +

ブックマークと履歴

+ +

あなたの拡張機能から何らかの方法でブックマークや履歴のデータにアクセスしている場合、Firefox 3 と互換性を持たせるには多くの作業が必要です。これらの情報にアクセスするための古い API は、Places という新しいアーキテクチャに置き換えられました。既存の拡張機能を Places API に対応させる方法については、Places への移行ガイド で詳しく解説しています。

+ +

ダウンロードマネージャ

+ +

RDF データ形式から Storage API への移行にあたって、ダウンロードマネージャの API にも若干変更が加えられました。これに関する移行作業は非常に簡単なはずです。また、複数のダウンロードマネージャリスナーをサポートするため、ダウンロードの進捗状況を監視する API にも変更がありました。詳しくは nsIDownloadManager、nsIDownloadProgressListener、ダウンロードの監視 を参照してください。

+ +

パスワードマネージャ

+ +

あなたの拡張機能からパスワードマネージャを利用してユーザのログイン情報にアクセスしている場合、新しいログインマネージャ API を利用するように更新する必要があります。

+ + + +

あなたが拡張機能の中で独自のパスワードストレージを提供したい場合は、組み込みのパスワードマネージャストレージを上書きすることもできます。詳しくは ログインマネージャ用ストレージモジュールの作成 をご覧ください。

+ +

ポップアップ (メニュー、コンテキストメニュー、ツールチップ、パネル)

+ +

XUL のポップアップシステムは Firefox 3 で大幅に変更されました。ポップアップシステムには、メインメニュー、コンテキストメニュー、ポップアップパネルが含まれます。新しいシステムの仕組みについては ポップアップの使用 ガイドをご覧ください。特筆すべき点は、popup.showPopup が非推奨となり、新しい popup.openPopup と popup.openPopupAtScreen に置き換えられたことです。

+ +

自動補完

+ +

nsIAutoCompleteController インタフェースの handleEnter() メソッドは、テキストが自動補完ポップアップから選択されたか、ユーザが自分で入力した後 Enter キーを押したかを示す引数を受け付けるよう変更が行われました。

+ +

DOMParser

+ + + +

削除されたインタフェース

+ +

以下のインタフェースは、Firefox 3 の基盤である Gecko 1.9 から削除されました。あなたの拡張機能でいずれかを使用している場合、コードを更新する必要があるでしょう。

+ + + +

Step 4: 関連するクローム周りの変更を確認する

+ +

あなたのコードに修正を加える必要があるかもしれない小さな変更がクロームに対して行われました。「browser-bottombox」と呼ばれる新しい vbox が追加されました。これは、ブラウザウィンドウの下部にあるページ内検索バーとステータスバーを含むものです。この変更は見た目には影響しませんが、あなたの拡張機能がこれらの要素に関するクロームにオーバーレイを行っている場合、影響を受ける可能性があります。

+ +

例えばこれまで、次のように、ステータスバーの直前にクロームをオーバーレイしていた場合、

+ +
<window id="main-window">
+<something insertbefore="status-bar" />
+</window>
+
+ +

今後は次のようにオーバーレイを行う必要があります。

+ +
<vbox id="browser-bottombox">
+<something insertbefore="status-bar" />
+</vbox>
+
+ +

その他の変更

+ +

もし、拡張機能を Firefox 3 対応にするために必要な小さい変更があったら、ここに追加してください。

+ + + +

  

+ +

  

+ +
+ +
+ +

 

diff --git a/files/ja/mozilla/firefox/releases/3/updating_web_applications/index.html b/files/ja/mozilla/firefox/releases/3/updating_web_applications/index.html new file mode 100644 index 0000000000..1ea0118570 --- /dev/null +++ b/files/ja/mozilla/firefox/releases/3/updating_web_applications/index.html @@ -0,0 +1,107 @@ +--- +title: Updating web applications for Firefox 3 +slug: Updating_web_applications_for_Firefox_3 +tags: + - Firefox 3 + - 要更新 +translation_of: Mozilla/Firefox/Releases/3/Updating_web_applications +--- +

{{ Fx_minversion_header(3) }} 来たる Firefox 3 では、あなたが利用したいであろう新機能と同様に、ウェブサイトやウェブアプリケーションに影響するであろう多くの変更が施されています。この記事は Firefox 3 を最大限活用するためにあなたのコンテンツを更新する作業の出発点となるでしょう。

+ +

{{ 英語版章題("DOM changes") }}

+ +

DOM の変更

+ +

外部ドキュメントからのノードは、現在のドキュメントに挿入する前に document.importNode() を使ってクローンを作る (あるいは + document.adoptNode() を使って取り込む) べきです。Node.ownerDocument 問題の詳細については + W3C DOM FAQ を参照してください。

+ +

Firefox では現在このルールを強制していません。Firefox 3 の開発中には強制していた時期もありましたが、このルールを強制すると多くのサイトが機能しなくなってしまうため取りやめになりました。 + 将来的な互換性を高めるため、Web 開発者にはこのルールに従ってコードを修正することを推奨します。

+ +

{{ 英語版章題("HTML changes") }}

+ +

HTML の変更

+ +

{{ 英語版章題("Changes to character set inheritance") }}

+ +

キャラクタセット継承に対する変更

+ +

Firefox 3 では、frame や iframe が親のキャラクタセットを継承できてしまうセキュリティ上のバグが修正されています。これにより、場合によっては問題が起こる可能性があります。フレームが親のキャラクタセットを継承できるのは、フレームと親がともに同じサーバーから読み込まれている場合に限られます。もしあなたのページが、他のサーバーから読み込まれたフレームが同じキャラクタセットを継承することを前提に作られているなら、フレームの HTML を更新してキャラクタセットを明確に指定するべきです。

+ +

{{ 英語版章題("Change to the SCRIPT element") }}

+ +

SCRIPT 要素に対する変更

+ +

text/html 文書における <script> 要素は、たとえ 間に内容を含めなくても、HTML 4 文書における 閉じ タグである </script> を必要とするようになりました。以前のバージョンの Firefox では、以下のようにすることが可能でした。：

+ +
<script ... />
+
+ +

今バージョンからマークアップは HTML の仕様に従わなければならず（それが実際に HTML である場合）、以下のように実際に閉じなければなりません。：

+ +
<script ...></script>
+
+ +

これは互換性とセキュリティの両方を改善します。

+ +

{{ 英語版章題("CSS changes") }}

+ +

CSS の変更

+ +

{{ 英語版章題("Change to font-size based on em, ex units") }}

+ +

em、ex 単位に基づいた font-size に対する変更

+ +

em、ex 単位での font-size の値はユーザの最小フォントサイズ設定の影響を受けていました。例えば、フォントが最小フォントサイズより大きく表示されるなら、em と ex 単位で font-size を指定されたフォントは最小フォントサイズ設定に従って拡大されるでしょう。これは割合に基づいたフォントサイズの振る舞いと矛盾していました。

+ +

em 及び ex 単位での font-size の値は、ユーザの最小フォントサイズの影響を受けることなく、"意図されたフォントサイズ" に基づくようになりました。言い換えれば、フォントサイズは常にデザイナーの意図に従って計算され、その後に最小フォントサイズのための調整が行われるようになったということです。

+ +

デモは https://bugzilla.mozilla.org/attachment.cgi?id=322943 を参照してください（違いを知るためには最小フォントサイズを 6 以上にして見る必要があります。二つの箱のカスケードは Firefox 2 では異なった振る舞いをします。なぜなら、em ベースのフォントサイズは最小フォントサイズの "影響を受ける" からです）。

+ +

{{ 英語版章題("Security changes") }}

+ +

セキュリティに関する変更

+ +

{{ 英語版章題("Chrome access") }}

+ +

クロームへのアクセス

+ +

Firefox のこれまでのバージョンでは、Web ページは chrome:// プロトコルを使ってクロームからスクリプトや画像を読み込むことが可能でした。特に、このような仕様によって、アドオンがインストールされているかどうかをサイトが判別することが可能でした。これは、ブラウザにセキュリティ機能を追加するアドオンを回避して、ユーザのセキュリティを侵害するのに利用される恐れがありました。

+ +

Firefox 3 では、Web コンテンツは chrome://browser/ および chrome://toolkit/ 以下にあるコンテンツに限ってアクセスできます。これらのファイルは Web コンテンツからアクセスされることを意図したものです。他のクロームコンテンツはすべて、Web からのアクセスが禁止されます。

+ +

ただし、拡張機能が、内部のコンテンツを Web からアクセス可能にする方法があります。その方法とは、以下のように、chrome.manifest ファイルに特別なフラグを指定することです。

+ +

content mypackage location/ contentaccessible=yes

+ +

これは頻繁に必要となるものではありませんが、Web からのアクセスが必要な、まれなケースのために用意されています。Firefox はユーザに拡張が contentaccessible フラグをこのような方法で用いることで潜在的セキュリティリスクになることを警告するかもしれないことに注意してください。

+ +
注意: Firefox 2 では contentaccessible フラグが認識されない (フラグを含む行全体が無視されてしまう) ことから、アドオンを Firefox 2 と Firefox 3 の両方に対応させたい場合は、以下のように指定します。 + +
content mypackage location/
+content mypackage location/ contentaccessible=yes
+
+
+ +

{{ 英語版章題("File upload fields") }}

+ +

ファイルアップロード用フォーム項目

+ +

Firefox のこれまでのバージョンでは、ユーザがファイルをアップロードするために送信する際、そのファイルのフルパスが Web アプリケーションに公開されてしまう場合がありました。このプライバシーの懸念は、Firefox 3 で、ファイル名のみをWeb アプリケーションに公開するよう仕様を変更することで解決されました。

+ +

{{ 英語版章題("JavaScript changes") }}

+ +

JavaScript の変更

+ +

Firefox 3 は JavaScript 1.8 をサポートします。あなたの Web サイトや Web アプリケーションの更新が必要となりうる重要な変更点としては、時代遅れであり非標準の Script オブジェクトがサポートされなくなることが挙げられます。これは <script> タグではなく、標準化されることのなかった JavaScript オブジェクトのことです。どちらにしてもあなたが使用していた可能性は低いでしょうから、これが問題になることは恐らくないでしょう。

+ +

{{ 英語版章題("See also") }}

+ +

参考

+ + diff --git a/files/ja/mozilla/firefox/releases/4/the_add-on_bar/index.html b/files/ja/mozilla/firefox/releases/4/the_add-on_bar/index.html new file mode 100644 index 0000000000..2fd58a9985 --- /dev/null +++ b/files/ja/mozilla/firefox/releases/4/the_add-on_bar/index.html @@ -0,0 +1,76 @@ +--- +title: アドオンバー +slug: The_add-on_bar +tags: + - Add-ons + - Extensions + - Firefox 4 + - Toolbar + - 要更新 +translation_of: Mozilla/Firefox/Releases/4/The_add-on_bar +--- +
{{fx_minversion_header("4")}} {{draft}}
+

Firefox 4 よりウィンドウの下部に新しいツールバーを実装する為、ブラウザウィンドウの下部からステータスバーが削除されます。この新しいツールバーは ID "addon-bar" を持った、標準の XUL {{XULElem("toolbar")}} です。アドオンはこのバーにコンテンツを挿入することが可能であり、また、ユーザーはツールバーのカスタマイズ中にボタンをアドオンバーにドラッグすることができます。これがアドオンバーと旧ステータスバーの間の主な相違点です。標準のツールバーであるため、どの XUL 要素でもアドオンバーに配置することができます。

+
+ 注記: 当面は、Firefox にはステータスバーが存在することを期待するアドオンがうまく動作するようにするためのシムが噛ませてあります。但しこれは一時的な措置であり、じきに削除されます。アドオンをアップデートしてください。
+

アドオンバーに要素を加える

+

アドオンバーは ID "addon-bar" を持つ XUL ツールバーです。次のコードは、一番最近使われたウィンドウを探し出し、XUL {{XULElem("label")}} 要素を用いて単に "Hello world!" のテキストを表示する新しいアイテムをアドオンバーに加えます。

+
// 一番最近使われたウィンドウを探す
+
+var mediator = Components.classes['@mozilla.org/appshell/window-mediator;1']
+                  .getService(Components.interfaces.nsIWindowMediator);
+var doc = mediator.getMostRecentWindow("navigator:browser").document;
+
+// そのウィンドウのアドオンバーを取得する
+var addonBar = doc.getElementById("addon-bar");
+
+// 新しいツールバーアイテムを構築する
+var newItem = doc.createElement("toolbaritem");
+var itemLabel = doc.createElement("label");
+
+// アイテムをツールバーに追加しテキストラベルをセットする
+newItem.appendChild(itemLabel);
+addonBar.appendChild(newItem);
+itemLabel.value = "Hello world!";
+
+

To add the button only once create a bool pref to check if it is the first run. For example:

+
var firstrun = Services.prefs.getBoolPref("extensions.YOUREXT.firstrun");
+
+var curVersion = "0.0.0";
+
+if (firstrun) {
+  Services.prefs.setBoolPref("extensions.YOUREXT.firstrun", false);
+  Services.prefs.setCharPref("extensions.YOUREXT.installedVersion", curVersion);
+  /* Code related to firstrun */
+} else {
+  try {
+    var installedVersion = Services.prefs.getCharPref("extensions.YOUREXT.installedVersion");
+    if (curVersion > installedVersion) {
+      Services.prefs.setCharPref("extensions.YOUREXT.installedVersion", curVersion);
+      /* Code related to upgrade */
+    }
+  } catch (ex) {
+    /* Code related to a reinstall */
+  }
+}
+
+

Firefox の各バージョンでのオーバーレイの使用方法

+

Firefox 3.6 とそれ以前のバージョンとの互換性を保持したままアドオンバーのサポートを追加するには、2 つのオーバーレイを使用する必要があります。
+ The chrome.manifest file can specify which file is used by which Firefox version by using manifest flags:

+
overlay chrome://browser/content/browser.xul chrome://myaddon/content/myaddon/overlayold.xul application={ec8030f7-c20a-464f-9b0e-13a3a9e97384} appversion<4.0
+overlay chrome://browser/content/browser.xul chrome://myaddon/content/myaddon/overlay.xul application={ec8030f7-c20a-464f-9b0e-13a3a9e97384} appversion>=4.0
+
+

注記: the appversion has to be at least 2 digits long or it won't work with versions of Gecko before 1.8.0.13 and 1.8.1.5.

+

デフォルトでボタンを追加

+

参照 : Adding a button by default

+

見た目の違い

+ +

関連情報

+ -- cgit v1.2.3-54-g00ecf