چگونه یک افزونه گوگل کروم را بسازیم ؟
گوگل کروم یکی از مرورگرهای محبوب و پر استفاده است، این مسئله هم دلایل خوبی دارد. سرعت بالا، امنیت، دارا بودن ابزارهای مناسب برای توسعه دهندگان و … . اما شاید یکی از مهمترین دلایل ما برای استفاده از گوگل کروم وجود صدها افزونه در گوگل استور است که هر کدام از آنها مزیت های خاص خود را دارند.
یکی از موارد بسیار جالب و خوب افزونه های گوگل کروم این است که برای ساختن آنها شما صرفا نیاز به HTML، CSS و Javascript دارید. پس احتیاجی به یادگیری زبان های دیگری نیست. خب حال که شما این موارد را بلد هستید تنها نیازمند آن هستید که بدانید چگونه از آنها در کروم استفاده کنید.
بسیاری از اوقات پیش می آید که بخواهید یک چیز خاص را در مرورگر خود داشته باشید، برای این کار اگر ابزار مورد نظرتان را پیدا نکردید می توانید آن را خودتان بسازید.
در رابطه با افزونه های کروم
اولین چیزی که نیاز است بدانید این است که در دنیای افزونه ها دو نوع افزونه وجود دارد که می توانیم آنها را بسازیم:
- کنش های صفحه، کنش هایی که مبتنی بر صفحه هستند.
- کنش های مرورگر، کنش هایی که مبتنی بر صفحه نیستند.
بیاید نگاهی به هر دوی اینها بیاندازیم:
اولین آیکنی که در نوار آدرس ظاهر می شود آیکن RSS است، این آیکن تنها زمانی کار خواهد کرد یا ظاهر خواهد شد که برگه مورد نظر با آن سازگار باشد. پس این نوع از کنش های صفحه است.
آیکنی که در خارج از نوار آدرس قرار دارد و وظیفه آن اسکرین شات گرفتن از صفحه نمایش است، شکل بعدی افزونه ها است. به این دلیل که افزونه در هر شرایطی اسکرین شات می گیرد پس مبتنی بر صفحه نیست، بلکه مبتنی بر مرورگر است.
در این مقاله قصد داریم تا شما را با ساخت یک افزونه از نوع مبتنی بر مرورگر آشنا سازیم.
ساخت یک افزونه
اولین چیزی که لازم است انجام شود ساختن یک پوشه اصلی برای پروژه افزونه و اضافه کردن یک فایل Json به نام manifest.json است که شامل اشیاء مرتبط با Json است. به مثال زیر دقت کنید:
{
“name": "BrowserAction",
"version": "0.0.1",
"manifest_version": 2,
}این استخوان اصلی فایل شما است. بعد از آن شما احتیاج به اضافه کردن فایل هایی به پشت زمینه افزونه دارید، این فایل ها در پشت زمینه افزونه اجرا می شوند.
"background": {
“scripts”: [“main.js”, "script.js"]
}بعد از انجام اینکار حال ما به یک شئ browser_action نیاز داریم، اینجا جایی است که رابط اولیه افزونه را که شامل آیکن افزونه، عنوان و صفحه‌ای که بعد از کلیک روی افزونه باز می شود را تعیین می کنیم. صفحه‌ای که تعیین شده است با یک پاپ‌آپ ساده نمایش داده می شود.
"browser_action": {
“default_icon”: “icon.png”,
“default_title”: "The Title",
"default_popup": "popup.html"
}اگر تمام کارها را به درستی انجام داده باشید در نهایت ما یک فایل Manifest را به صورت زیر خوهیم داشت:
{
"name": "BrowserAction",
"version": "0.0.1",
"manifest_version": 2,
"background": {
“scripts": [“main.js”, "script.js"]
}
"browser_action": {
"default_icon": "icon.png",
"default_title": "The Title",
"default_popup": "popup.html"
}
}بعد از انجام این کار حال نوبت به قسمت بعدی ساخت افزونه می رسد جایی که ما آزاد هستیم هرکاری بکنیم.
افزونه
برای ادامه کار قصد داریم تا یک افزونه jQuery color picker ساده را با استفاده از کتابخانه spectrum بسازیم. برای اینکار نیاز دارید تا فایل popup.html خود را به صورت زیر طراحی کنید:
<head>
<title>Simple Extension</title>
<link rel='stylesheet' href='spectrum.css' />
</head>
<body>
<section>
<input type=‘text' class="picker"/>
<em id=‘picker-log'></em>
</section>
<script src="jquery.js"></script>
<script src='spectrum.js'></script>
<script src="popup.js"></script>
</body>همانطور که می بینید تنها کاری که ما انجام داده‌ایم اضافه کردن یک فایل سی اس اس، یک بخش شامل دو المنت الزامی برای ادامه کار و فایل های جاوا اسکریپتی است.
فایل جاوا اسکریپتی ما تنها نیازمند ۶ خط کد جاوا اسکریپت به صورت زیر است:
$(".picker").spectrum({
color: "#fff",
change: function(color) {
$("#picker-log").text("The Color is: " + color.toHexString());
}
});نکته: این مقاله صرفا یک مثال ساده از طراحی افزونه گوگل کروم با استفاده از دانسته های HTML, CSS و جاوا اسکریپت است. برای پی بردن بیشتر به موضوع ساخت افزونه های کروم می توانید در رابطه با Chrome API جستجو کنید.
آزمایش افزونه
خب افزونه کروم شما آماده است، البته احتمالا این مثال خیلی چیز به درد بخوری نبوده و شما قصد ندارید تا آن را در کروم استور قرار دهید. با این وجود تمام منطق و Logic کار در حالت عادی به این صورت است.
برای آزمایش افزونه ابتدا به قسمت chrome://extensions رفته و از اینکه حالت Developer Mode فعال است مطمئن شوید. اگر این حالت فعال بود حال کافی است روی load unpacked extension کلیک کنید و یا اینکه پوشه مورد نظرتان را به سادگی درگ/درپ نمایید. بعد از آن افزونه شما به سرعت نمایش داده می شود.
اگر که قصد دارید تا افزونه خود را روی فروشگاه کروم یا همان کروم استور قرار دهید باید افزونه خودتان را به صورت پک .crx در آورید. اگر تا به حال افزونه ای دانلود کرده باشید می دانید که همراه با نام افزونه این فرمت نیز قرار دارد.
در پایان
ساختن افزونه های کروم آنچنان که شما فکر می کنید سخت و دشوار نیست. ساختن چنین افزونه هایی در حالت کلی بسیار ساده و سریع اتفاق می افتد. شما می توانید با استفاده از این تکنیک های ساده افزونه کوچک خود را بسازید. برای پیدا کردن اطلاعات بیشتر در زمینه ساخت و توسعه افزونه های کروم می توانید به وبسایت پروژه اصلی کروم به آدرسhttps://developer.chrome.com/extensions/extension بزنید.
- ۹۸/۰۲/۰۹