نمونه سورس افزونه کروم
افزونه‌های کروم ابزارهای قدرتمندی هستند که به کاربران کمک می‌کنند تا تجربه مرور وب خود را بهبود بخشند. این افزونه‌ها می‌توانند وظایف مختلفی را انجام دهند، از تغییر ظاهر وب‌سایت‌ها گرفته تا اتوماسیون کارها. در اینجا به بررسی یک نمونه سورس افزونه کروم می‌پردازیم.
ساختار پایه افزونه
هر افزونه کروم معمولاً دارای چهار فایل اصلی است:
- manifest.json: این فایل، اطلاعات کلیدی درباره افزونه را شامل می‌شود. از جمله نام، توضیحات، نسخه و مجوزها. به عنوان مثال:
```json
{
"manifest_version": 3,
"name": "My Chrome Extension",
"version": "
- 0",
"permissions": ["activeTab"],
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup.html"
}
}
```
- background.js: این فایل به عنوان اسکریپت پس‌زمینه عمل می‌کند. وظیفه‌اش مدیریت رویدادها و انجام کارهای غیرحضوری است.
- popup.html: این فایل، رابط کاربری افزونه را نشان می‌دهد. وقتی کاربر روی آیکون افزونه کلیک می‌کند، این صفحه باز می‌شود.
- content.js: این فایل، محتوای صفحات وب را تغییر می‌دهد. به عنوان مثال، می‌تواند متن‌ها را تغییر یا عناصری را حذف کند.
نحوه عملکرد
افزونه‌ها با استفاده از API های کروم کار می‌کنند. به عنوان مثال، اگر بخواهید URL فعلی را دریافت کنید، می‌توانید از کد زیر در `background.js` استفاده کنید:
```javascript
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
let activeTab = tabs[0];
console.log(activeTab.url);
});
```
نکات مهم
- مجوزها: در `manifest.json` باید به دقت مجوزهای لازم را ذکر کنید. عدم ذکر مجوزهای صحیح می‌تواند باعث عدم عملکرد افزونه شود.
- بهینه‌سازی: اطمینان حاصل کنید که افزونه شما بهینه‌سازی شده است تا سرعت مرور را کند نکند.
- تست: پیش از انتشار، افزونه را به دقت تست کنید. این کار به شناسایی و رفع اشکالات کمک می‌کند.
با توجه به این نکات و ساختار پایه، می‌توانید افزونه‌های متنوعی را برای کروم طراحی و توسعه دهید.
مطمئناً! در ادامه، توضیح جامع و کامل درباره نمونه سورس افزونه Chrome آورده شده است که می‌تواند به شما کمک کند تا درک عمیق‌تری از نحوه ساخت و توسعه این نوع افزونه‌ها داشته باشید.
معرفی افزونه Chrome و ساختار آن
افزونه‌های Chrome، برنامه‌هایی کوچکی هستند که قابلیت‌های مرورگر کروم را گسترش می‌دهند. این افزونه‌ها معمولاً با استفاده از HTML، CSS و JavaScript ساخته می‌شوند و می‌توانند وظایف متنوعی انجام دهند، مانند افزودن ابزارهای جدید، تغییر ظاهر صفحات وب، یا حتی ارتباط با سرورهای خارجی.
ساختن یک افزونه Chrome نیازمند چند فایل کلیدی است:
- manifest.json: فایل اصلی که تنظیمات و اطلاعات افزونه را تعریف می‌کند.
- background script: کدهایی که در پس‌زمینه اجرا می‌شوند و وظایف دائمی را انجام می‌دهند.
- content scripts: کدهایی که روی صفحات خاص اجرا می‌شوند و تغییرات در محتوای صفحات وب ایجاد می‌کنند.
- popup.html و popup.js: صفحه کوچک که هنگام کلیک بر روی آیکون افزونه نمایش داده می‌شود.
ساختار نمونه سورس یک افزونه Chrome ساده
در ادامه، یک نمونه سورس کامل و قابل اجرا برای یک افزونه ساده که به صفحات وب پیغام می‌دهد، آورده شده است.
۱. فایل manifest.json
```json {
"manifest_version": 3,
"name": "Sample Chrome Extension",
"version": "
- 0",
"permissions": ["activeTab"],
"action": {
"default_popup": "popup.html",
"default_icon": "icon.png"
},
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
]
}
```
در این فایل، مشخص می‌شود که افزونه از نسخه ۳ API، چه نام، نسخه و مجوزهایی دارد، و چه فایل‌هایی در آن استفاده شده است.
۲. فایل popup.html
```html <!DOCTYPE html>
<html>
<head>
<title>Popup Example</title>
</head>
<body>
<h1>سلام! این یک نمونه افزونه است.</h1>
<button id="clickBtn">کلیک کن</button>
<script src="popup.js"></script>
</body>
</html>
```
در این فایل، یک صفحه کوچک با یک دکمه وجود دارد که با کلیک بر روی آن، اقداماتی انجام می‌شود.
۳. فایل popup.js
```js document.getElementById('clickBtn').addEventListener('click', () => {
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
chrome.scripting.executeScript({
target: { tabId: tabs[0].id },
function: () => alert('سلام، این پیغام از طرف افزونه است!')
});
});
});
```
این کد، هنگام کلیک بر روی دکمه، پیغامی را در صفحه جاری نشان می‌دهد.
۴. فایل background.js
```js chrome.runtime.onInstalled.addListener(() => {
console.log('افزونه نصب شد!');
});
```
این فایل، برای واکنش به رویدادهای مختلف در پس‌زمینه، استفاده می‌شود.
۵. فایل content.js
```js console.log('افزونه فعال است و در صفحات اجرا می‌شود.');
```
کدهای این فایل روی صفحات وب اجرا می‌شود و می‌تواند محتوای صفحه را تغییر دهد یا اطلاعاتی جمع‌آوری کند.
نکات مهم و کاربردی
- مجوزها: در فایل manifest.json باید مجوزهای مورد نیاز را مشخص کنید تا افزونه بتواند به منابع مورد نیاز دسترسی داشته باشد.- APIهای Chrome: برای تعامل با صفحات، تب‌ها و سایر قسمت‌ها، از APIهای مخصوص Chrome استفاده می‌شود.
- تست و اشکال‌زدایی: می‌توانید فایل‌های افزونه را در حالت توسعه در Chrome بارگذاری کنید و از ابزارهای توسعه‌دهنده برای رفع اشکال استفاده کنید.
- انتشار: پس از کامل شدن، می‌توانید افزونه را در Chrome Web Store منتشر کنید و در اختیار دیگران قرار دهید.
جمع‌بندی
ساختن یک نمونه افزونه Chrome، نیازمند آشنایی با ساختار فایل‌ها، APIهای مرورگر و زبان‌های وب است. با تمرین و مطالعه نمونه‌های دیگر، می‌توانید افزونه‌های پیچیده‌تر و کاربردی‌تر بسازید. البته، همیشه باید به امنیت و حریم خصوصی کاربران توجه ویژه‌ای داشته باشید، چون افزونه‌ها دسترسی به داده‌های کاربران دارند.اگر سوال خاصی دارید یا نیاز به نمونه‌های بیشتر دارید، حتما بگویید!
