browser-extension-developer
إنشاء امتدادات متصفح متعددة المنصات باستخدام WXT
غالباً ما تعاني مشاريع امتدادات المتصفح من توافق عبر المتصفرات وإعداد التعريب المناسب. توفر هذه المهارة إرشادات واضحة لتطوير الامتدادات المستندة إلى WXT والتي تدعم Chrome وFirefox وEdge مع بنية i18n المناسبة.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "browser-extension-developer". How do I structure a WXT browser extension project?
النتيجة المتوقعة:
- إنشاء browser/entrypoints/ لملفات background.ts و content.ts
- وضع ملفات i18n في browser/public/_locales/[language]/messages.json
- تكوين WXT في browser/wxt.config.ts
- تنتقل الامتدادات المبنية إلى browser/.output/chrome-mv3 و firefox-mv2
استخدام "browser-extension-developer". Add Spanish locale to my extension
النتيجة المتوقعة:
- إنشاء مجلد browser/public/_locales/es/
- إضافة messages.json مع المفاتيح: appDescription و openWithRepomix
- تشغيل npm run build-all لإعادة إنشاء اللغات
- الاختبار في Chrome وFirefox للتوافق
استخدام "browser-extension-developer". What commands do I use for Firefox development?
النتيجة المتوقعة:
- استخدام npm run dev:Firefox للتطوير المباشر مع إعادة التحميل الساخن
- يستخدم Firefox بيان MV2 بينما يستخدم Chrome MV3
- تشغيل npm run build:Firefox للبناء لإرسال متجر Firefox
- قد تكون هناك حاجة لـ polyfills لواجهات برمجة التطبيقات الخاصة بـ Firefox
التدقيق الأمني
آمنThis skill contains only documentation files with no executable code, network calls, or filesystem access. The static analysis flagged markdown code fences and JSON content as security issues, but evaluation confirms these are false positives. SKILL.md provides guidance for WXT-based browser extension development.
عوامل الخطر
⚙️ الأوامر الخارجية (11)
🌐 الوصول إلى الشبكة (1)
📁 الوصول إلى نظام الملفات (2)
درجة الجودة
ماذا يمكنك بناءه
إعداد سير عمل متعدد المتصفحات
تكوين مشروع امتداد مستند إلى WXT مع نقاط دخول مناسبة لتوافق Chrome وFirefox وEdge.
إدارة الدعم متعدد اللغات
إضافة مواقع لغوية جديدة جديدة باتباع بنية i18n الموثقة ومفاتيح الرسائل المطلوبة.
توحيد عملية البناء
تأسيس أوامر تطوير وبناء متسقة عبر الفريق لمشاريع امتدادات المتصفح.
جرّب هذه الموجهات
شرح بنية دليل browser/ لامتدادات WXT وأين تضع النصوص البرمجية الخلفية والنصوص البرمجية للملفات والتكوين.
أرني كيفية إضافة موقع لغوي جديد إلى الامتداد، بما في ذلك بنية المجلدات المطلوبة ومفاتيح الرسائل المطلوبة.
ما الأوامر التي تبني الامتداد لـ Chrome وFirefox وEdge، وما الاختلافات الرئيسية التي يجب أن أعرفها؟
سرد أوامر npm الأساسية لتطوير واختبار وتنظيف امتدادات المتصفح المستندة إلى WXT.
أفضل الممارسات
- الحفاظ على فصل واضح بين مسؤوليات النصوص البرمجية الخلفية والنصوص البرمجية للمحتوى
- تحديث جميع ملفات اللغات عند إضافة مفاتيح رسائل جديدة
- الاختبار في كل من Chrome وFirefox أثناء التطوير
تجنب
- تعديل الملفات في دليل .output مباشرة
- استخدام واجهات برمجة التطبيقات الخاصة بالمتصفح بدون فحوصات توافق
- إضافة ملفات لغوية غير مكتملة مع مفاتيح مفقودة مطلوبة