توسعه‌ی یک اکستنشن برای خانواده‌ی کرومیوم

Extensions are made of different, but cohesive, components. Components can include background scripts, content scripts, an options page, UI elements and various logic files. Extension components are created with web development technologies: HTML, CSS, and JavaScript.

اکستنشن‌‌ها از کامپوننت‌های متفاوت اما منسجم تشکیل می‌شوند. کامپوننت‌ها می‌توانند شامل اسکریپت‌های پس‌زمینه، اسکریپت‌های محتوا، برگه‌های تنظیمات، المنت‌های UI و فایل‌های مختلف مربوط به منطق اکستنشن باشند. کامپوننت‌های اکستنشن با تکنولوژی‌های توسعه‌ی وب ساخته می‌شوند: HTML و CSS و JS.

دو سناریو را در نظر بگیریم:

1. مرورگرها هر قابلیتی که به ذهن توسعه‌دهندگان یا کاربران رسیده باشد را پیاده‌سازی کنند.
2. مرورگرها قابلیت‌های ضروری را پیاده‌سازی کنند و در کنار آن پورتی برای توسعه داشته باشند که هر کاربری بنا به نیاز خود قابلیت‌های دیگری را به آنها اضافه کند.

در سناریوی اول، حجم مرورگرها سرسام‌آور می‌شود و حافظه‌ی کامپیوتر را صدها برابر آنچه در Memeها می‌بینیم، حیف و میل می‌کنند. در سناریوی دوم، حجم مرورگرها پایین می‌آید و هر کاربری تنها قابلیت‌های اضافی که نیاز دارد را نصب می‌کند و دیگر فلان اکستنشن که متن صفحات را به زبان هندی ترجمه می‌کند سربار حافظه‌ی اصلی و جانبی آنها نخواهد شد. کدام‌یک عاقلانه‌تر است؟ همه‌ی صداها می‌گویند: دو! دو! دو!

در این مقاله، اکستنشن کوچکی برای مرورگرهای خانواده‌ی Chromium می‌نویسیم (من از Brave استفاده می‌کنم، گوگل‌کروم شیطان است) و از دور با ساختار یک اکستنشن آشنا می‌شویم.

شروع کنیم!

حتی اکستنشن‌های فایرفاکس هم یک فایل manifest.json دارند که اطلاعات اکستنشن از آنجا خوانده می‌شود. ما هم از این فایل شروع می‌کنیم:

{
    &quotmanifest_version&quot: 3,
    &quotname&quot: &quotext-tut&quot,
    &quotdescription&quot: &quotThis is just for learning purposes&quot,
    &quotversion&quot: &quot1.0.0&quot,
    &quoticons&quot: {
        &quot48&quot: &quoticon48.png&quot,
        &quot128&quot: &quoticon128.png&quot
    }
}

از نسخه‌ی مانیفست چشم‌پوشی کنید. در خط بعدی نام، توضیح و نسخه‌ی اکستنشن را تعیین کرده‌ایم و بعد آیکون اکستنشن را در دو سایز اضافه کرده‌ایم. توجه داشته باشید که آیکون‌ها باید در دایرکتوری جاری قرار گرفته باشند. فایل را سیو کرده و اکستنشن را به مرورگر اضافه می‌کنیم:

1. وارد بخش Extensions مرورگر شوید.
2. حالت Developer mode را فعال کنید.
3. روی گزینه‌ی Load unpacked کلیک کنید و پوشه‌ی اکستنشن را انتخاب کنید.

این اکستنشن، بی‌مصرف‌ترین اکستنشن موجود در جهان است، زیرا هیچ قابلیتی را به مرورگر اضافه نمی‌کند و تنها آیکونی با نقاشی افتضاح من دارد! حالا مگر چه قابلیتی قرار است به مرورگر اضافه شود؟ Shareکردن در توئیتر!

اکستنشن‌ها چگونه کار می‌کنند؟

اکستنشن‌ها می‌توانند به شیوه‌های مختلفی کار کنند؛ می‌توانند به Eventهای مرورگر گوش کنند (Background scripts) یا اینکه در محتوای صفحاتی که باز می‌شوند، فراخوانی شوند (Content scripts) و هر کدام از اینها بسته به موقعیت و نیازمندی ما اضافه می‌شود. مثلاً ما به Content script نیاز داریم تا محتوایی را از داخل صفحه به توئیتر بفرستیم، زیرا Content scriptها قادر به خواندن و دستکاری DOM هستند.

افزودن Content script

برای این کار، باید کد خود را به اکستنشن معرفی کنیم، پس در فایل manifest.json خواهیم داشت:

&quotcontent_scripts&quot: [
    {
        &quotmatches&quot: [
            &quot<all_urls>&quot
        ],
        &quotjs&quot: [
            &quotmain.js&quot
        ]
    }
]

فیلد matches تعیین می‌کند که این Content script در چه آدرسی عمل کند. فرض کنید که می‌خواهیم اکستنشنی بنویسیم که گزینه‌ی دانلود را به انتهای پادکست‌های گوگل اضافه کند، پس نیازی نداریم که اسکریپتمان در هر صفحه‌ای لود شود و چنین چیزی خواهیم داشت:

&quothttps://podcasts.google.com/*&quot

ما می‌خواهیم اسکریپتمان در هر صفحه‌ی فراخوانی شود، پس <all_urls> چاره‌ی کار است. در ادامه هم فایل main.js را معرفی کرده‌ایم، پس فایلی با همین نام در پوشه‌ی جاری بسازید. برای جلوگیری از کثیف‌کاری (ویرگول چرا Syntax highlighter ندارد؟) کدهای جاوااسکریپت را به صورت تصویر می‌گذارم (با تشکر از کربن):

اگر کمی جاوااسکریپت بلد باشید، می‌بینید که کار راحتی است! در بخش A دکمه‌ای ساخته‌ایم، به آن استایل و غیره داده‌ایم و به body اضافه کرده‌ایم. در بخش B یک رویداد (Event) اضافه کرده‌ایم که هر وقت متنی در داخل صفحه انتخاب شود، عمل می‌کند (این تکه را از این جواب گرفته‌ام) و متن انتخاب‌شده را داخل document.highlighted می‌ریزد. بعد در بخش C کدی نوشته‌ام که چک می‌کند که آیا طول متن انتخاب‌شده از صفر بیشتر است یا نه (چیزی انتخاب شده یا نه؟!)، و بر اساس آن دکمه‌ی Share را نشان می‌دهد یا مخفی می‌کند. ببینیم چه شد:

نکته‌ی کنکوری: لازم نیست که بعد از هر تغییری اکستنشن را حذف و اضافه کنید. در تصویر اول (بخش اکستنشن‌ها) آیکون Refresh را می‌بینید که با کلیک روی آن، مرورگر به صورت خودجوش اکستنشن را آپدیت می‌کند.

تا این قسمت از مقاله کاری کرده‌ایم که هر وقت قسمتی از متن Highlight شد، دکمه‌ی شیر در پایین صفحه نمایش داده شود. مرحله‌ی بعد این است که اگر روی دکمه کلیک کردیم، متن انتخابی در توئیتر به اشتراک گذاشته شود:

document.getElementById('share-button').addEventListener('click', () => {
    window.open(`https://twitter.com/intent/tweet?text=${document.highlighted}`)
})

حالا با کلیک روی دکمه‌ی Share، پنجره‌ی اشتراک‌گذاری توئیتر باز می‌شود که نشان می‌دهد راه را درست رفته‌ایم:

افزودن Popup

در مرحله‌ی قبل موفق شدیم قسمتی از متن را انتخاب کنیم و با دکمه‌ی Share در توئیتر به اشتراک بگذاریم. این خوب است، ولی کافی نیست. می‌توانیم دکمه‌ای در بالای مرورگر داشته باشیم که با آن آدرس صفحه‌ی فعلی را هم در توئیتر به اشتراک بگذاریم. ابتدا کد زیر را به فایل manifest.json اضافه می‌کنیم:

&quotaction&quot: {
    &quotdefault_popup&quot: &quotpopup.html&quot
},
&quotpermissions&quot: [
    &quottabs&quot
]

در قسمت اول، یک popup داریم که محتوای فایل popup.html را نشان می‌دهد و قسمت دوم هم permission است که مجوزهای خاصی را از مرورگر دریافت می‌کند. از آنجا که قصد داریم به URL تب‌ها دسترسی داشته باشیم، باید مجوز tabs را از مرورگر بگیریم. محتوای فایل‌های popup.html و popup.js را به ترتیب می‌بینید:

<!DOCTYPE html>
<html>
<body>
    <button id=&quotshare-url&quot>Share</button>

    <script src=&quotpopup.js&quot>
</body>
</html>

document.getElementById('share-url').addEventListener('click', async () => {
    chrome.tabs.query({'active': true, 'lastFocusedWindow': true}, function (tabs) {
        window.open(`https://twitter.com/intent/tweet?url=${tabs[0].url}`)
    })
})

اتفاق عجیبی نیفتاده است! در صورت کلیک روی دکمه‌ی Share، از اولین تبی که متد query برمی‌گرداند (که همان تب فعال و فعلی است) به پراپرتی url دسترسی پیدا کرده‌ایم و تقریباً همان کار قبلی را انجام داده‌ایم.

تمام شد! ☺️

این مقاله تنها به شکل سطحی و مقدماتی به موضوع پرداخته است و هنوز مباحث بسیاری زیادی برای یادگیری باقی مانده است. شما می‌توانید از قابلیت‌های مختلف مرورگر بعد از اضافه‌کردن permissionشان استفاده کنید و ایده‌های مختلفی را درون مرورگر بیاورید.

هرگز از مستندات غافل نشوید:

https://developer.chrome.com/docs/extensions/

اکستنشن اِشتب که قبلا نوشته بودم را بررسی کنید و در صورت تمایل روی ⭐️ کلیک کنید:

https://github.com/WebPajooh/eshteb