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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
|
---
title: Extending the developer tools
slug: Mozilla/Eklentiler/WebExtensions/Extending_the_developer_tools
tags:
- DevTools
- Eklenti
- Kılavuz
- Türkçe Web App DevOp
- Uzantıları
- WebExtensions
- İhtiyaçları Ayrıcalıkları
translation_of: Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools
---
<div><font><font>{{AddonSidebar}}</font></font></div>
<div class="note">
<p><font><font>API'leri dayanmasına rağmen onlar Firefox 55. bulunmayan bu sayfa devtools API'leri açıklamaktadır </font></font><a href="https://developer.chrome.com/extensions/devtools"><font><font>Krom devtools API'ler</font></font></a><font><font> , henüz Firefox'ta uygulanmadı ve bu nedenle burada belgelere alınmamıştır hala pek çok özellik vardır. </font><font>Özellikleri şu anda bakın eksik olduğunu görmek için </font></font><a href="/en-US/Add-ons/WebExtensions/Using_the_devtools_APIs#Limitations_of_the_devtools_APIs"><font><font>devtools API'larından Sınırlamaları</font></font></a><font><font> .</font></font></p>
</div>
<p><span class="seoSummary"><font><font>Sen tarayıcının yerleşik geliştirici araçlarını genişletmek için WebExtensions API'leri kullanabilirsiniz. </font></font></span><font><font>Bir devtools uzantısı oluşturmak için, "include </font></font><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/devtools_page"><font><font>devtools_page</font></font></a><font><font> içinde" tuşuna </font></font><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json"><font><font>manifest.json</font></font></a><font><font> :</font></font></p>
<pre class="brush: json"><font><font>"Devtools_page": "devtools / devtools-sayfa.html"</font></font></pre>
<p><font><font>Bu anahtarın değeri sizin uzantısı ile birlikte olmuş bir HTML dosyasına işaret eden bir URL'dir. </font><font>URL Manifest.json dosyasının kendisini göreli olmalıdır.</font></font></p>
<p><font><font>HTML dosyası devtools sayfası olarak adlandırılır, uzantısında özel bir sayfa tanımlar.</font></font></p>
<h2 id="devtools_sayfa"><font><font>devtools sayfa</font></font></h2>
<p><font><font>devtools sayfa tarayıcı devtools açıldığında yüklenen ve kapatıldığında kaldırılır. </font><font>dolayısıyla birden fazla devtools sayfa - - devtools pencere tek bir sekme ile ilişkili olduğu için, birden fazla devtools pencere için oldukça mümkün olduğunu Not aynı anda var olması.</font></font></p>
<p><font><font>Devtools sayfa görünür bir DOM yok, ama kullanan JavaScript kaynaklarını içerebilir </font></font><code><a href="/en-US/docs/Web/HTML/Element/script"><script></a></code><font><font>etiketleri. </font><font>Kaynaklar uzantısı kendisi ile birlikte alınmalıdır. </font><font>Kaynaklar erişebilirsiniz:</font></font></p>
<ul>
<li><font><font>Normal DOM küresel üzerinden erişilebilir Apı </font></font><code><a href="/en-US/docs/Web/API/Window">window</a></code><font><font>nesne</font></font></li>
<li><font><font>Aynı </font></font><a href="/en-US/Add-ons/WebExtensions/Content_scripts#WebExtension_APIs"><font><font>İçerik Scriptlerde olarak WebExtension API'ler</font></font></a></li>
<li><font><font>devtools API'ler:</font></font>
<ul>
<li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow">devtools.inspectedWindow</a></code></li>
<li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.network">devtools.network</a></code></li>
<li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.panels">devtools.panels</a></code></li>
</ul>
</li>
</ul>
<p><font><font>Not devtools sayfasının başka WebExtension API'leri erişmek etmediğini ve arka plan sayfası devtools API'ler erişim elde etmez. </font><font>Bunun yerine, devtools sayfa ve arka plan sayfasını kullanarak iletişim kurmalıdır </font></font><code>runtime</code><font><font>mesajlaşma API'leri. </font><font>İşte bir örnek:</font></font></p>
<pre class="brush: html"><font><font><! DOCTYPE html></font></font><font><font>
<Html></font></font><font><font>
<Head></font></font><font><font>
<Meta karakter seti = "UTF-8"></font></font><font><font>
</ Head></font></font><font><font>
<Body></font></font><font><font>
</ Script> <script src = "devtools.js"></font></font><font><font>
</ Body></font></font><font><font>
</ Html></font></font></pre>
<p><font><font>devtools.js dosyası dev araçları uzantıları yaratarak gerçek kod düzenleyecek.</font></font></p>
<h2 id="paneller_oluşturma"><font><font>paneller oluşturma</font></font></h2>
<p><font><font>devtools pencere barındıran ayrı bir dizi araç - JavaScript Debugger, Ağ İzleyicisi, vb. </font><font>üst kısmında sekmeler Bir sıra farklı araçlar arasındaki kullanıcı anahtarı sağlar. </font><font>Her aracın kullanıcı arayüzü barındırmak penceresi "paneli" olarak adlandırılır.</font></font></p>
<p><font><font>Kullanımı </font></font><code>devtools.panels.create()</code><font><font>API, sen devtools penceresinde kendi paneli oluşturabilir:</font></font></p>
<pre class="brush: js"><font><font>browser.devtools.panels.create (</font></font><font><font>
"Benim Paneli", // başlık</font></font><font><font>
"Simgeleri / star.png", // simgesi</font></font><font><font>
"Devtools / paneli / panel.html" // içerik</font></font><font><font>
) .Ve ((newPanel) => {</font></font><font><font>
newPanel.onShown.addListener (initialisePanel);</font></font><font><font>
newPanel.onHidden.addListener (unInitialisePanel);</font></font>
});</pre>
<p><font><font>Panelin başlığı, simge ve içerik: Bu üç zorunlu argüman alır. </font><font>Bir döner </font></font><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code><font><font>bir çözer ki </font></font><code>devtools.panels.ExtensionPanel</code><font><font>yeni bir panel ifade eden nesne.</font></font></p>
<h2 id="Hedef_pencere_ile_etkileşimde"><font><font>Hedef pencere ile etkileşimde</font></font></h2>
<p><font><font>Geliştirici araçları her zaman belirli bir tarayıcı sekmesine eklenir. </font><font>Bu geliştirici araçları için "hedef" veya "teftiş pencere" olarak adlandırılır. </font><font>Sen kullanarak denetlenmiş pencere ile etkileşime girebilir </font></font><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow">devtools.inspectedWindow</a></code><font><font>API.</font></font></p>
<h3 id="Hedef_penceresinde_kod_çalıştırma"><font><font>Hedef penceresinde kod çalıştırma</font></font></h3>
<p><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval">devtools.inspectedWindow.eval()</a></code><font><font>Teftiş pencerede kod çalıştırmasına bir yol sağlar.</font></font></p>
<p><font><font>Bu biraz kullanmak gibidir {{WebExtAPIRef ( "tabs.executeScript ()")}} bir içerik komut enjekte ancak bunlarla önemli bir farkla:</font></font></p>
<ul>
<li><font><font>içerik komut aksine, komut dosyaları kullanılarak yüklenen </font></font><code>devtools.inspectedWindow.eval()</code><strong><font><font>yok</font></font></strong><font><font> olsun </font></font><a href="/en-US/Add-ons/WebExtensions/Content_scripts#DOM_access"><font><font>bir "DOM temiz görünümü"</font></font></a><font><font> olduğunu, bunlar sayfa komut dosyaları tarafından yapılan sayfaya değişiklikleri görebilirsiniz.</font></font></li>
</ul>
<div class="note">
<p><font><font>DOM temiz bir görünüm yardım amaçlanan, bir güvenlik özelliğidir geldiğini hatırlatırız yerli DOM işlevleri davranışını yeniden tanımlanarak uzantıları kandırma gelen düşman sayfaları engeller. </font><font>Bu araçlar siz) eval (kullanarak çok dikkatli olmak gerekiyor ve eğer yapabilirsen normal içerik komut dosyası kullanmalısınız.</font></font></p>
</div>
<p><font><font>Komut dosyaları kullanılarak yüklenen </font></font><code>devtools.inspectedWindow.eval()</code><font><font>içerik komut ile tanımlanan herhangi JavaScript değişkenleri görmüyorum de.</font></font></p>
<h3 id="içerik_komut_ile_çalışma"><font><font>içerik komut ile çalışma</font></font></h3>
<p><font><font>Bir devtools belge doğrudan erişimi yok {{WebExtAPIRef ( "tabs.executeScript ()")}} Bir içerik komut dosyası enjekte etmek gerekirse, bu nedenle, devtools belge arka plan komut bir mesaj göndermesi gerekir inject bunu soran senaryo. </font></font><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/tabId">devtools.inspectedWindow.tabId</a></code><font><font>Hedef sekmesinin kimliğini sağlar: devtools belge arka plan komut dosyasına bu geçebilir ve arka plan komut sırayla içine geçebilir {{WebExtAPIRef ( "tabs.executeScript ()")}}:</font></font></p>
<pre class="brush: js"><font><font>// devtools-panel.js</font></font>
<font><font>
const scriptToAttach = "document.body.innerHTML = 'DevTools'un Hi';";</font></font>
<font><font>
window.addEventListener () ( "click" => {</font></font><font><font>
browser.runtime.sendMessage ({</font></font><font><font>
Tabla: browser.devtools.inspectedWindow.tabId,</font></font><font><font>
komut: scriptToAttach</font></font>
});
});</pre>
<pre class="brush: js"><font><font>// background.js</font></font>
<font><font>
işlev handleMessage (istek, gönderen, sendResponse) {</font></font><font><font>
browser.tabs.executeScript (request.tabId {</font></font><font><font>
kod: request.script</font></font>
});
}
<font><font>
browser.runtime.onMessage.addListener (handleMessage);</font></font></pre>
<p><font><font>Hedef penceresinde çalışan içerik komut ve devtools belgeye arasındaki değişim mesajlarına gerekiyorsa, {{WebExtAPIRef ( "runtime.connect ()")}} ve {{WebExtAPIRef ( "runtime.onConnect kullanmak iyi bir fikirdir ")}} arkaplan sayfası ile devtools belgeye arasında bağlantı kurmak için. </font><font>arka plan sayfası ardından sekme kimlikleri ve {{WebExtAPIRef ( "runtime.Port")}} nesneler arasında bir eşleme korumak ve iki kapsamları arasındaki iletileri yönlendirmek için kullanabilir.</font></font></p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14923/devtools-content-scripts.png" style="display: block; height: 416px; margin-left: auto; margin-right: auto; width: 600px;"></p>
<h2 id="devtools_APIler_sınırlamaları"><font><font>devtools API'ler sınırlamaları</font></font></h2>
<p><font><font>Chrome dayanmaktadır Bu API'ler API'leri DevTools'un, ancak birçok özellik hala Chrome ile karşılaştırıldığında, eksik. </font><font>Bu bölümde yine devtools API'leri etkin geliştirme aşamasındadır ve gelecekteki yayınlara çoğu desteği eklemek beklediklerini Firefox 54. Not itibariyle uygulanmadı özellikleri.</font></font></p>
<h3 id="devtools.inspectedWindow"><font><font><font><font>devtools.inspectedWindow</font></font></font></font></h3>
<p><font><font>Aşağıdaki desteklenmez:</font></font></p>
<ul>
<li><code>inspectedWindow.getResources()</code></li>
<li><code>inspectedWindow.onResourceAdded</code></li>
<li><code>inspectedWindow.onResourceContentCommitted</code></li>
</ul>
<p><font><font>Seçeneklerden hiçbiri için </font></font><code>inspectedWindow.eval()</code><font><font>desteklenir.</font></font></p>
<p><font><font>Komut dosyaları kullanılarak enjekte </font></font><code>inspectedWindow.eval()</code><font><font>tüm Konsolunun komut satırı yardımcı işlevlerini kullanamazsınız, ancak </font></font><code>$0</code><font><font>ve </font></font><code>inspect(...)</code><font><font>her ikisi (Firefox 55 başlayarak) desteklenir.</font></font></p>
<h3 id="devtools.panels"><font><font><font><font>devtools.panels</font></font></font></font></h3>
<p><font><font><font><font>Aşağıdaki desteklenmez:</font></font></font></font></p>
<ul>
<li><code>panels.elements</code></li>
<li><code>panels.sources</code></li>
<li><code>panels.setOpenResourceHandler()</code></li>
<li><code>panels.openResource()</code></li>
<li><code>panels.ExtensionPanel.createStatusBarButton()</code></li>
<li><code>panels.Button</code></li>
<li><code>panels.ElementsPanel</code></li>
<li><code>panels.SourcesPanel</code></li>
</ul>
<h2 id="Örnekler"><font><font>Örnekler</font></font></h2>
<p><a href="https://github.com/mdn/webextensions-examples"><font><font>Webextensions-örnekler</font></font></a><font><font> GitHub'dan Repo, devtools panelleri kullanmak uzantıları bazı örnekler sunulmaktadır:</font></font></p>
<ul>
<li>
<p><a href="https://github.com/mdn/webextensions-examples/blob/master/devtools-panels/"><font><font>devtools paneller</font></font></a><font><font> devtools panelleri kullanımı:</font></font></p>
</li>
</ul>
|
