diff options
Diffstat (limited to 'files/bn/mozilla/add-ons/webextensions')
3 files changed, 329 insertions, 0 deletions
diff --git a/files/bn/mozilla/add-ons/webextensions/index.html b/files/bn/mozilla/add-ons/webextensions/index.html new file mode 100644 index 0000000000..8a47f12413 --- /dev/null +++ b/files/bn/mozilla/add-ons/webextensions/index.html @@ -0,0 +1,91 @@ +--- +title: WebExtensions +slug: Mozilla/Add-ons/WebExtensions +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Add-ons/WebExtensions +--- +<div>{{AddonSidebar}}</div> + +<div class="note"> +<p>WebExtensions are currently in an experimental alpha state. From Firefox 46, you can publish WebExtensions to Firefox users, just like any other add-on. We're aiming for a first stable release in Firefox 48.</p> +</div> + +<p>WebExtensions are a cross-browser system for developing browser add-ons. To a large extent the system is compatible with the <a class="external-icon external" href="https://developer.chrome.com/extensions">extension API</a> supported by Google Chrome and Opera. Extensions written for these browsers will in most cases run in Firefox or <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/">Microsoft Edge</a> with <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Porting_from_Google_Chrome">just a few changes</a>. The API is also fully compatible with <a href="https://developer.mozilla.org/en-US/Firefox/Multiprocess_Firefox">multiprocess Firefox</a>.</p> + +<p>We're also intending to extend the APIs to support the needs of add-on developers, so if you have ideas, we'd love to hear them. You can reach us on the <a href="https://mail.mozilla.org/listinfo/dev-addons">dev-addons mailing list</a> or <a href="irc://irc.mozilla.org/webextensions">#webextensions</a> on <a href="https://wiki.mozilla.org/IRC">IRC</a>.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h3 id="Getting_started">Getting started</h3> + +<ul> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions_">What are WebExtensions?</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Your_first_WebExtension">Your first WebExtension</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Your_second_WebExtension">Your second WebExtension</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">Anatomy of a WebExtension</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Examples">Example WebExtensions</a></li> +</ul> + +<h3 id="How_to">How to</h3> + +<ul> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests">Intercept HTTP requests</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Modify_a_web_page">Modify a web page</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">Add a button to the toolbar</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page">Implement a settings page</a></li> + <li>Manipulate browser tabs</li> + <li>Access and modify bookmarks</li> + <li>Access and modify cookies</li> +</ul> + +<h3 id="Concepts">Concepts</h3> + +<ul> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Using_the_JavaScript_APIs">Using the JavaScript APIs</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Content scripts</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Match_patterns">Match patterns</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Internationalization">Internationalization</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">Content Security Policy</a></li> +</ul> + +<h3 id="Porting">Porting</h3> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/Porting_from_Google_Chrome">Porting a Google Chrome extension</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Porting_a_legacy_Firefox_add-on">Porting a legacy Firefox add-on</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_the_Add-on_SDK">Comparison with the Add-on SDK</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_XUL_XPCOM_extensions">Comparison with XUL/XPCOM extensions</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities">Chrome incompatibilities</a></li> +</ul> + +<h3 id="Firefox_workflow">Firefox workflow</h3> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Installation</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Debugging">Debugging</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">Getting started with web-ext</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/web-ext_command_reference">web-ext command reference</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID">WebExtensions and the Add-on ID</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">Publishing your WebExtension</a></li> +</ul> +</div> + +<div class="section"> +<h3 id="Reference">Reference</h3> + +<ul> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API">JavaScript API overview</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">Browser compatibility tables for JavaScript APIs</a></li> +</ul> + +<h4 id="JavaScript_APIs">JavaScript APIs</h4> + +<div class="twocolumns">{{ ListSubpages ("/en-US/Add-ons/WebExtensions/API") }}</div> + +<h4 id="Manifest_keys">Manifest keys</h4> + +<div class="twocolumns">{{ ListSubpages ("/en-US/Add-ons/WebExtensions/manifest.json") }}</div> +</div> +</div> diff --git a/files/bn/mozilla/add-ons/webextensions/what_are_webextensions/index.html b/files/bn/mozilla/add-ons/webextensions/what_are_webextensions/index.html new file mode 100644 index 0000000000..f92dc2ad28 --- /dev/null +++ b/files/bn/mozilla/add-ons/webextensions/what_are_webextensions/index.html @@ -0,0 +1,95 @@ +--- +title: What are WebExtensions? +slug: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions +--- +<p><span id="result_box" lang="bn"><span title="<p>This page contains links to documentation for the approach to developing extensions for Gecko-based applications which uses:</p> + +">এই পাতা গেকো ভিত্তিক অ্যাপ্লিকেশনের জন্য উন্নয়নশীল এক্সটেনশন পদ্ধতির যা ব্যবহার ডকুমেন্টেশন লিঙ্ক উপস্থিত রয়েছে</span><br> + <br> + <br> + <span title="<li>XUL overlays to specify the interface</li> + "> XUL প্রতিস্থাপক ইন্টারফেস করুন </ li> নির্দিষ্ট করার<br> + </span><span title='&lt;li>APIs available to privileged code, such as &lt;a href="/en-US/docs/XUL/tabbrowser">&lt;code>tabbrowser&lt;/code>&lt;/a> and &lt;a href="/en-US'><লি> যেমন <a href="/en-US/docs/XUL/tabbrowser"> <code> বিশেষ সুবিধাভোগী কোড উপলব্ধ API গুলি, tabbrowser </ code> </a> এবং <একটি href = "/ en-US </span><span title='/docs/Mozilla/JavaScript_code_modules">JavaScript modules&lt;/a>, to interact with the application and content.&lt;/li> +'>/ ডক্স / মজিলা / JavaScript_code_modules "> জাভাস্ক্রিপ্ট মডিউল </a>, অ্যাপ্লিকেশন এবং কন্টেন্ট সঙ্গে যোগাযোগ করার জন্য. </ li></span><br> + <span title="</ul> + +"></ Li></span><br> + <br> + <span title="<p>Prior to Firefox 4, and the Gecko 2 engine that powers it, this was the only way to develop extensions."><P> ঢাকা ফায়ারফক্স 4, এবং গেকো 2 ইঞ্জিন এটি ক্ষমতা, এই এক্সটেনশন বিকাশ করার একমাত্র উপায় ছিল এর আগে. </span><span title='This methodology has largely been superseded by &lt;a href="/en-US/docs/Extensions/Bootstrapped_extensions">restartless extensions&lt;/a>, and the &lt;a href="/en-US/Add-ons/SDK">'>এই পদ্ধতি মূলত <a href="/en-US/docs/Extensions/Bootstrapped_extensions"> রিস্টার্টবিহীন এক্সটেনশন </a>, এবং <a দ্বারা বাতিল হয়েছে href="/en-US/Add-ons/SDK"> </span><span title="Add-on SDK</a>, which is built on top of them.">অ্যাড-অন এসডিকে </a>, যা তাদের উপর নির্মিত হয়. </span><span title="The privileged JavaScript APIs described here can still be used in these newer types of add-ons.</p> + +">সুবিধাভোগী জাভাস্ক্রিপ্ট এপিআই এখানে বর্ণনা এখনও অ্যাড টার্ন এই নতুন ধরনের ব্যবহার করা যেতে পারে. '</ p></span><br> + <br> + <span title='&lt;h2 id="XUL_School">XUL School&lt;/h2> + +'><H2 & id = "XUL_School"> XUL স্কুল </ h2></span><br> + <br> + <span title='&lt;p>&lt;a href="/en-US/Add-ons/Overlay_Extensions/XUL_School">XUL School&lt;/a> is a comprehensive add-on development tutorial, focusing on Firefox extension development but mostly applicable to other Gecko-based'><পি> <a href="/en-US/Add-ons/Overlay_Extensions/XUL_School"> XUL স্কুল </a> একটি ব্যাপক অ্যাড অন উন্নয়ন টিউটোরিয়াল, কিন্তু বেশিরভাগই অন্যান্য গেকো ভিত্তিক প্রযোজ্য ফায়ারফক্স এক্সটেনশন উন্নয়ন উপর মনোযোগ নিবদ্ধ করে </span><span title="applications.</p> + +">অ্যাপ্লিকেশন. '</ p></span><br> + <br> + <span title='&lt;h2 id="More_resources">More resources&lt;/h2> + +'><H2 & id = "More_resources"> আরো সম্পদ করুন </ h2></span><br> + <br> + <span title='&lt;div class="column-container"> +'><Div class = "কলাম-ধারক"></span><br> + <span title='&lt;div class="column-half"> +'><Div class = "কলাম অর্ধ"></span><br> + <span title="<dl> + "><DL><br> + </span><span title='&lt;dt>&lt;a href="/en-US/Mozilla/Add-ons/Setting_up_extension_development_environment">Setting up your environment&lt;/a>&lt;/dt> + '><Dt> <a href="/en-US/Mozilla/Add-ons/Setting_up_extension_development_environment"> আপনার পরিবেশ </a> </ DT> সেট আপ<br> + </span><span title="<dd>Setting up the application for extension development.</dd> + "><DD> এক্সটেনশন উন্নয়নের জন্য আবেদন সেট আপ হচ্ছে. </ DD><br> + </span><span title='&lt;dt>&lt;a href="/en-US/docs/XUL">XUL&lt;/a>&lt;/dt> + '><Dt> <a href="/en-US/docs/XUL"> XUL </a> </ DT><br> + </span><span title="<dd>Tutorials and reference for the user interface language used by XUL extensions.</dd> + "><DD> টিউটোরিয়াল এবং ইউজার ইন্টারফেস XUL এক্সটেনশন. </ DD> দ্বারা ব্যবহৃত ভাষা জন্য রেফারেন্স<br> + </span><span title='&lt;dt>&lt;a href="/en-US/Mozilla/Add-ons/Code_snippets">Code snippets&lt;/a>&lt;/dt> + '><Dt> <a href="/en-US/Mozilla/Add-ons/Code_snippets"> কোড স্নিপেট </a> </ DT><br> + </span><span title="<dd>Sample code for many of the things you'll want to do.</dd> + "><DD> জিনিষ আপনি করতে চাইবেন. </ DD> অনেক জন্য নমুনা কোড<br> + </span><span title='&lt;dt>&lt;a href="/en-US/Mozilla/Add-ons/Installing_extensions">Installing extensions&lt;/a>&lt;/dt> + '><Dt> <a href="/en-US/Mozilla/Add-ons/Installing_extensions"> এক্সটেনশন </a> </ DT> ইনস্টল<br> + </span><span title="<dd>How to install an extension by copying the extension files into the application's install directory.</dd> + "><DD> অ্যাপ্লিকেশনের তালিকা ইনস্টল এক্সটেনশান ফাইল অনুলিপি দ্বারা একটি এক্সটেনশন ইনস্টল করার জন্য কিভাবে. </ DD><br> + </span><span title='&lt;dt>&lt;a href="/en-US/Add-ons/Overlay_extensions/Firefox_addons_developer_guide">Firefox add-ons developer guide&lt;/a>&lt;/dt> + '><Dt> <a href="/en-US/Add-ons/Overlay_extensions/Firefox_addons_developer_guide"> ফায়ারফক্স অ্যাড-অন ডেভেলপার নির্দেশিকা </a> </ DT><br> + </span><span title="<dd>A guide to developing overlay extensions.</dd> +"><DD> ওভারলে এক্সটেনশন. </ DD> উন্নয়নশীল একটি নির্দেশিকা</span><br> + <span title="</dl> +"></ DL></span><br> + <span title="</div> + +"></ Div></span><br> + <br> + <span title='&lt;div class="column-half"> +'><Div class = "কলাম অর্ধ"></span><br> + <span title="<dl> + "><DL><br> + </span><span title='&lt;dt>&lt;a href="/en-US/docs/Mozilla/JavaScript_code_modules">JavaScript code modules&lt;/a>&lt;/dt> + '><Dt> <a href="/en-US/docs/Mozilla/JavaScript_code_modules"> জাভাস্ক্রিপ্ট কোড মডিউল </a> </ DT><br> + </span><span title="<dd>JavaScript modules available to extension developers.</dd> + "><DD> জাভাস্ক্রিপ্ট মডিউল এক্সটেনশন ডেভেলপার. </ DD> উপলব্ধ<br> + </span><span title='&lt;dt>&lt;a href="/en-US/Mozilla/Add-ons/Inline_Options">Extension preferences&lt;/a>&lt;/dt> + '><Dt> <a href="/en-US/Mozilla/Add-ons/Inline_Options"> এক্সটেনশন পছন্দগুলি </a> </ DT><br> + </span><span title="<dd>How to specify the preferences for your extension that will appear in the Add-ons Manager.</dd> + "><DD> কিভাবে আপনার এক্সটেনশন পছন্দগুলি যে অ্যাড-অন ম্যানেজার প্রদর্শিত হবে তা নির্দিষ্ট করার. </ DD><br> + </span><span title='&lt;dt>&lt;a href="/en-US/Mozilla/Add-ons/Extension_Packaging">Extension packaging&lt;/a>&lt;/dt> + '><Dt> <a href="/en-US/Mozilla/Add-ons/Extension_Packaging"> এক্সটেনশন প্যাকেজিং </a> </ DT><br> + </span><span title="<dd>How extensions are packaged and installed.</dd> + "><DD> কিভাবে এক্সটেনশন প্যাকেজ এবং ইনস্টল করা হয়. </ DD><br> + </span><span title='&lt;dt>&lt;a href="/en-US/Mozilla/Add-ons/Creating_Custom_Firefox_Extensions_with_the_Mozilla_Build_System">Binary Firefox extensions&lt;/a>&lt;/dt> + '><Dt> <a href="/en-US/Mozilla/Add-ons/Creating_Custom_Firefox_Extensions_with_the_Mozilla_Build_System"> বাইনারি ফায়ারফক্স এক্সটেনশন </a> </ DT><br> + </span><span title="<dd>Creating binary extensions for Firefox.</dd> +"><DD> ফায়ারফক্সের জন্য বাইনারি এক্সটেনশন তৈরি. </ DD></span><br> + <span title="</dl> +"></ DL></span><br> + <span title="</div> +"></ Div></span><br> + <span title="</div> + +"></ Div></span><br> + <br> + <span title="<p>&nbsp;</p>"><পি> & nbsp; </ p></span></span></p> diff --git a/files/bn/mozilla/add-ons/webextensions/your_first_webextension/index.html b/files/bn/mozilla/add-ons/webextensions/your_first_webextension/index.html new file mode 100644 index 0000000000..c705ed4493 --- /dev/null +++ b/files/bn/mozilla/add-ons/webextensions/your_first_webextension/index.html @@ -0,0 +1,143 @@ +--- +title: আপনার প্রথম WebExtension +slug: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension +translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension +--- +<p>{{AddonSidebar}}</p> + +<p>এই অনুচ্ছেদে ফায়ারফক্সের WebExtension তৈরীর আদ্যপন্ত জানব। এই অ্যাড-অন "mozilla.org" অথবা এর সাবডোমেন থেকে আসা সমস্ত পেজে লাল বর্ডার যোগ করবে।</p> + +<p>এই উদাহরণের সোর্স কোড GitHub-এ দেওয়া আছেঃ</p> + +<p><a href="https://github.com/mdn/webextensions-examples/tree/master/borderify">https://github.com/mdn/webextensions-examples/tree/master/borderify</a>.</p> + +<p>প্রথমে দরকার হবে ফায়ারফক্স ৪৫ অথবা তার পরবর্তী ভার্সন।</p> + +<h2 id="WebExtension_লিখা">WebExtension লিখা</h2> + +<p>নতুন একটি ডিরেক্টরী তৈরী করে সেখানে প্রবেশ করুনঃ</p> + +<pre class="brush: bash">mkdir borderify +cd borderify</pre> + +<h3 id="manifest.json">manifest.json</h3> + +<p>এখন "borderify" ডিরেক্টরীর ভেতরে "manifest.json" নামে নতুন একটি ফাইল তৈরী করুন। তাতে নিম্নলিখিত কোড লিখুনঃ</p> + +<pre class="brush: json">{ + + "manifest_version": 2, + "name": "Borderify", + "version": "1.0", + + "description": "Adds a solid red border to all webpages matching mozilla.org.", + + "icons": { + "48": "icons/border-48.png" + }, + + "content_scripts": [ + { + "matches": ["*://*.mozilla.org/*"], + "js": ["borderify.js"] + } + ] + +}</pre> + +<ul> + <li>প্রথম তিনটি key: <code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/manifest_version">manifest_version</a></code>, <code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/name">name</a></code>, এবং <code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/version">version</a></code>, দিতেই হবে যাতে অ্যাড-অনের প্রাথমিক মেটাডাটা থাকে।</li> + <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/description">description</a></code> ঐচ্ছিক কিন্তু দিতে পরাপর্শ দেওয়া হচ্ছে কারণ, অ্যাড-ম্যানেজারে এই তথ্য দেখাবে।।</li> + <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">icons</a></code> ঐচ্ছিক যা অ্যাড-অনের একটি আইকন নির্দিষ্ট করে,যা অ্যাড-ম্যানেজারে দেখাবে তাই দিতে পরামর্শ দেওয়া হচ্ছে।</li> +</ul> + +<p>কিছু ফায়ারফক্স ভার্সনে একটি অতিরক্ত <code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/applications">applications </a></code>key manifest.json-এ যোগ করা লাগতে পারে।</p> + +<pre class="brush: json line-numbers language-json"><code class="language-json"><span class="key token">"applications":</span> <span class="punctuation token">{</span> + <span class="key token">"gecko":</span> <span class="punctuation token">{</span> + <span class="key token">"id":</span> <span class="string token">"borderify@example.com"</span><span class="punctuation token">,</span> + <span class="key token">"strict_min_version":</span> <span class="string token">"42.0"</span><span class="punctuation token">,</span> + <span class="key token">"strict_max_version":</span> <span class="string token">"50.*"</span><span class="punctuation token">,</span> + <span class="key token">"update_url":</span> <span class="string token">"https://example.com/updates.json"</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span></code></pre> + +<p>সবচেয়ে মজার key হচ্ছ <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code>. এটা ফায়ারফক্সকে সেই সব ওয়েব পেজে স্ক্রীপট লোড করতে বলবে যাদের URL-এ একটি নির্দিষ্ট প্যাটার্ন আছে।এক্ষেত্রে আমরা ফায়ারফক্সকে "mozilla.org" বা এর সাবডোমেনের সমস্ত HTTP অথবা HTTPS পেজে "borderify.js" নামে স্ক্রীপট লোড করতে বলছি।</p> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Learn more about content scripts.</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Match_patterns">Learn more about match patterns</a>.</li> +</ul> + +<h3 id="iconsborder-48.png">icons/border-48.png</h3> + +<p>The add-on should have an icon. This will be shown next to the add-on's listing in the Add-ons Manager. Our manifest.json promised that we would have an icon at "icons/border-48.png".</p> + +<p>Create the "icons" directory directly under the "borderify" directory. Save an icon there named "border-48.png". You could use <a href="https://github.com/mdn/webextensions-examples/blob/master/borderify/icons/border-48.png">the one from our example</a>, which is taken from the Google Material Design iconset, and is used under the terms of the <a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike</a> license.</p> + +<p>If you choose to supply your own icon, It should be 48x48 pixels. You could also supply a 96x96 pixel icon, for high-resolution displays, and if you do this it will be specified as the <code>96</code> property of the <code>icons</code> object in manifest.json:</p> + +<pre class="brush: json line-numbers language-json"><code class="language-json"><span class="key token">"icons":</span> <span class="punctuation token">{</span> + <span class="key token">"48":</span> <span class="string token">"icons/border-48.png", + "96": "icons/border-96.png"</span> +<span class="punctuation token">}</span></code></pre> + +<p>Alternatively, you could supply an SVG file here, and it will be scaled correctly.</p> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">Learn more about specifying icons.</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="Testing_it_out">Testing 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> + +<p>Open "about:debugging" in Firefox, click "Load Temporary Add-on" and select any file in your add-on's directory:</p> + +<p>{{EmbedYouTube("cer9EUKegG4")}}</p> + +<p>The add-on will now be installed, and will stay until you restart Firefox.</p> + +<p>Now try visiting a page under "mozilla.org", and you should see the red border round the page:</p> + +<p>{{EmbedYouTube("rxBQl2Z9IBQ")}}</p> + +<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 add-on'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 add-ons</a></li> +</ul> + +<h2 id="Packaging_and_publishing">Packaging and publishing</h2> + +<p>For other people to use your add-on, 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 WebExtension"</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 WebExtensions</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Your_second_WebExtension">writing a more complex WebExtension</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/API">reading about the JavaScript APIs available to WebExtensions.</a></li> +</ul> |