diff options
Diffstat (limited to 'files/tr/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html')
| -rw-r--r-- | files/tr/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html | 168 |
1 files changed, 0 insertions, 168 deletions
diff --git a/files/tr/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html b/files/tr/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html deleted file mode 100644 index 3f4af92620..0000000000 --- a/files/tr/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html +++ /dev/null @@ -1,168 +0,0 @@ ---- -title: Extending the developer tools -slug: Mozilla/Add-ons/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 -original_slug: Mozilla/Eklentiler/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> |