البرمجة
تطوير Chrome Extensions
12 ديسمبر 202511 دقائق قراءة
تعلم بناء إضافات Chrome لتحسين تجربة المتصفح.
هيكل الإضافة
extension/
├── manifest.json # الملف الرئيسي
├── popup.html # واجهة الإضافة
├── popup.js # منطق الواجهة
├── content.js # يعمل في الصفحات
├── background.js # Service Worker
└── icons/
manifest.json
{
"manifest_version": 3,
"name": "إضافتي",
"version": "1.0",
"description": "وصف الإضافة",
"permissions": ["activeTab", "storage"],
"action": {
"default_popup": "popup.html",
"default_icon": "icons/icon.png"
},
"content_scripts": [{
"matches": ["*://*/*"],
"js": ["content.js"]
}]
}
Popup
// popup.js
document.getElementById('btn').addEventListener('click', async () => {
const [tab] = await chrome.tabs.query({ active: true });
chrome.scripting.executeScript({
target: { tabId: tab.id },
func: () => document.body.style.backgroundColor = 'red'
});
});
Content Script
// content.js - يعمل في كل صفحة
const links = document.querySelectorAll('a');
links.forEach(link => {
link.style.color = 'green';
});
التخزين
// حفظ
await chrome.storage.local.set({ key: 'value' });
// جلب
const { key } = await chrome.storage.local.get('key');
الخلاصة
إضافات Chrome قوية ومفيدة. Manifest V3 هو المعيار الجديد. ابدأ ببسيط وتوسع.
الوسوم
#Chrome#Extensions#JavaScript#Browser#أدوات