initial commit

1 files changed, 143 insertions, 0 deletions

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>