files/zh-tw/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

---
title: 開發工具面板
slug: Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels
tags:
  - 初學者
  - 擴充套件
  - 教學
  - 用戶介面
translation_of: Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels
---
<div>{{AddonSidebar}}</div>

<div class="note">
<p>Firefox 54 以後可以使用這個功能。</p>
</div>

<p>當套件提供開發者使用的工具時，可以以一個瀏覽器開發工具的新面板的形式在開發者工具裡添加一個UI。</p>

<p><img alt='Simple example showing the addition of "My panel" to the Developer Tools tabs.' src="https://mdn.mozillademos.org/files/15746/developer_panel_tab.png" style="display: block; height: 112px; margin-left: auto; margin-right: auto; width: 350px;"></p>

<h2 id="指定開發工具面板">指定開發工具面板</h2>

<p>開發工具面板可以透過 <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.panels">devtools.panels</a></code> API 添加，因此這必須在特別的開發工具頁面執行。</p>

<p>透過在套件的 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> 添加 <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/devtools_page">devtools_page</a></code> 鍵並提供HTML檔案來添加開發工具頁面：</p>

<pre class="brush: json line-numbers  language-json"><code class="language-json"><span class="key token">"devtools_page":</span> <span class="string token">"devtools-page.html"</span></code></pre>

<p>在開發工具頁面，呼叫腳本會添加開發工具面板：</p>

<pre class="brush: html">&lt;body&gt;
  &lt;script src="devtools.js"&gt;&lt;/script&gt;
&lt;/body&gt;</pre>

<p>在腳本裡，藉由指定面板標題、圖示、HTML檔案來建立開發工具：</p>

<pre class="brush: js">function handleShown() {
  console.log("panel is being shown");
}

function handleHidden() {
  console.log("panel is being hidden");
}

browser.devtools.panels.create(
  "My Panel",           // title
  "icons/star.png",           // icon
  "devtools/panel/panel.html"          // content
).then((newPanel) =&gt; {
  newPanel.onShown.addListener(handleShown);
  newPanel.onHidden.addListener(handleHidden);
});</pre>

<p>套件現在可以在檢測器視窗透過 <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval"><code>devtools</code>.inspectedWindow.eval()</a></code> 或透過後端腳本傳送訊息來插入內容腳本兩種方式執行。你可以在<a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">擴充開發者工具</a>找到更多相關訊息。</p>

<h2 id="開發面板設計">開發面板設計</h2>

<p>更多關於如何設計符合 Firefox 風格的開發者面板，請查看文件<a class="grey-90 no-underline hover-no-underline" href="https://design.firefox.com/photon/index.html">光子設計系統</a>。</p>

<h2 id="圖示">圖示</h2>

<p>更多關於建立開發者工具面板圖示的細節，請查看文件<a class="grey-90 no-underline hover-no-underline" href="https://design.firefox.com/photon/index.html">光子設計系統</a>的<a href="https://design.firefox.com/photon/visuals/iconography.html">圖示學</a>。</p>

<h2 id="範例">範例</h2>

<p>GitHub上的 <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> 程式庫包含了建立開發工具面板的 <a href="https://github.com/mdn/webextensions-examples/blob/master/devtools-panels/">devtools-panels</a> 範例。</p>