diff options
Diffstat (limited to 'files/tr/mozilla/eklentiler')
7 files changed, 1067 insertions, 0 deletions
diff --git a/files/tr/mozilla/eklentiler/index.html b/files/tr/mozilla/eklentiler/index.html new file mode 100644 index 0000000000..528c0ed7cf --- /dev/null +++ b/files/tr/mozilla/eklentiler/index.html @@ -0,0 +1,107 @@ +--- +title: Eklentiler +slug: Mozilla/Eklentiler +tags: + - Eklentiler + - Landing + - Mozilla + - uzantılar +translation_of: Mozilla/Add-ons +--- +<div class="summary">Mozilla uygulamalarını değiştirin ve genişletin.</div> + +<p><span class="seoSummary">Eklentiler<a href="/en-US/docs/Mozilla/Gecko">, Gecko</a>-tabanlı uygulamalara (Firefox,SeaMonkey ve Thunderbird gibi) yeni fonksiyonellikler eklerler. İki çeşit ana eklenti tipi vardır:</span> <a href="#Extensions">Uzantılar</a>, uygulamaya yeni özellikler eklerler, ve <a href="#Themes">Temalar</a> ise kullanıcı arayüzünü modifiye ederler.</p> + +<p>Her iki eklenti tipi için Mozilla, AMO diye bilinen, <a href="https://addons.mozilla.org/">addons.mozilla.org</a>'da bir dizinde çalışır. <a href="/en-US/Add-ons/Submitting_an_add-on_to_AMO">AMO'ya gönderdiğiniz eklentiler</a>, gözden geçirilir ve incelemeyi geçtikten sonra kullanıcılara uygun hale gelir. Eklentiler AMO'ya gönderilmek zorunda değildir, ama gönderilirse, kullanıcılar gözden geçirilmiş eklentilere güvenebilirler ve kullanışlı eklentiler için bir kaynak olan AMO görünürlüğünden faydalanabilirsiniz.</p> + +<p>Eklentiler, onları barındıran uygulamanın davranışını büyük ölçüden etkileyebilirler. Bu sebeple eklentilerin, kullanıcılara iyi bir deneyim sağlamasına yardım etmek için <a href="/en-US/docs/Mozilla/Add-ons/Add-on_guidelines">kuralları</a> geliştirdik.Bu kurallar, eklenti <a href="https://addons.mozilla.org/">addons.mozilla.org</a>'da barındırılsın ya da barındırlmasın, bütün eklentiler için geçerlidir.</p> + +<hr> +<h2 id="Uzantılar_2"><a id="Uzantılar" name="Uzantılar">Uzantılar</a></h2> + +<p>Uzantılar, Firefox ve Thunderbird gibi Mozilla uygulamarına yeni fonksiyonellikler eklerler. Sekmeleri yönetmek için farklı bir yol gibi yeni özellikler ekleyebilir veya belirli web sitelerinin kullanılabilirliğini ve güvenliğini atırmak için web içeriğini değiştirebilirler.</p> + +<p>Uzantıları yaratabileceğiniz üç farklı teknik vardır: Add-on SDK-tabanlı uzantılar, manüel olarak önyüklenmiş yeniden başlatma gerektirmeyen uzantılar, legacy uzantılar.</p> + +<ul class="card-grid"> + <li><span><a href="https://developer.mozilla.org/en-US/Add-ons/SDK">Add-on SDK uzantıları</a></span><br> + Yüksek seviyede bir dizi JavaScript API'leri kullanılarak inşa edilirler. Yüklenmeleri için tarayıcının yeniden başlatılmasına gerek yoktur.</li> + <li><span><a href="/en-US/Add-ons/Bootstrapped_extensions">Yeniden başlatma gerektirmeyen uzantılar</a></span><br> + Yüklenmeleri için tarayıcının yeniden başlatılmasına gerek olmayan uzantılardır.</li> + <li><a href="/en-US/Add-ons/Overlay_Extensions"><span>Legacy extensions</span></a><br> + Legacy uzantılar yüklenirken tarayıcının yeniden başlatılmasına ihtiyaç duyarlar, genelde <a href="/en-US/docs/Mozilla/Tech/XUL/Overlays">XUL overlays</a> kullanılır.</li> +</ul> + +<div class="note"> +<p><strong>WebExtensions</strong></p> + +<p>Biz, WebExtensions olarak adlandırılan ve Firefox için ve aynı zaman Google ve Opera tarafından kullanılanılan sistemlerle büyük ölçüde uyumlu olacak, eklenti geliştirmenin yeni bir yolu olan bir sistem üzerinde çalışıyoruz.</p> + +<p>Gelecekte, Firefox için tercih edilen bir uygulama geliştirme yolu olacaktır.</p> + +<p>Şu anda bu uygulama deneyseldir, ama yine de bir göz atmak isterseniz <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions">see the docs here</a> bağlantısından dökümanlara ulaşabilirsiniz.</p> +</div> + +<p>Eğer yapabiliyorsanız, yeniden başlatma gerektirmeyen mekanızmayı kullanan Add-on SDK-tabanlı tekniği kullanmak uygundur, eğer bu teknik sizin ihtiyacınız için yeterli değilse, manuel olanı, JavaScript API'leri kullanmayan ikinci yöntemi uygulayın.</p> + +<p>Teknik seçiminde daha fazla bilgi için, okuyun <a href="/en-US/Add-ons/Comparing_Extension_Toolchains">comparison</a>.</p> + +<h3 id="Hata_ayıklama">Hata ayıklama</h3> + +<p>Eklenti geliştirmede, hangi satırlarda hatalar yapıldığını görmek hata ayıklama olmadan mümkün değildir. Masaüstü için <a href="/en-US/Add-ons/Overlay_Extensions/XUL_School/Setting_Up_a_Development_Environment">Setting Up a Development Environment</a>, mobil için(Android/iOS) <a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">Debugging Firefox for Android with WebIDE</a> 'ya göz atın. Mobil cihazlarda meydana gelen hataları yakalamak için masaüstü tarayıcı araçlarından WebIDE kullanılır.</p> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Önerilen_Pratikler">Önerilen Pratikler</h3> + +<p>Uzantınızı hangi teknikle geliştirdiğinizin önemi olmamasına rağmen, mümkün olduğunca iyi bir kullanıcı deneyimi sağlaması için birkaç yönerge vardır.</p> + +<dl> + <dt><a href="/en-US/Add-ons/Performance_best_practices_in_extensions">Performans</a></dt> + <dd>Uzantınızın hızlı, duyarlı ve bellek-tasarruflu olmasını sağlamak için.</dd> + <dt><a href="/en-US/Add-ons/Security_best_practices_in_extensions">Güvenlik</a></dt> + <dd>Zararlı web sitelerinin uzantınızı etkisi altına almamasını sağlamak için.</dd> + <dt><a href="/en-US/Add-ons/Extension_etiquette">Etiquette</a></dt> + <dd>uzantınızın diğer uzantılar ile uyum içerisinde çalışması için.</dd> +</dl> +</div> + +<div class="column-half"> +<h3 id="Uygulama_Özel">Uygulama Özel</h3> + +<p>Çoğu dokümantasyon, masaüstü Firefox için geliştirme yapıyor olduğunuz varsayar. Eğer diğer bir Gecko tabanlı uygulama için geliştirme yapıyorsanız, bilmeniz gereken başlıca farklılıklar vardır.</p> + +<dl> + <dt><a href="/en-US/Add-ons/Thunderbird">Thunderbird</a></dt> + <dd>Thunderbird mail istemcisi için uzantılar geliştirmek için.</dd> + <dt><a href="/en-US/Add-ons/Firefox_for_Android">Firefox Android</a></dt> + <dd>Firefox Android için uzantılar geliştirmek için.</dd> + <dt><a href="/en-US/Add-ons/SeaMonkey_2">SeaMonkey</a></dt> + <dd><a href="http://www.seamonkey-project.org/">SeaMonkey</a> yazılım takımı için uzantılar geliştirmek için.</dd> +</dl> +</div> +</div> + +<hr> +<h2 id="Temalar"><a name="Themes">Temalar</a></h2> + +<p>Temalar, kullanıcı arayüzünü ihtiyaca göre düzenleyebileceğiniz eklentilerdir. İki çeşit tema vardır: <a href="/Add-ons/Themes/Background">Lightweight </a>temalar ve<a href="/en-US/docs/Themes"> complete </a>temalar.</p> + +<div class="column-container"> +<div class="column-half"> +<p><a href="/Add-ons/Themes/Background">Lightweight temalar</a>, diğerine göre uygulanması daha basittir, fakat sağladığı düzenleme alanı çok limitlidir.</p> +</div> + +<div class="column-half"> +<p><a href="/en-US/docs/Themes">Complete temalar</a> ile kullanıcı arayüzünde daha derin modifikasyonlar yapabilirsiniz. Complete temaların dökümantasyonu güncel değildir, ancak olası güncelleştirmeler aynı linke bağlıdır.</p> +</div> +</div> + +<hr> +<h2 id="Diğer_çeşit_eklentiler">Diğer çeşit eklentiler</h2> + +<p><a href="/en-US/docs/Creating_OpenSearch_plugins_for_Firefox">Search engine plugins</a> basit ve özel bir çeşit eklenti tipidir: arama alanına yeni bir arama motoru eklerler.</p> + +<p><strong><a href="/en-US/docs/Plugins">Plugins</a> </strong>help the application understand web content that it does not natively support. NPAPI plugins are a legacy technology and new sites should not use them. In general, plugins are not available on most modern mobile systems including, and websites should transition away from using plugins.</p> + +<div>{{AddonSidebar}}</div> diff --git a/files/tr/mozilla/eklentiler/webextensions/deneyiminize_web-ext_ile_başlayın/index.html b/files/tr/mozilla/eklentiler/webextensions/deneyiminize_web-ext_ile_başlayın/index.html new file mode 100644 index 0000000000..810b551b81 --- /dev/null +++ b/files/tr/mozilla/eklentiler/webextensions/deneyiminize_web-ext_ile_başlayın/index.html @@ -0,0 +1,335 @@ +--- +title: Deneyiminize web-ext ile başlayın +slug: Mozilla/Eklentiler/WebExtensions/Deneyiminize_web-ext_ile_başlayın +translation_of: Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext +--- +<div>{{AddonSidebar}}</div> + +<p class="summary">Web-ext bir komut satır aracı olmakla birlikte uygulamaların gelistirmesinde kısmen yardımcı olup bu süreci kolaylaştırmaktadır. Bu Makale web-ext'in yüklenmesi ve çalıştırılması hakkında bilgiler içermektedir.</p> + +<h2 id="Installation">Installation</h2> + +<p><code>web-ext</code> bir node.js bazlı (açık kaynaklı, işlem bazlı ve ölçeklenebilir) uygulama olup <a href="https://nodejs.org/">nodejs/npm</a> aracı ile yükleyebilirsiniz. Web-ext'in yüklenmesi için kullanılması gereken komut:</p> + +<pre class="brush: bash"><code>npm install --global web-ext</code></pre> + +<p><code>web-ext</code> requires the current <a href="https://github.com/nodejs/Release#release-schedule">LTS</a> (long-term support) version of <a href="https://nodejs.org/">NodeJS</a>.</p> + +<p>To test whether the installation worked run the following command, which displays the <code>web-ext</code> version number:</p> + +<pre class="brush: bash"><code>web-ext --version</code></pre> + +<h2 id="Using_web-ext">Using web-ext</h2> + +<p>Before you start using <code>web-ext</code> locate an example extension to use—if you don't have one, use one from the <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> repo.</p> + +<h3 id="Testing_out_an_extension">Testing out an extension</h3> + +<p>Test an extension in Firefox by <code>cd</code>'ing into your extension's root directory and entering:</p> + +<pre class="brush: bash"><code>web-ext run</code></pre> + +<p>This starts Firefox and loads the extension temporarily in the browser, just as you can on the <a href="/en-US/docs/Tools/about:debugging#Add-ons">about:debugging page</a>. Note that this <code>web-ext</code> method has the same <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox#Limitations">limitations regarding prompts for permissions and restart features</a> as about:debugging.</p> + +<p>See the <a href="/en-US/Add-ons/WebExtensions/web-ext_command_reference#web-ext_run">run reference guide</a> to learn more.</p> + +<h3 id="Automatic_extension_reloading">Automatic extension reloading</h3> + +<p>The <code>run</code> command watches your source files and tells Firefox to reload the extension after you edit and save a file. For example, if you changed the <code>name</code> property in your <code>manifest.json</code> file, Firefox displays the new name. This makes it easy to try out new features because you can see the effect immediately. The automatic reloading feature is active by default, you use it like this:</p> + +<pre class="brush: bash"><code>web-ext run</code></pre> + +<p>You can also press the <code>r</code> key in the <code>web-ext</code> terminal to trigger an extension reload.</p> + +<p>If you experience unexpected behavior with the reloading feature, please <a href="https://github.com/mozilla/web-ext/issues">file a bug</a>. You can also disable reloading like this:</p> + +<pre class="brush: bash"><code>web-ext run --no-reload</code></pre> + +<div class="note"> +<p>Extension reloading is only supported in Firefox 49 or higher.</p> +</div> + +<h3 id="Testing_in_different_versions_of_Firefox">Testing in different versions of Firefox</h3> + +<p>To run your extension in a version of <a href="https://www.mozilla.org/en-US/firefox/">Firefox Desktop</a> other than the default, use the <code>--firefox</code> option to specify a full path to the binary file. Here is an example for Mac OS:</p> + +<pre class="brush: bash">web-ext run --firefox=/Applications/FirefoxNightly.app/Contents/MacOS/firefox-bin</pre> + +<p>On Windows, the path needs to include <code>firefox.exe</code>, for example:</p> + +<pre class="brush: bash">web-ext run --firefox="C:\Program Files\Mozilla Firefox\firefox.exe"</pre> + +<p>See the <a href="/en-US/Add-ons/WebExtensions/web-ext_command_reference#web-ext_run">run command</a> reference to learn more.</p> + +<h3 id="Testing_in_Firefox_48">Testing in Firefox 48</h3> + +<p>Firefox 48 was the first stable version to use the WebExtension platform, but it doesn't allow <code>web-ext</code> to install an extension remotely. You need to run your extension in Firefox 48 using:</p> + +<pre class="brush: bash">web-ext run --pre-install</pre> + +<h3 id="Testing_in_Firefox_for_Android">Testing in Firefox for Android</h3> + +<p>To run your extension in <a href="https://www.mozilla.org/en-US/firefox/mobile/">Firefox for Android</a>, follow these instructions to <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Developing_WebExtensions_for_Firefox_for_Android#Set_up_your_computer_and_Android_emulator_or_device">set up your computer and device</a>.</p> + +<p>With your device connected to your development computer, run:</p> + +<pre class="brush: bash">web-ext run --target=firefox-android</pre> + +<p>This command displays the device ID for your connected Android device or devices. If you don't see a list of device IDs, make sure you set up the device for development correctly.</p> + +<p><span style="background-color: #ffffff;">N</span>ow, add the device ID to the command:</p> + +<pre class="brush: bash">web-ext run --target=firefox-android --android-device=<device ID></pre> + +<p>If you've multiple versions of Firefox installed, you may need to choose a specific version. For example:</p> + +<pre class="brush: bash">web-ext run --target=firefox-android ... --firefox-apk=org.mozilla.firefox</pre> + +<p>The first time you run this command, you may need to grant Android permissions for the APK. This is because the command needs read/write access to the device storage, so that Firefox for Android can run on a temporary profile. The <code>web-ext</code> output guides you in how to grant these permissions.</p> + +<p>The <code>web-ext</code> command does not alter any of your existing Firefox for Android preferences or data. To see more information about how <code>web-ext</code> is interacting with your device, run the command with <code>--verbose</code>.</p> + +<p>See the <a href="/en-US/Add-ons/WebExtensions/web-ext_command_reference#web-ext_run">run command</a> reference to learn more.</p> + +<h3 id="Debugging_in_Firefox_for_Android">Debugging in Firefox for Android</h3> + +<p>When using <code>web-ext run</code> to test an extension on Firefox for Android, you'll notice a message like this in the console output:</p> + +<pre>You can connect to this Android device on TCP port 51499 +</pre> + +<p>This is a remote debugger port that you can <a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android#Connecting">connect to with Firefox's developer tools</a>. In this case, you'd connect to host <code>localhost</code> on port <code>51499</code>.</p> + +<p>See <a href="/en-US/Add-ons/WebExtensions/Developing_WebExtensions_for_Firefox_for_Android#Debug_your_extension">this guide</a> for more information about debugging an extension on Firefox for Android.</p> + +<h3 id="Testing_unsigned_extensions">Testing unsigned extensions</h3> + +<p>When you execute <a href="/en-US/Add-ons/WebExtensions/web-ext_command_reference#web-ext_run">web-ext run</a>, the extension gets installed temporarily until you close Firefox. This does not violate any signing restrictions. If instead you create a zip file with <a href="/en-US/Add-ons/WebExtensions/web-ext_command_reference#web-ext_build">web-ext build</a> and try to install it into Firefox, you will see an error telling you that the add-on is not signed. You will need to use an <a href="https://wiki.mozilla.org/Addons/Extension_Signing#Unbranded_Builds">unbranded build</a> or use a <a href="https://www.mozilla.org/en-US/firefox/developer/">development build</a> to install unsigned extensions.</p> + +<h3 id="Using_a_custom_profile">Using a custom profile</h3> + +<p>By default, the <code>run</code> command will create a temporary Firefox profile. To run your extension with a specific profile use the <code>--firefox-profile</code> option, like this:</p> + +<pre class="brush: bash">web-ext run --firefox-profile=your-custom-profile</pre> + +<p>This option accepts a string containing the name of your profile or an absolute path to the profile directory. This is helpful if you want to manually configure some settings that will always be available to the <code>run</code> command.</p> + +<h3 id="Keeping_profile_changes">Keeping profile changes</h3> + +<p>The <code>run</code> command does not save any changes made to the custom profile specified by <code>--firefox-profile</code>. To keep changes, add this option:</p> + +<pre class="brush: bash">web-ext run --keep-profile-changes --firefox-profile=your-custom-profile</pre> + +<p>This may be helpful if your extension has many different run states.</p> + +<div class="warning"> +<p>This option makes the profile specified by <code>--firefox-profile</code> completely insecure for daily use. It turns off auto-updates and allows silent remote connections, among other things. Specifically, it will make destructive changes to the profile that are required for <code>web-ext</code> to operate.</p> +</div> + +<h3 id="Packaging_your_extension">Packaging your extension</h3> + +<p>Once you've tested your extension and verified that it's working, you can turn it into a package for submitting to <a href="https://addons.mozilla.org">addons.mozilla.org</a> using the following command:</p> + +<pre class="brush: bash"><code>web-ext build</code></pre> + +<p>This outputs a full path to the generated <code>.zip</code> file that can be loaded into a browser.</p> + +<div class="warning"> +<p>The generated <code>.zip</code> file doesn't work on Firefox without signing or adding <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/applications">applications</a>.gecko.id</code> key into <code><a href="/en-US/Add-ons/WebExtensions/manifest.json">manifest.json</a></code>. For more information, please refer <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID">WebExtensions and the Add-on ID</a> page.</p> +</div> + +<p><code>web-ext build</code> is designed to ignore files that are commonly not wanted in packages, such as <code>.git</code>, <code>node_modules</code>, and other artifacts.</p> + +<p>See the <a href="/en-US/Add-ons/WebExtensions/web-ext_command_reference#web-ext_build">build reference guide</a> to learn more.</p> + +<h3 id="Signing_your_extension_for_self-distribution">Signing your extension for self-distribution</h3> + +<p>As an alternative to publishing your extension on <a href="https://addons.mozilla.org/">addons.mozilla.org</a>, you can self-host your package file but it needs to be <a href="https://developer.mozilla.org/Add-ons/Distribution">signed by Mozilla</a> first. The following command packages and signs a ZIP file, then returns it as a signed XPI file for distribution:</p> + +<pre class="brush: bash"><code>web-ext sign --api-key=$AMO_JWT_ISSUER --api-secret=$AMO_JWT_SECRET </code></pre> + +<p>The API options are required to specify your <a href="https://addons.mozilla.org/en-US/developers/addon/api/key/">addons.mozilla.org credentials</a>.</p> + +<ul> + <li><code>--api-key</code>: the API key (JWT issuer) from <code>addons.mozilla.org</code> needed to sign the extension. This is a string that will look something like <code>user:12345:67</code>.</li> + <li><code>--api-secret</code>: the API secret (JWT secret) from <code>addons.mozilla.org</code> needed to sign the extension. This is a string that will look something like <code>634f34bee43611d2f3c0fd8c06220ac780cff681a578092001183ab62c04e009</code>.</li> +</ul> + +<div class="blockIndicator warning"> +<p>If you've <a href="/en-US/docs/Mozilla/Add-ons/Distribution/Submitting_an_add-on">listed</a> the extension on <a href="https://addons.mozilla.org">addons.mozilla.org</a>, see <a href="#Signing_a_test_version_of_a_listed_extension">Signing a test version of a listed extension</a>.</p> +</div> + +<p>See the <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/web-ext_command_reference#web-ext_sign">sign reference guide</a> to learn more.</p> + +<h3 id="Signing_extensions_without_an_explicit_ID">Signing extensions without an explicit ID</h3> + +<p><code>web-ext</code> supports signing extensions that do not declare the <a href="/en-US/Add-ons/WebExtensions/manifest.json/applications">applications.gecko.id</a> property in their manifest. The first time you sign an extension without an explicit ID, <a href="https://addons.mozilla.org/">addons.mozilla.org</a> will generate an ID and <code>web-ext</code> will save it to <code>.web-extension-id</code> in the working directory. You should save the ID file so that you can sign future versions of the same extension. If you lose the ID file, you will have to add back the <code>applications.gecko.id</code> property or use the <code>--id</code> option when signing, for example:</p> + +<pre class="brush: bash"><code>web-ext sign --api-key=... --api-secret=... --id="</code>{c23c69a7-f889-447c-9d6b-7694be8035bc}<code>"</code></pre> + +<h3 id="Signing_in_a_restricted_environment">Signing in a restricted environment</h3> + +<p>If you're working in an environment that restricts access to certain domains, you can try using a proxy when signing:</p> + +<pre class="brush: bash"><code>web-ext sign --api-key=... --api-secret=... --api-proxy=https://yourproxy:6000</code></pre> + +<p>See the <a href="/en-US/Add-ons/WebExtensions/web-ext_command_reference#--api-proxy">--api-proxy</a> option to learn more.</p> + +<p>The following domains are used for signing and downloading files:</p> + +<ul> + <li><code>addons.mozilla.org</code></li> + <li><code>addons.cdn.mozilla.net</code></li> +</ul> + +<h3 id="Signing_a_test_version_of_a_listed_extension">Signing a test version of a listed extension</h3> + +<p>If you've <a href="/en-US/docs/Mozilla/Add-ons/Distribution/Submitting_an_add-on">listed</a> an extension on <a href="https://addons.mozilla.org">addons.mozilla.org</a>, use <code>web-ext</code> to create a signed but <a href="/en-US/docs/Mozilla/Add-ons/Distribution/Submitting_an_add-on#Self-distribution">unlisted</a> version for testing purposes. For example, you may wish to distribute an alpha or beta version to users for early feedback and testing.</p> + +<p>First, change the version number in your <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> so that it is different from the latest listed version. Then, create the unlisted version by using the <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/web-ext_command_reference#web-ext_sign">--channel</a></code> option like this:</p> + +<pre class="brush: bash">web-ext sign --channel=unlisted --api-key=... --api-secret=...</pre> + +<p>This signs and downloads an XPI file that can be installed into Firefox.</p> + +<p>Once you've finished testing, <strong>to publish the extension you must define</strong> <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/web-ext_command_reference#web-ext_sign">--channel</a></code><strong> as listed</strong>, as the channel option defaults to the one used previously. So, after incrementing the version in your <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a>, run:</p> + +<pre class="brush: bash">web-ext sign --channel=listed --api-key=... --api-secret=...</pre> + +<p>This publishes and submits your extension for review as if you had uploaded it to <a href="https://addons.mozilla.org">addons.mozilla.org</a>.</p> + +<div class="warning"> +<p>Setting <code>--channel=listed</code> for a new version of a listed extension is not well supported. It uploads your new version to <a class="external external-icon" href="https://addons.mozilla.org" rel="noopener">addons.mozilla.org</a> as if you'd <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/Distribution/Submitting_an_add-on">submitted it manually</a>. However, the command will fail and you'll have to check <a href="https://addons.mozilla.org/developers/addons">addons.mozilla.org/developers/addons</a> for the correct status.</p> +</div> + +<p>See the <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/web-ext_command_reference#web-ext_sign">sign reference guide</a> to learn more.</p> + +<h3 id="Checking_for_code_lint">Checking for code "lint"</h3> + +<p>Before trying out your extension with the <a href="/en-US/Add-ons/WebExtensions/web-ext_command_reference#web-ext_run">run</a> command or submitting your package to <a href="https://addons.mozilla.org/en-US/firefox/">addons.mozilla.org</a>, use the <code>lint</code> command to make sure your <a href="/en-US/Add-ons/WebExtensions/manifest.json">manifest</a> and other source files do not contain any errors. You can also set <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings">strict_min_version</a> in your extension’s manifest file and lint will report on the permissions, manifest keys, and web extension APIs used that are not available in that version. Example:</p> + +<pre class="brush: bash">web-ext lint</pre> + +<p>This uses the <a href="https://github.com/mozilla/addons-linter">addons-linter</a> library to walk through your source code directory and report any errors, such as the declaration of an unknown permission.</p> + +<p>See the <a href="/en-US/Add-ons/WebExtensions/web-ext_command_reference#web-ext_lint">lint reference guide</a> to learn more.</p> + +<h3 id="Setting_option_defaults_in_a_configuration_file">Setting option defaults in a configuration file</h3> + +<p>You can specify <code>--config=my-config.js</code> to set default values for any option. Here is an example with the <code>build</code> command:</p> + +<pre class="brush: bash">web-ext --config=my-config.js build</pre> + +<p>The file should be a CommonJS module <a href="https://nodejs.org/docs/latest/api/modules.html#modules_modules">as understood by NodeJS</a> and must export each configuration value. Here is how you would set the default value of <a href="/en-US/Add-ons/WebExtensions/web-ext_command_reference#--verbose_-v">--verbose</a> to <code>true</code>:</p> + +<pre class="brush: javascript">module.exports = { + verbose: true, +};</pre> + +<p>If you want to specify options that only apply to a specific command, you nest the configuration under the command name. Here is an example of adding configuration for <a href="/en-US/Add-ons/WebExtensions/web-ext_command_reference#--overwrite-dest_-o">--overwrite-dest</a> that only applies to the <code>build</code> command as well as <a href="/en-US/Add-ons/WebExtensions/web-ext_command_reference#--firefox_-f">--firefox</a> that only applies to the <code>run</code> command:</p> + +<pre class="brush: javascript">module.exports = { + // Global options: + verbose: true, + // Command options: + build: { + overwriteDest: true, + }, + run: { + firefox: 'nightly', + }, +};</pre> + +<p>To create a configuration key for a command line option, you remove the preceding dashes and convert the name to camel case. As you can see from this example, <code>--overwrite-dest</code> was converted to <code>overwriteDest</code>.</p> + +<p>If an option can be specified multiple times on the command line then you define it as an array. For example, here is how to specify multiple <a href="/en-US/Add-ons/WebExtensions/web-ext_command_reference#--ignore-files_-i">--ignore-files</a> patterns:</p> + +<pre class="brush: javascript">module.exports = { + ignoreFiles: [ + 'package-lock.json', + 'yarn.lock', + ], +};</pre> + +<p><code>web-ext</code> will also try to load its configuration options from a <code>"webExt"</code> property included in the <code>package.json</code> file in the current directory:</p> + +<pre>{ + "name": "an-extension-src-dir-with-a-package-json", + "version": "1.0.0", + ... + "webExt": { + <span class="blob-code-inner blob-code-marker-addition"><span class="pl-s">"sourceDir": "dist/extension/"</span></span> + } +} +</pre> + +<h3 id="Automatic_discovery_of_configuration_files">Automatic discovery of configuration files</h3> + +<p><code>web-ext</code> will load existing configuration files in the following order:</p> + +<ul> + <li>A config file named <code>.web-ext-config.js</code> in your home directory, for example: + + <ul> + <li>On Windows: <code>C:\Users\<username>\.web-ext-config.js</code></li> + <li>On macOS: <code>/Users/<username>/.web-ext-config.js</code></li> + <li>On Linux: <code>/home/<username>/.web-ext-config.js</code></li> + </ul> + </li> + <li>A config property named <code>"webExt"</code> included in a <code>package.json</code> file in the current directory.</li> + <li>A config file named <code>web-ext-config.js</code> in the current directory.</li> +</ul> + +<p>If a home directory config and a local directory config define the same option, the value from the latter file will be used.</p> + +<p>To disable automatic loading of configuration files, set this option:</p> + +<pre class="brush: bash">web-ext --no-config-discovery run</pre> + +<p>To diagnose an issue related to config files, re-run your command with <code>--verbose</code>. This will tell you which config file affected which option value.</p> + +<h3 id="Specifying_different_source_and_destination_directories">Specifying different source and destination directories</h3> + +<p>The preceding commands use default directories for the extension source and artifact creation (for example, built <code>.zip</code> files). The defaults are:</p> + +<ul> + <li>Source: The directory you are in.</li> + <li>Artifacts: A directory called <code>./web-ext-artifacts</code>, created inside the current directory.</li> +</ul> + +<p>You can specify different source and destination directories using the <code>--source-dir</code> and <code>--artifacts-dir</code> options when running your commands. Their values can be relative or absolute paths, but must always be specified as strings. Here is an example of specifying both options when building an extension:</p> + +<pre class="brush: bash"><code>web-ext build --source-dir=webextension-examples/notify-link-clicks-i18n --artifacts-dir=zips</code></pre> + +<h3 id="Outputting_verbose_messages">Outputting verbose messages</h3> + +<p>To see in detail what web-ext is doing when you run a command, include the <code>--verbose</code> option. For example:</p> + +<pre class="brush: bash"><code>web-ext build --verbose</code></pre> + +<h3 id="Viewing_all_commands_and_options">Viewing all commands and options</h3> + +<p>You can list all commands and options like this:</p> + +<pre class="brush: bash"><code>web-ext --help</code></pre> + +<p>You can list options for a specific command by adding it as an argument:</p> + +<pre class="brush: bash"><code>web-ext --help run</code></pre> + +<h3 id="Detecting_temporary_installation">Detecting temporary installation</h3> + +<p>Your extension can detect whether it was installed using <code>web-ext run</code>, rather than as a built and signed extension downloaded from <code>addons.mozilla.org</code>. Listen for the {{WebExtAPIRef("runtime.onInstalled")}} event and check the value of <code>details.temporary</code>.</p> + +<h3 id="Using_web-ext_from_a_script">Using web-ext from a script</h3> + +<p>You can use <code>web-ext</code> as a <code>NodeJS</code> module. Here is <a href="https://github.com/mozilla/web-ext#using-web-ext-in-nodejs-code">more information</a>, with example code.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="external external-icon" href="https://github.com/mozilla/web-ext">web-ext repo</a></li> + <li> + <p><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/web-ext_command_reference">web-ext command reference</a></p> + </li> +</ul> diff --git a/files/tr/mozilla/eklentiler/webextensions/eklenti_nedir/index.html b/files/tr/mozilla/eklentiler/webextensions/eklenti_nedir/index.html new file mode 100644 index 0000000000..2b63208d65 --- /dev/null +++ b/files/tr/mozilla/eklentiler/webextensions/eklenti_nedir/index.html @@ -0,0 +1,68 @@ +--- +title: Eklenti nedir? +slug: Mozilla/Eklentiler/WebExtensions/Eklenti_nedir +tags: + - Eklentiler + - Web eklentileri +translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions +--- +<div>{{AddonSidebar}}</div> + +<p> </p> + +<p>Bir eklenti bir web tarayıcısına özellikler ve fonksiyonlar ekler. Eklenti, Html, Css ve Javascript gibi benzer web tabanlı teknolojilerle oluşturulur. Bir web sayfasındaki JavaScript ile aynı web API'larından yararlanabilir, ancak bir uzantının kendi JavaScript API kümesine de erişimi vardır. Bu sizin eklenti ile bir web sayfasında yapabileceğinizden daha fazla şeyi yapabileceğiniz anlamına gelir. İşte yapabileceğiniz şeylere birkaç örnek:</p> + +<p><strong>Bir web sitesini geliştirin veya tamamlayın</strong>: Web sitenizden ek tarayıcı içi özellikler veya bilgi sunmak için bir eklenti kullanın. Kullanıcıların, sunduğunuz hizmeti iyileştirmek için ziyaret ettikleri sayfalardan ayrıntıları toplamasına izin verin.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15808/Amazon_add_on.png"></p> + +<p>Örnekler: <a href="https://addons.mozilla.org/en-US/firefox/addon/amazon-browser-bar/">Amazon Assistant for Firefox</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/onenote-clipper/">OneNote Web Clipper</a>, and <a href="https://addons.mozilla.org/en-US/firefox/addon/grammarly-1/">Grammarly for Firefox</a></p> + +<p><strong>Kullanıcıların kişiselleştirmesine izin verin</strong>: Tarayıcı eklentisi web sayfalarındaki içeriği değiştirebilir. Örneğin kullanıcılar ziyaret ettiği bir sayfada sevdiği bir logoyu veya resmi arkaplan resmi olarak ekleyebilir. Eklentiler kullanıcılara Firefox UI arayüzünü güncelleştirmelerine izin verebilir. Aynı yolla <a href="https://developer.mozilla.org/en-US/Add-ons/Themes/Theme_concepts">bağımsız tema eklentileri</a> yapabilir.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15809/MyWeb_New_Tab_add_on.png" style="height: 398px; width: 540px;"></p> + +<p>Örnekler: <a href="https://addons.mozilla.org/en-US/firefox/addon/myweb-new-tab/">MyWeb New Tab</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/tabliss/">Tabliss</a>, ve <a href="https://addons.mozilla.org/en-US/firefox/addon/vivaldifox/">VivaldiFox</a></p> + +<p><strong>Web sayfasına içerik ekleyin veya silin</strong>: Kullanıcıların web sayfalarındaki rahatsız edici reklamları engellemelerine, bir web sayfasında bir ülke veya şehir söz konusu olduğunda bir seyahat rehberine erişim sağlamasına veya tutarlı bir okuma deneyimi sunmak için sayfa içeriğini yeniden biçimlendirmesine yardımcı olmak isteyebilirsiniz. Hem sayfanın hem HTML hem de CSS’ye erişme ve bunları güncelleme yeteneği sayesinde, eklentiler kullanıcıların web’i istedikleri gibi görmelerine yardımcı olabilir.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15807/ublock_origin_add_on.png" style="height: 480px; width: 640px;"></p> + +<p>Örnekler: <a href="https://addons.mozilla.org/en-US/firefox/addon/ublock-origin/">uBlock Origin</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/reader/">Reader</a>, ve <a href="https://addons.mozilla.org/en-US/firefox/addon/toolbox-google-play-store/">Toolbox for Google Play Store™</a></p> + +<p><strong>Araçlar ve yeni gözatma özellikleri ekleyin</strong>: Görev çubuğuna yeni özellikler ekleyin, ya da linklerden, sayfadaki yazıdan, resimlerden kare kod oluşturun. Esnek UI seçenekleri ve <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions">WebExtensions API</a>'lerinin gücü ile bir tarayıcıya kolayca yeni özellikler ekleyebilir ve herhangi bir web sitesinin özelliğini veya fonksiyonunu artırabilirsiniz. </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15806/QR_Code_Image_Generator_add_on.png"></p> + +<p>Örnekler: <a href="https://addons.mozilla.org/en-US/firefox/addon/qr-code-image-generator/">QR Code Image Generator</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/swimlanes-for-trello/">Swimlanes for Trello</a>, ve <a href="https://addons.mozilla.org/en-US/firefox/addon/tomato-clock/">Tomato Clock</a></p> + +<p><strong>Oyunlar</strong>: çevrimdışı özellikli oyun sunun ya da yeni oyun özelliklerini keşfedin; örneğin, by incorporating gameplay into everyday browsing.</p> + +<p> <img alt="" src="https://mdn.mozillademos.org/files/15805/Asteroids_in_Popup_add_on%20.png" style="height: 438px; width: 700px;"></p> + +<p>Örnekler: <a href="https://addons.mozilla.org/en-US/firefox/addon/asteroids-in-popup/">Asteroids in Popup</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/solitaire-card-game-new-tab/">Solitaire Card Game New Tab</a>, ve <a href="https://addons.mozilla.org/en-US/firefox/addon/2048-prime/">2048 Prime</a>.</p> + +<p><strong>Geliştirici araçları ekleyin</strong>: Web geliştirme araçlarını işiniz olarak sağlayabilir veya paylaşmak istediğiniz web geliştirmeye faydalı bir teknik veya yaklaşım geliştirebilirsiniz. Her iki durumda da, geliştirici araç çubuğuna yeni bir sekme ekleyerek yerleşik Firefox geliştirici araçlarını geliştirebilirsiniz.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15804/aXe_Developer_Tools_add_on.png" style="height: 261px; width: 700px;"></p> + +<p>Örnekler: <a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Web Developer</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/react-devtools/">Web React Developer Tools</a>, and <a href="https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/">aXe Developer Tools</a></p> + +<p> </p> + +<p>Firefox için eklentiler <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions">WebExtensions API</a>leri, geliştirici eklentileri çarpraz tarayıcı sistemi kullanılarak inşa edilir. API büyük ölçüde Google Chrome ve Opera tarafından desteklenen <a href="https://developer.chrome.com/extensions">extension API</a> ile uyumludur. Bu tarayıcılar için yazılan uzantılar, çoğu durumda yalnızca birkaç <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension">değişiklikle </a>Firefox veya Microsoft Edge'de çalışır. API <a href="https://developer.mozilla.org/en-US/Firefox/Multiprocess_Firefox">multiprocess Firefox</a> ile de tam uyumludur. </p> + +<p>Eğer sorunuz, fikriniz ya da eski bir apiyi yenisine uyumlu hale getirme ile ilgili yardıma ihtiyacınız varsa bize <a href="https://mail.mozilla.org/listinfo/dev-addons">dev-addons mailing list</a> ya da <a href="irc://irc.mozilla.org/extdev">#extdev</a> üzerinden ulaşabilirsiniz. <a href="https://wiki.mozilla.org/IRC">IRC</a>.</p> + +<p> </p> + +<h2 id="Sırada_ne_var">Sırada ne var?</h2> + +<ul> +</ul> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension">İlk eklentiniz</a> ile basit bir eklenti üzerinden geliştirme yapalım.</li> + <li>Bir eklentinin yapısını öğrenin. <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">Bir eklentinin anatomisi</a>.</li> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples">Örnek eklentiler</a> üzerinden eklentileri deneyin.</li> +</ul> diff --git a/files/tr/mozilla/eklentiler/webextensions/extending_the_developer_tools/index.html b/files/tr/mozilla/eklentiler/webextensions/extending_the_developer_tools/index.html new file mode 100644 index 0000000000..ee47f9114c --- /dev/null +++ b/files/tr/mozilla/eklentiler/webextensions/extending_the_developer_tools/index.html @@ -0,0 +1,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> diff --git a/files/tr/mozilla/eklentiler/webextensions/index.html b/files/tr/mozilla/eklentiler/webextensions/index.html new file mode 100644 index 0000000000..91c91735f2 --- /dev/null +++ b/files/tr/mozilla/eklentiler/webextensions/index.html @@ -0,0 +1,138 @@ +--- +title: Tarayıcı uzantıları +slug: Mozilla/Eklentiler/WebExtensions +tags: + - Eklentiler + - WebExtensions + - İniş +translation_of: Mozilla/Add-ons/WebExtensions +--- +<div><font><font>{{AddonSidebar}}</font></font></div> + +<p><span id="result_box" lang="tr"><span>Uzantılar, bir tarayıcının yeteneğini genişletebilir ve değiştirebilir.</span></span> <span id="result_box" lang="tr"><span>Firefox eklentileri, uzantıları geliştirmek için çapraz tarayıcı sistemi olan Web Eklenti API'leri kullanılarak oluşturulmuştur.</span></span> Google Chrome, Opera ve <a href="https://browserext.github.io/browserext/">W3C Taslak Topluluk Grubu </a>tarafından deteklenen <a class="external-icon external" href="https://developer.chrome.com/extensions">API uzantısı</a> büyük ölçekteki sistemlerle uyumludur. Bu tarayıcılar için yazılan uzantılar bir çok durumda Firefox'ta yada bir kaç değişiklikle <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/">Microsoft Edge</a> ile çalışacaktır. Bu API aynı zamanda <a href="https://developer.mozilla.org/en-US/Firefox/Multiprocess_Firefox">çoklu prosesli Firefox</a>'la tamamen uyumludur.</p> + +<p>Eğer fikir veya sorularınız varsa, yada eski add-on'nuzu Web eklenti API'lerini kullanarak uyarlamak için yardıma ihtiyaç duyarsanız, bize <a href="https://mail.mozilla.org/listinfo/dev-addons">dev-addons mail listesi </a>yada <a href="https://wiki.mozilla.org/IRC">IRC üzerinden </a> <a href="irc://irc.mozilla.org/webextensions">#webextensions</a> aracılığı ile ulaşabilirsiniz.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 id="Başlarken">Başlarken</h2> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/What_are_WebExtensions">Eklenti Nedir?</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Your_first_WebExtension">İlk Eklentiniz</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Your_second_WebExtension">İkinci Eklentiniz</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">Eklenti Analizi</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Examples">Eklenti Örnekleri</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/What_next_">Bir Sonraki Ne?</a></li> +</ul> + +<h2 id="Kavramlar"><span class="short_text" id="result_box" lang="tr"><span>Kavramlar</span></span></h2> + +<ul> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API"><font><font>JavaScript API'lerine Genel Bakış</font></font></a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">İçerik Script'leri</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Match_patterns">Şablon Eşleştirme</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Working_with_files">Dosyalarla Çalışma</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Internationalization">İçselleştirme</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Security_best_practices">En iyi güvenlik Uygulamaları</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">İçerik Güvenliği Politikası</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Native_messaging">Yerel Mesajlaşma</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Using_the_devtools_APIs">Geliştirme Araçları API'lerini Kullanma</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/User_experience_best_practices">En iyi Kullanıcı Deneyimi Uygulamaları</a></li> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Native_manifests">Yerel Bildirimler</a></li> +</ul> + +<h2 id="Kullanıcı_Arayüzü">Kullanıcı Arayüzü</h2> + +<ul> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface">Giriş</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_action">Tarayıcı Araç Çubuğu Düğmesi</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">Tarayıcı Araç Çubuğu Popup Düğmesi</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions">Adres Çubuğu Düğmesi</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">Adres Çubuğu Popup Düğmesi</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items">İçerik Menüsü Öğeleri</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">Kenar Çubukları</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages"><font><font>Ayar Sayfası</font></font></a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Bundled_web_pages"><font><font>Eklenti Sayfaları</font></font></a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Notifications"><font><font>Bildirimler</font></font></a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Omnibox"><font><font>Adres Çubuğu Önerileri</font></font></a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels"><font><font>Geliştirme Aracı Panelleri</font></font></a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles"><font><font>Tarayıcı Stilleri</font></font></a></li> +</ul> + +<h2 id="Nasıl_Yapılır"><font><font>Nasıl Yapılır</font></font></h2> + +<ul> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests"><font><font>HTTP İsteklerini Kesme</font></font></a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Modify_a_web_page"><font><font>Web Sayfasını Değiştirme</font></font></a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar"><font><font>Araç Çubuğuna Düğme Ekleme</font></font></a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page"><font><font>Ayarlar Sayfasını Uygulama</font></font></a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard"><font><font>Pano ile Etkileşim</font></font></a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Working_with_the_Tabs_API"><font><font>Sekme API'leri ile Çalışma</font></font></a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Work_with_the_Bookmarks_API"><font><font>Yerimi API'leri ile Çalışma</font></font></a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Work_with_the_Cookies_API"><font><font>Çerez API'leri ile Çalışma</font></font></a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Work_with_contextual_identities"><font><font>Bağlamsal Kimliklerle Çalışma</font></font></a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Safely_inserting_external_content_into_a_page"><font><font>Dış İçerik Ekleme</font></font></a></li> +</ul> + +<ul> +</ul> + +<h2 id="Uyarlama"><font><font>Uyarlama</font></font></h2> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/Porting_from_Google_Chrome"><font><font>Google Chrome Eklentisini Uyarlama</font></font></a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Porting_a_legacy_Firefox_add-on"><font><font>Eski Firefox Eklentisini Uyarlama</font></font></a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Developing_WebExtensions_for_Firefox_for_Android"><font><font>Android için Firefox Geliştirme</font></font></a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Embedded_WebExtensions"><font><font>Gömülü WEB Eklentileri</font></font></a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_the_Add-on_SDK"><font><font>Add-on SDK ile Karşılaştırma</font></font></a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_XUL_XPCOM_extensions"><font><font>XUL/XPCOM Eklentileri ile Karşılaştırma</font></font></a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities"><font><font>Chrome Uyumsuzlukları</font></font></a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Differences_between_desktop_and_Android"><font><font>Masaüstü ve Android arasındaki Farklılıklar</font></font></a></li> +</ul> + +<h2 id="Firefox_İşakışı"><font><font>Firefox İşakışı</font></font></h2> + +<ul> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/User_experience_best_practices"><font><font>Kullanıcı Deneyimleri</font></font></a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox"><font><font>Kurulum</font></font></a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Debugging"><font><font>Hata Ayıklama</font></font></a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Testing_persistent_and_restart_features"><font><font>Kalıcı Test ve Yeniden Başlatma Özellikleri</font></font></a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext"><font><font>web-ext ile Başlamak</font></font></a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/web-ext_command_reference"><font><font>web-ext Komut Referansları</font></font></a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID"><font><font>Add-on ID ve Eklentiler</font></font></a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Alternative_distribution_options"><font><font>Alternatif Dağıtım Ayarları</font></font></a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Request_the_right_permissions"><font><font>Doğru İzin İsteme</font></font></a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Sharing_objects_with_page_scripts"><font><font>Sayfa scriptleri ile Nesne Paylaşma</font></font></a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Retiring_your_extension"><font><font>Uzantılarınızı Geri Alma</font></font></a></li> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Tips"><font><font>İp Uçları ve Püf Noktalar</font></font></a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension"><font><font>Uzantılarınızı Paketleme</font></font></a></li> +</ul> +</div> + +<div class="section"> +<h2 id="Referans"><font><font>Referans</font></font></h2> + +<h3 id="JavaScript_APIleri"><font><font>JavaScript API'leri</font></font></h3> + +<ul> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API"><font><font>JavaScript API'lerine Genel Bakış</font></font></a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs"><font><font>JavaScript API'leri için Tarayıcı Uyumluluk Tablosu</font></font></a></li> +</ul> + +<div class="twocolumns"><font><font>{{ListSubpages ( "/ tr / Eklentiler / WebExtensions / API")}}</font></font></div> + +<h3 id="Bildirim_Anahtarları"><font><font>Bildirim Anahtarları</font></font></h3> + +<ul> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json"><font><font>manifest.json Genel Bakışı</font></font></a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_compatibility_for_manifest.json"><font><font>manifest.json için Tarayıcı Uyumluluğu</font></font></a></li> +</ul> + +<p> </p> + +<div class="twocolumns"><font><font>{{ListSubpages ( "/en-US/Add-ons/WebExtensions/manifest.json")}}</font></font></div> +</div> +</div> + +<p> </p> diff --git a/files/tr/mozilla/eklentiler/webextensions/i̇lk_eklentin/index.html b/files/tr/mozilla/eklentiler/webextensions/i̇lk_eklentin/index.html new file mode 100644 index 0000000000..dfd3d30304 --- /dev/null +++ b/files/tr/mozilla/eklentiler/webextensions/i̇lk_eklentin/index.html @@ -0,0 +1,157 @@ +--- +title: İlk Eklentin +slug: Mozilla/Eklentiler/WebExtensions/İlk_Eklentin +tags: + - Rehber + - WebEklentileri +translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension +--- +<div>{{AddonSidebar}}</div> + +<div>Bu makalede Firefox için bir eklenti baştan sona nasıl oluşturulur onu inceleyeceğiz. Eklenti "mozilla.org" vey alt alan adlarından yüklenen tüm sayfalara kırmızı kenarlık ekleyecek.</div> + +<div></div> + +<div>Bu örnek için kaynak kodlar GitHub'ta: <a href="https://github.com/mdn/webextensions-examples/tree/master/borderify">https://github.com/mdn/webextensions-examples/tree/master/borderify</a>.</div> + +<div></div> + +<p>İlk olarak Firefox 45 veya sonraki bir versiyona ihtiyacımız olacak.</p> + +<h2 id="Eklentiyi_yazmak">Eklentiyi yazmak</h2> + +<p>Yeni bir dizin oluşturup içine girelim. Örneğin terminalden şu şekilde yapabiliriz:</p> + +<pre class="brush: bash">mkdir borderify +cd borderify</pre> + +<h3 id="manifest.json">manifest.json</h3> + +<p>Şimdi "manifest.json" isimli yeni bir dosya oluşturarak dosyanın içeriğine aşağıdakileri ekleyelim.</p> + +<pre class="brush: json">{ + + "manifest_version": 2, + "name": "Borderify", + "version": "1.0", + + "description": "mozilla.org ile eslesen tum sayfalara kırmızı kenarlık ekler.", + + "icons": { + "48": "icons/border-48.png" + }, + + "content_scripts": [ + { + "matches": ["*://*.mozilla.org/*"], + "js": ["borderify.js"] + } + ] + +}</pre> + +<ul> + <li>İlk 3 özellik olan: <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/manifest_version">manifest_version</a></code>, <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/name">name</a></code>, ve <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/version">version</a></code>, zorunlu alanlar ve bu eklenti için gerekli üstveriyi içeriyor.</li> + <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/description">description</a></code> isteğe bağlı bir alan. Ancak Eklenti Yöneticisi'nde göründüğü için eklenmesi tavsiye ediliyor.</li> + <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">icons</a></code> isteğe bağlı bir alan. Eklenti Yöneticisi'nde gösterilecek ikonu belirtmek için kullanıldığından eklenmesi tavsiye ediliyor.</li> +</ul> + +<p>Buradaki en ilginç özellik <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code>. Bu kısımda hangi örüntüye uyan web sayfaları için Firefox'un eklenti script'lerini yüklemesi gerektiğini söylüyor. Bu örnekte Firefox'a "borderify.js" i "mozilla.org" veya onun alt adresinden sunulan tüm HTTP veya HTTPS sayfalar için yüklemesini istiyoruz.</p> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Content scripts hakkında daha fazlasını öğren.</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Match_patterns">Eşleşme örüntüleri hakkında daha fazlasını öğren</a>.</li> +</ul> + +<div class="warning"> +<p><a href="/en-US/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID#When_do_you_need_an_Add-on_ID">Bazı durumlarda eklentin için bir kimlik(id) belirtmen gerekebilir. </a>Gerektiğinde <code>manifest.json</code> da <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/applications">applications</a></code> içerisine <code>gecko.id</code> özelliğini ekle:</p> + +<pre class="brush: json">"applications": { + "gecko": { + "id": "borderify@example.com" + } +}</pre> +</div> + +<h3 id="iconsborder-48.png">icons/border-48.png</h3> + +<p>Eklentimizin bir ikonu olmalı. İkonumuz Eklenti Yöneticisi'nde eklentimiz listelenirken yanında gözükecek.manifest.json dosyamız ikonumuzun şu dizinde olacağını söylüyor: "icons/border-48.png".</p> + +<p>"borderify" dizini içerisinde "icons" klasörünü oluştur. "border-48.png" isimli bir ikon koy. Google Material Desing ikon paketinden alınmış ve <a href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike</a> lisansına sahip <a href="https://github.com/mdn/webextensions-examples/blob/master/borderify/icons/border-48.png">örneğimizdeki ikonu</a> kullanabilirsin.</p> + +<p>Eğer kendi ikonunu kendin ayarlamak istiyorsan ikon 48x48 piksel olmalı. Yüksek çözünürlüklü cihazlar için 96x96 piksel ikon da ayarlayabilirsin. Ancak o durumda <code>icons</code> altında <code>96</code> olarak 96x96'lık ikonu belirtmen gerekir:</p> + +<pre class="brush: json">"icons": { + "48": "icons/border-48.png", + "96": "icons/border-96.png" +}</pre> + +<p>Alternatif olarak SVG dosyası kullanabilirsin ve doğru biçimde ölçeklenir. (Doğrusu: SVG kullanıyorsan ve ikon yazı içeriyorsa, SVG düzenleyicinin "convert to path" özelliğini kullanıp yazıyı düzleştirmek isteyebilirsin. Bu sayede pozisyonu ve boyutu doğru olarak ölçeklenir.)</p> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">İkonları ayarlamak hakkında daha fazlasını öğren.</a></li> +</ul> + +<h3 id="borderify.js">borderify.js</h3> + +<p>Finally, create a file called "borderify.js" directly under the "borderify" directory. Give it this content:</p> + +<pre class="brush: js">document.body.style.border = "5px solid red";</pre> + +<p>This script will be loaded into the pages that match the pattern given in the <code>content_scripts</code> manifest.json key. The script has direct access to the document, just like scripts loaded by the page itself.</p> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Learn more about content scripts.</a></li> +</ul> + +<h2 id="Trying_it_out">Trying it out</h2> + +<p>First, double check that you have the right files in the right places:</p> + +<pre>borderify/ + icons/ + border-48.png + borderify.js + manifest.json</pre> + +<h3 id="Installing">Installing</h3> + +<p>Open "about:debugging" in Firefox, click "Load Temporary Add-on" and select any file in your extension's directory:</p> + +<p>{{EmbedYouTube("cer9EUKegG4")}}</p> + +<p>The extension will now be installed, and will stay until you restart Firefox.</p> + +<p>Alternatively, you can run the extension from the command line using the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a> tool.</p> + +<h3 id="Testing">Testing</h3> + +<p>Now try visiting a page under "mozilla.org", and you should see the red border round the page:</p> + +<p>{{EmbedYouTube("rxBQl2Z9IBQ")}}</p> + +<div class="note"> +<p>Don't try it on addons.mozilla.org, though! Content scripts are currently blocked on that domain.</p> +</div> + +<p>Try experimenting a bit. Edit the content script to change the color of the border, or do something else to the page content. Save the content script, then reload the extensions's files by clicking the "Reload" button in about:debugging. You can see the changes right away:</p> + +<p>{{EmbedYouTube("NuajE60jfGY")}}</p> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Learn more about loading extensions</a></li> +</ul> + +<h2 id="Packaging_and_publishing">Packaging and publishing</h2> + +<p>For other people to use your extension, you need to package it and submit it to Mozilla for signing. To learn more about that, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">"Publishing your extension"</a>.</p> + +<h2 id="What's_next">What's next?</h2> + +<p>Now you've got an idea of the process of developing a WebExtension for Firefox, try:</p> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">reading more about the anatomy of an extension</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Your_second_WebExtension">writing a more complex extension</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/API">reading about the JavaScript APIs available for extensions.</a></li> +</ul> diff --git a/files/tr/mozilla/eklentiler/webextensions/user_interface/index.html b/files/tr/mozilla/eklentiler/webextensions/user_interface/index.html new file mode 100644 index 0000000000..0c181eec6a --- /dev/null +++ b/files/tr/mozilla/eklentiler/webextensions/user_interface/index.html @@ -0,0 +1,95 @@ +--- +title: User interface +slug: Mozilla/Eklentiler/WebExtensions/user_interface +tags: + - Kullanıcı arayüzü + - WebExtensions + - İniş +translation_of: Mozilla/Add-ons/WebExtensions/user_interface +--- +<div><font><font>{{AddonSidebar}}</font></font></div> + +<p><font><font>Kullanım WebExtension API'leri onların işlevselliği kullanıcıya sunulabilir böylece birkaç kullanıcı arayüzü seçenekleri ile sağlandığını uzantılar. </font><font>bu seçeneklerden bir özeti bu bölümde her kullanıcı arayüz seçeneği için daha ayrıntılı tanıtımıyla, aşağıda verilmiştir.</font></font></p> + +<div class="note"> +<p><font><font>Uzantınızda mükemmel bir kullanıcı deneyimi yaratmak için bu UI bileşenlerini kullanarak tavsiye için lütfen </font></font><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/User_experience_best_practices"><font><font>Kullanıcı deneyimi en iyi uygulamaları</font></font></a><font><font> makale.</font></font></p> +</div> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"><font><font>UI seçeneği</font></font></th> + <th scope="col"><font><font>Açıklama</font></font></th> + <th scope="col" style="width: 350px;"><font><font>Misal</font></font></th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/Add-ons/WebExtensions/user_interface/Browser_action"><font><font>Araç Çubuğu düğme</font></font></a><font><font> (tarayıcı eylem)</font></font></td> + <td><font><font>tıklandığında uzantısı bir olay gönderir Tarayıcı araç çubuğunda bir düğme. </font><font>Varsayılan olarak, düğme tüm sekmelerin görünür.</font></font></td> + <td><img alt="Örnek bir araç çubuğu düğmesi (tarayıcı eylem) gösteren." src="https://mdn.mozillademos.org/files/15751/browser-action.png" style="height: 364px; width: 700px;"></td> + </tr> + <tr> + <td><font><font>Bir ile Çubuğu düğmesi </font></font><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups"><font><font>açılır</font></font></a></td> + <td><font><font>düğme tıklandığında o araç çubuğu tarayıcıda bir düğmeye bir açılır pencere açılır. </font><font>Popup kullanıcı etkileşimi yönetir bir HTML belgesinde tanımlanmıştır.</font></font></td> + <td><img alt="Bir araç çubuğu düğmesini pop-up örneği" src="https://mdn.mozillademos.org/files/15753/popup-shadow.png" style="height: 624px; width: 700px;"></td> + </tr> + <tr> + <td><a href="/Add-ons/WebExtensions/user_interface/Page_actions"><font><font>Adres çubuğu düğmesi</font></font></a><font><font> (sayfa aksiyon)</font></font></td> + <td><font><font>tıklandığında uzantısı bir olay gönderir tarayıcının adres çubuğunda bir düğme. </font><font>Varsayılan olarak, düğme tüm sekmelerin gizli.</font></font></td> + <td><img alt="Örnek bir adres çubuğu düğmesini gösteren (sayfa aksiyon) " src="https://mdn.mozillademos.org/files/15745/address_bar_button.png" style="height: 348px; width: 700px;"></td> + </tr> + <tr> + <td><font><font>Bir ile Adres çubuğu düğmesi </font></font><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups"><font><font>açılır</font></font></a></td> + <td><font><font>düğmesi tıklandığında açılan tarayıcı adres çubuğunda bir düğmeyi bir açılır pencere. </font><font>Popup kullanıcı etkileşimi yönetir bir HTML belgesinde tanımlanmıştır.</font></font></td> + <td><img alt="Adres çubuğu düğmesinin bir popup örneği" src="https://mdn.mozillademos.org/files/15747/page_action_popup.png" style="height: 524px; width: 700px;"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items"><font><font>Bağlam menü öğesi</font></font></a></td> + <td><font><font>bir ya da tarayıcının bağlam menüleri daha menü öğeleri onay kutularını ve radyo düğmeleri. </font><font>Ayrıca, menüler ayırıcılar ekleyerek yapılandırılabilir. </font><font>menü öğeleri tıklandığında bir olay uzantısı gönderilir.</font></font></td> + <td><img alt="bağlam menü demo örnekten bir WebExtension tarafından eklenen içerik menü öğeleri, örneği" src="https://mdn.mozillademos.org/files/15756/context_menu_example.png" style="height: 942px; width: 864px;"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars"><font><font>Kenar çubuğu</font></font></a></td> + <td> + <p dir="ltr"><font><font>Bir HTML dokümanı sayfa başına benzersiz içerik seçeneği ile, bir web sayfası yanında görüntülenen. </font><font>uzantı yüklendiğinde kenar çubuğu daha sonra kullanıcının kenar çubuğu görünürlük seçimi itaat, açılır. </font><font>Kenar çubuğunda içinde kullanıcı etkileşimi kendi HTML belgesi tarafından gerçekleştirilmektedir.</font></font></p> + </td> + <td><img alt="bir kenar çubuğu Örnek" src="https://mdn.mozillademos.org/files/15755/bookmarks-sidebar.png" style="height: 846px; width: 700px;"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages"><font><font>Seçenekler sayfa</font></font></a></td> + <td><font><font>Eğer kullanıcıların değişebileceğini Uzantınız için tercihlerini belirlemek sağlayan bir sayfa. </font><font>kullanıcı tarayıcının eklenti yöneticisinden bu sayfaya erişebilirsiniz.</font></font></td> + <td><img alt="Örnek favori renkleri örnekte eklenen seçenekler sayfa içeriğini gösteren." src="https://mdn.mozillademos.org/files/15748/options_page.png"></td> + </tr> + <tr> + <td><a href="/Add-ons/WebExtensions/user_interface/Extension_pages"><font><font>Uzatma sayfa</font></font></a></td> + <td><font><font>Uzantınızda dahil kullanın web sayfaları pencere veya sekme içindeki formları, yardım veya gerekli diğer herhangi bir içerik sağlamak.</font></font></td> + <td><img alt="Basit bir paket sayfası örneği müstakil bir panel olarak görüntülenir." src="https://mdn.mozillademos.org/files/15752/bundled_page_as_panel_small.png" style="height: 432px; width: 700px;"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Notifications"><font><font>Bildirim</font></font></a></td> + <td><font><font>Geçici bildirimleri temel işletim sisteminin bildirimleri mekanizması yoluyla kullanıcıya görüntülenir. </font><font>Kullanıcı bir bildirim veya bir bildirim kapanır (ya otomatik olarak veya kullanıcının isteği üzerine) tıkladığında uzantısına bir olay gönderir.</font></font></td> + <td><img alt="Uzatma tetiklenen sistemi bildirimi Örnek" src="https://mdn.mozillademos.org/files/15754/notify-shadowed.png" style="height: 294px; width: 780px;"></td> + </tr> + <tr> + <td><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Omnibox"><font><font>Adres çubuğu öneri</font></font></a></td> + <td><font><font>Kullanıcı bir anahtar kelime girdiğinde Özel adres çubuğu önerilerinin sunun.</font></font></td> + <td><img alt="Örnek Adres çubuğu önerilerini firefox_code_search WebExtension en özelleştirme sonucunu gösteren." src="https://mdn.mozillademos.org/files/15749/omnibox_example_small.png" style="height: 464px; width: 700px;"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels"><font><font>Geliştirici araçları paneli</font></font></a></td> + <td><font><font>ilişkili HTML dokümanı ile bir sekme o tarayıcının geliştirici araçları görüntüler.</font></font></td> + <td><img alt="Örnek Adres çubuğu önerilerini firefox_code_search WebExtension en özelleştirme sonucunu gösteren." src="https://mdn.mozillademos.org/files/15746/developer_panel_tab.png" style="height: 224px; width: 700px;"></td> + </tr> + </tbody> +</table> + +<p><font><font>kılavuzları nasıl yapılır şu bu kullanıcı arayüzü seçeneklerden bazılarını oluşturmak için adım adım rehberlik:</font></font></p> + +<ul> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Accessibility_guidelines"><font><font>Erişilebilirlik yönergeleri</font></font></a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar"><font><font>araç çubuğuna bir düğme ekleyin</font></font></a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles"><font><font>Tarayıcı stilleri</font></font></a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools"><font><font>geliştirici araçları genişletme</font></font></a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page"><font><font>Bir ayarları sayfası uygulamak</font></font></a></li> +</ul> |