إزاي تعمل إضافة لمتصفح جوجل كروم (Chrome Extension) باستخدام React و Tailwind CSS؟
كتير مننا كمبرمجين بنستخدم إضافات المتصفح يومياً عشان نسهل شغلنا، سواء كانت أدوات لادارة المهام، أو إضافات بتحسن واجهة مواقع معينة. بس السؤال اللي دايماً بيجي في بالنا: "هو أنا ليه ما أعملش الإضافة الخاصة بيا؟". الحقيقة إن تطوير إضافات المتصفح (Chrome Extensions) كان زمان عملية تقيلة شوية، لكن النهاردة مع استخدام مكتبات حديثة زي React و Tailwind CSS، الموضوع بقى أمتع بكتير وأسهل في التنظيم.
Table of contents [Show]
فهم معيار Manifest V3 الجديد
قبل ما نكتب أي سطر كود، لازم نعرف إن جوجل كروم نقلت من إصدار Manifest V2 للنسخة الأحدث وهي Manifest V3. الفرق الجوهري هنا إن جوجل بقت بتهتم أكتر بالأمان والأداء. يعني الـ Service Workers بقوا هما الأساس بدل الـ Background Pages التقليدية، وده بيخلي الإضافة خفيفة على الجهاز ومش بتستهلك موارد كتير.
إعداد بيئة العمل للمشروع
عشان نستخدم React و Tailwind CSS، يفضل نستخدم أداة زي Vite عشان نسرع عملية الـ Build. الخطوات الأساسية هي:
- إنشاء مشروع React عن طريق الـ Terminal:
npm create vite@latest my-extension -- --template react - تثبيت Tailwind CSS وتظبيط ملف
tailwind.config.jsعشان يقرأ ملفات الـ JSX والـ HTML. - إعداد ملف
manifest.jsonفي مجلد الـpublic.
ملف الـ manifest.json هو "البطاقة الشخصية" للإضافة، وده شكل مبسط ليه:
{
"manifest_version": 3,
"name": "My Productivity Tool",
"version": "1.0",
"action": {
"default_popup": "index.html"
},
"permissions": ["storage", "activeTab"]
}
التعامل مع الـ UI باستخدام Tailwind CSS
ميزة Tailwind في الإضافات إنها بتخلي الـ Bundle size صغير جداً لأنك بتستخدم الـ Utility Classes بس. لما تيجي تبني الـ Popup الخاص بيك، اتعامل معاه كأنه صفحة ويب عادية، بس خليك حريص إنك تستخدم Tailwind عشان تضمن إن الشكل متناسق على كل أحجام الشاشات الممكنة للإضافة.
مثال لكود زرار بتنسيق Tailwind:
<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
اضغط هنا
</button>
الربط بين الـ React والـ Browser APIs
التحدي الحقيقي بيظهر لما تحب تتواصل مع المتصفح نفسه، زي إنك تقرأ الـ URL بتاع الصفحة الحالية أو تخزن بيانات. هنا بنستخدم chrome.storage أو chrome.tabs. يفضل دايماً تعمل Custom Hooks في الـ React عشان تغلف الـ Browser APIs دي وتخلي الكود بتاعك نظيف (Clean Code).
خاتمة ونصيحة من أخ
تطوير إضافات كروم مهارة مطلوبة جداً وممتعة، لأنك بتشوف نتيجتها قدام عينك بتغير في طريقة استخدامك للإنترنت. نصيحتي ليك: ابدأ بحاجة بسيطة جداً، زي إضافة بتغير خلفية صفحة معينة أو بتعمل "To-do list" صغيرة. ومع الوقت، هتلاقي نفسك بتعمل أدوات معقدة بتخدم آلاف المستخدمين. الاستمرار هو سر اللعبة، وما تخافش من الأخطاء، الـ Console هو أكتر مكان هتعلمك منه!
بالتوفيق في مشروعك القادم، ولو قابلك أي عطل في الـ Build، افتكر دايماً إن الـ Documentation بتاع جوجل هو صاحبك الصدوق!
