diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:07:59 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:07:59 +0100 |
commit | 6ef1fa4618e08426b874529619a66adbd3d1fcf0 (patch) | |
tree | 890e3e27131be010d82ef957fa68db495006cb0e /files/ja/mozilla/add-ons/webextensions/api/devtools | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-6ef1fa4618e08426b874529619a66adbd3d1fcf0.tar.gz translated-content-6ef1fa4618e08426b874529619a66adbd3d1fcf0.tar.bz2 translated-content-6ef1fa4618e08426b874529619a66adbd3d1fcf0.zip |
unslug ja: move
Diffstat (limited to 'files/ja/mozilla/add-ons/webextensions/api/devtools')
5 files changed, 546 insertions, 0 deletions
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 +--- +<div>{{AddonSidebar()}}</div> + +<p>devtools が接続されているウィンドウで JavaScript を実行します。</p> + +<p>これは {{WebExtAPIRef("tabs.executeScript()")}} を使用してコンテンツスクリプトを添付することに似ていますが、主に2つの違いがあります。</p> + +<p>第1に、JavaScript は<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval#ヘルパー" id="Helper">ブラウザが通常 devtools コンソール実装で提供する特別なコマンド</a>のセットを使用できます。たとえば、"$0" を使用してインスペクタで現在選択されている要素を参照します。</p> + +<p>次に、実行する JavaScript はページが読み込んだスクリプトによってページに加えられた変更を確認できます。これは、<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#DOM_access">ページスクリプトが読み込まれなかった場合に存在するページを表示する</a>コンテンツスクリプトとは対照的です。ただし、コンテンツスクリプトによって提供される分離は意図的なセキュリティ機能であり、DOM 関数とプロパティを再定義することにより、悪意のあるまたは単に非協力的な Web ページがWebExtensions API を混乱または破壊することを困難にすることを目的としています。つまり <code>eval()</code> を使用してこの保護を放棄する場合は非常に注意する必要があり、<code>eval()</code> を使用する必要がない限りコンテンツスクリプトを使用する必要があります。</p> + +<p>スクリプトは、ページのメインフレームでデフォルトで評価されます。スクリプトは、JSON として表現できる値に評価する必要があります (たとえば、関数または関数を含むオブジェクトには評価されない可能性があることを意味します)。デフォルトでは、スクリプトはページに添付されたコンテンツスクリプトを表示しません。</p> + +<p>"about:addons" などの特権ブラウザウィンドウで <code>eval()</code> を呼び出すことはできません。</p> + +<p>オプションで <code>options</code> パラメータを指定できます。<code>options</code> パラメータには、異なるフレームまたは添付コンテンツスクリプトのコンテキストでスクリプトを評価するオプションが含まれます。Firefox はまだ <code>options</code> パラメータをサポートしていないことに注意してください。</p> + +<p><code>eval()</code> 関数は、スクリプトの評価結果またはエラーを解決する <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> を返します。</p> + +<h2 id="ヘルパー">ヘルパー</h2> + +<p>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:</p> + +<dl> + <dt><code>$0</code></dt> + <dd>Contains a reference to the element that's currently selected in the devtools Inspector.</dd> + <dt><code>inspect()</code></dt> + <dd>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.</dd> +</dl> + +<p><a href="#Examples">See some examples.</a></p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox brush:js">var evaluating = browser.devtools.inspectedWindow.eval( + expression, // string + options // object +) +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>expression</code></dt> + <dd><code>string</code>. 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, <code>expression</code> must not evaluate to a function.</dd> + <dt><code>options</code>{{optional_inline}}</dt> + <dd><code>object</code>. Options for the function (Note that Firefox does not yet support this options), as follows:</dd> + <dd> + <dl class="reference-values"> + <dt><code>frameURL</code>{{optional_inline}}</dt> + <dd><code>string</code>. 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.</dd> + <dt><code>useContentScriptContext</code>{{optional_inline}}</dt> + <dd><code>boolean</code>. If <code>true</code>, 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.</dd> + <dt><code>contextSecurityOrigin</code> {{optional_inline}}</dt> + <dd><code>string</code>. Evaluate the expression in the context of a content script attached by a different extension, whose origin matches the value given here. This overrides <code>useContentScriptContext</code>.</dd> + </dl> + </dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>A <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> that will be fulfilled with an <code>array</code> containing two elements.</p> + +<p>If no error occurred, element 0 will contain the result of evaluating the expression, and element 1 will be <code>undefined</code>.</p> + +<p>If an error occurred, element 0 will be <code>undefined</code>, and element 1 will contain an object giving details about the error. Two different sorts of errors are distinguished:</p> + +<ul> + <li>errors encountered evaluating the JavaScript (for example, syntax errors in the expression). In this case, element 1 will contain: + <ul> + <li>a boolean property <code>isException</code>, set to <code>true</code></li> + <li>a string property <code>value</code>, giving more details.</li> + </ul> + </li> + <li>other errors (for example, an expression that evaluates to an object that can't be represented as JSON). In this case, element 1 will contain: + <ul> + <li>a boolean property <code>isError</code>, set to <code>true</code></li> + <li>a string property <code>code</code> containing an error code.</li> + </ul> + </li> +</ul> + +<h2 id="ブラウザの対応状況">ブラウザの対応状況</h2> + +<p>{{Compat("webextensions.api.devtools.inspectedWindow.eval")}}</p> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<h2 id="例">例</h2> + +<p>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.</p> + +<pre class="brush: js">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); +});</pre> + +<h3 id="Helper_examples">Helper examples</h3> + +<p>This uses the <code>$0</code> helper to set the background color of the element that's currently selected in the Inspector:</p> + +<pre class="brush: js">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); +}); +</pre> + +<p>This uses the <code>inspect()</code> helper to select the first <h1> element in the page:</p> + +<pre class="brush: js">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); +}); +</pre> + +<p>{{WebExtExamples}}</p> + +<div class="note"><strong>Acknowledgements</strong> + +<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/devtools"><code>chrome.devtools</code></a> API.</p> + +<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p> +</div> + +<div class="hidden"> +<pre>// Copyright 2015 The Chromium Authors. All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are +// met: +// +// * Redistributions of source code must retain the above copyright +// notice, this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above +// copyright notice, this list of conditions and the following disclaimer +// in the documentation and/or other materials provided with the +// distribution. +// * Neither the name of Google Inc. nor the names of its +// contributors may be used to endorse or promote products derived from +// this software without specific prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +</pre> +</div> 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 +--- +<div>{{AddonSidebar}}</div> + +<div class="note"> +<p>このページは Firefox 54 に存在する WebExtensions devtools APIs を記述しています。このAPI は <a class="external external-icon" href="https://developer.chrome.com/extensions/devtools" rel="noopener">Chrome devtools APIs</a> に基づいていますが、Firefoxでは実装されていない多くの機能があり、よってここに文書化されていません。現在欠けている機能を見るには、 <a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Using_the_devtools_APIs#Limitations_of_the_devtools_APIs">Limitations of the devtools APIs</a> を見てください。</p> +</div> + +<p><code>devtools.inspectedWindow</code> API によって開発ツール拡張機能では開発ツールが割当てられたウィンドウと相互作用できます。</p> + +<p>すべての <code>devtools</code> API と同様に、この API はmanifest.json <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/devtools_page">devtools_page</a> キー内に定義されたドキュメントや、拡張機能が作成するその他の開発ツールドキュメント(例えば拡張機能が作ったパネル自身のドキュメント)の中だけでコードを利用できます。詳細は <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">developer tools の拡張</a> を見てください。</p> + +<h2 id="Properties" name="Properties">プロパティ</h2> + +<dl> + <dt><code><a href="/ja/Add-ons/WebExtensions/API/devtools.inspectedWindow/tabId">devtools.inspectedWindow.tabId</a></code></dt> + <dd>開発ツールが付属しているウィンドウの ID</dd> +</dl> + +<h2 id="Functions" name="Functions">Functions</h2> + +<dl> + <dt><code><a href="/ja/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval">devtools.inspectedWindow.eval()</a></code></dt> + <dd>ターゲットウィンドウ内の JavaScript を評価する</dd> + <dt><code><a href="/ja/Add-ons/WebExtensions/API/devtools.inspectedWindow/reload">devtools.inspectedWindow.reload()</a></code></dt> + <dd>ターゲットウィンドウのドキュメントを再読み込みする</dd> +</dl> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> + +<p>{{Compat("webextensions.api.devtools.inspectedWindow")}}{{WebExtExamples("h2")}}</p> + +<div class="note"><strong>謝辞</strong> + +<p>この API は Chromium の <a href="https://developer.chrome.com/extensions/devtools_inspectedWindow"><code>chrome.devtools.inspectedWindow</code></a> API に基づいています。また、このドキュメントは bookmarks.json における Chromium のコードに基づいています。</p> + +<p>Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。</p> +</div> + +<div class="hidden"> +<pre>// Copyright 2015 The Chromium Authors. All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are +// met: +// +// * Redistributions of source code must retain the above copyright +// notice, this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above +// copyright notice, this list of conditions and the following disclaimer +// in the documentation and/or other materials provided with the +// distribution. +// * Neither the name of Google Inc. nor the names of its +// contributors may be used to endorse or promote products derived from +// this software without specific prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +</pre> +</div> 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 +--- +<div>{{AddonSidebar()}}</div> + +<p>devtools のこのインスタンスがアタッチされる {{WebExtAPIRef("tabs.Tab", "tab")}} の ID。番号で表されます。</p> + +<p>これは拡張機能のバックグラウンドページに送信できるため、バックグラウンドページは {{WebExtAPIRef("tabs")}} API を使用してタブと対話できます:</p> + +<pre class="brush: js">// 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 + }); +});</pre> + +<pre class="brush: js">// background.js + +function handleMessage(request, sender, sendResponse) { + browser.tabs.executeScript(request.tabId, { + code: request.script + }); +} + +browser.runtime.onMessage.addListener(handleMessage);</pre> + +<h2 id="ブラウザの対応状況">ブラウザの対応状況</h2> + +<p>{{Compat("webextensions.api.devtools.inspectedWindow.tabId")}}</p> + +<p class="hidden">このページの互換性テーブルは構造化データから生成されます。データに貢献したい場合は、<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックして、プルリクエストを送信してください。</p> + +<p>{{WebExtExamples}}</p> + +<div class="note"><strong>謝辞</strong> + +<p>この API は Chromium の <a href="https://developer.chrome.com/extensions/devtools"><code>chrome.devtools</code></a> API に基づいています。</p> + +<p>Microsoft Edge の互換性データは Microsoft Corporation によって提供され、Creative Commons Attribution 3.0 United States License に含まれています。</p> +</div> + +<div class="hidden"> +<pre>// Copyright 2015 The Chromium Authors. All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are +// met: +// +// * Redistributions of source code must retain the above copyright +// notice, this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above +// copyright notice, this list of conditions and the following disclaimer +// in the documentation and/or other materials provided with the +// distribution. +// * Neither the name of Google Inc. nor the names of its +// contributors may be used to endorse or promote products derived from +// this software without specific prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +</pre> +</div> 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 +--- +<div>{{AddonSidebar}}</div> + +<div class="note"> +<p>このページは Firefox 54 に存在する WebExtensions devtools APIs を記述しています。このAPI は <a class="external external-icon" href="https://developer.chrome.com/extensions/devtools" rel="noopener">Chrome devtools APIs</a> に基づいていますが、Firefoxでは実装されていない多くの機能があり、よってここに文書化されていません。現在欠けている機能を見るには、 <a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Using_the_devtools_APIs#Limitations_of_the_devtools_APIs">Limitations of the devtools APIs</a> を見てください。</p> +</div> + +<p><code>devtools.network</code> API によって開発ツール拡張機能では開発ツールが付属しているウィンドウ(インスペクト対象ウィンドウ)に関連するネットワークリクエストの情報を取得できます。</p> + +<p>すべての <code>devtools</code> API と同様に、この API はmanifest.json <a class="new" href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/devtools_page" rel="nofollow">devtools_page</a> キー内に定義されたドキュメントや、拡張機能が作成するその他の開発ツールドキュメント(例えば拡張機能が作ったパネル自身のドキュメント)の中だけでコードを利用できます。これ以上は <a class="new" href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools" rel="nofollow">開発ツールを拡張する</a>を見てください。</p> + +<h2 id="Events" name="Events">Events</h2> + +<dl> + <dt><code><a href="/ja/Add-ons/WebExtensions/API/devtools.network/onNavigated">devtools.network.onNavigated</a></code></dt> + <dd>ユーザーが新規ページのインスペクト対象ウィンドウに移動した時に発火します</dd> +</dl> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> + +<p>{{Compat("webextensions.api.devtools.network")}}</p> + +<p>{{WebExtExamples("h2")}}</p> + +<div class="note"><strong>謝辞</strong> + +<p>この API は Chromium の <a href="https://developer.chrome.com/extensions/devtools_network"><code>chrome.devtools.network</code></a> API に基づいています。また、このドキュメントは bookmarks.json における Chromium のコードに基づいています。</p> + +<p>Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。</p> + +<p> </p> +</div> + +<div class="hidden"> +<pre>// Copyright 2015 The Chromium Authors. All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are +// met: +// +// * Redistributions of source code must retain the above copyright +// notice, this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above +// copyright notice, this list of conditions and the following disclaimer +// in the documentation and/or other materials provided with the +// distribution. +// * Neither the name of Google Inc. nor the names of its +// contributors may be used to endorse or promote products derived from +// this software without specific prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +</pre> +</div> 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 +--- +<div>{{AddonSidebar}}</div> + +<div class="note"> +<p>このAPI は <a href="https://developer.chrome.com/extensions/devtools">Chrome devtools APIs</a> に基づいていますが、Firefoxでは実装されていない多くの機能があり、よってここに文書化されていません。現在欠けている機能を見るには、 <a href="/ja/Add-ons/WebExtensions/Using_the_devtools_APIs#Limitations_of_the_devtools_APIs">Limitations of the devtools APIs</a> を見てください。</p> +</div> + +<p><code>devtools.panels</code> API によって開発ツール拡張機能では開発ツールウィンドウ内のユーザーインターフェイスの定義ができます。</p> + +<p>開発ツールウィンドウにはいくつもの個別のツールがあります - JavaScript デバッガー、ネットワークモニター、などが。最上位のタブの行でユーザーは色々なツールを切り替えられます。ツールのUIをホストするこのウィンドウは「パネル」と呼ばれます。</p> + +<p><code>devtools.panels</code> API にて開発ツールウィンドウ内の新規パネルを作成できます。</p> + +<p>すべての <code>devtools</code> API と同様に、この API はmanifest.json <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/devtools_page">devtools_page</a> キー内に定義されたドキュメントや、拡張機能が作成するその他の開発ツールドキュメント(例えばパネル自身のドキュメント)の中だけでコードを利用できます。これ以上は <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">開発ツールを拡張する</a>を見てください。</p> + +<h2 id="Types" name="Types">型</h2> + +<dl> + <dt><code><a href="/ja/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel">devtools.panels.ElementsPanel</a></code></dt> + <dd>ブラウザーの開発ツールの HTML/CSS インスペクターを表す</dd> + <dt><code><a href="/ja/Add-ons/WebExtensions/API/devtools.panels/ExtensionPanel">devtools.panels.ExtensionPanel</a></code></dt> + <dd>拡張機能によって作られた開発ツールパネルを表す</dd> + <dt><code><a href="/ja/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane">devtools.panels.ExtensionSidebarPane</a></code></dt> + <dd>ブラウザーの開発ツールの HTML/CSS インスペクターに、拡張機能が追加したペインを表す</dd> +</dl> + +<h2 id="Properties" name="Properties">プロパティ</h2> + +<dl> + <dt><code><a href="/ja/Add-ons/WebExtensions/API/devtools.panels/elements">devtools.panels.elements</a></code></dt> + <dd><code><a href="/ja/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel">ElementsPanel</a></code> オブジェクトの参照</dd> + <dt><code><a href="/ja/Add-ons/WebExtensions/API/devtools.panels/themeName">devtools.panels.themeName</a></code></dt> + <dd>現在の開発ツールテーマの名前</dd> +</dl> + +<h2 id="Functions" name="Functions">関数</h2> + +<dl> + <dt><code><a href="/ja/Add-ons/WebExtensions/API/devtools.panels/create">devtools.panels.create()</a></code></dt> + <dd>開発ツールを作成する</dd> +</dl> + +<h2 id="Events" name="Events">イベント</h2> + +<dl> + <dt><code><a href="/ja/Add-ons/WebExtensions/API/devtools.panels/onThemeChanged">devtools.panels.onThemeChanged</a></code></dt> + <dd>開発ツールテーマが変更された時に発火する</dd> +</dl> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> + +<p>{{Compat("webextensions.api.devtools.panels", 2)}}</p> + +<p>{{WebExtExamples("h2")}}</p> + +<div class="note"><strong>謝辞</strong> + +<p>この API は Chromium の <a href="https://developer.chrome.com/extensions/devtools_panels"><code>chrome.devtools.panels</code></a> API に基づいています。</p> + +<p>Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。</p> + +<p> </p> +</div> + +<div class="hidden"> +<pre>// Copyright 2015 The Chromium Authors. All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are +// met: +// +// * Redistributions of source code must retain the above copyright +// notice, this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above +// copyright notice, this list of conditions and the following disclaimer +// in the documentation and/or other materials provided with the +// distribution. +// * Neither the name of Google Inc. nor the names of its +// contributors may be used to endorse or promote products derived from +// this software without specific prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +</pre> +</div> |