الصفحة الرئيسية>موارد بناء الموقع>بيانات الموقع
تنزيل

ويب الاندماج

بداية امتداد الويب لإنشاء "اكتب مرة واحدة تشغيل على أي متصفح" امتداد

؟ ‍ مصنوع من @abhijithvijayan

التبرع: PayPal ، Patreon

❤؟ ️ على github أو تغريدة حول هذا الموضوع.

؟ ‍ React + TypeScript = هذا الفرع

؟ React + JavaScript = Checkout React-JavaScript Branch

؟ HTML + JavaScript = Checkout Master Branch

سمات

  • دعم المتصفح المتقاطع (واجهة برمجة تطبيقات Web-Extensions)
  • توليد المتصفح المصمم خصيصًا
  • البناء التلقائي على تغييرات الكود
  • حزم التلقائيات ملفات بناء محددة
  • تصميم ساس
  • TypeScript بشكل افتراضي
  • وحدات ES6 دعم
  • رد فعل واجهة المستخدم بشكل افتراضي
  • إعادة التحميل الذكي

دعم المتصفح

49 وبعد ذلك ✔ 52 وبعد ذلك ✔ 36 وبعد ذلك ✔ 79 وبعد ذلك ✔ أحدث ✔ أحدث ✔ أحدث ✔

تستخدمها الامتدادات في الإنتاج التي لديها أكثر من 100000 مستخدم.

  • Daily.dev في امتداد Daily.dev
  • قارئ Jiffy في ansh/jiffyreader.com
  • Kutt-Extension في Abhijithvijayan/Kutt-Extension
  • Doubanimdb في Lisongx/Doubanimdb
  • مساعد MOOC في unbyte/mooc
  • Artipub في زحف فريق/artipub

وغيرها الكثير ...

استخدم هذا القالب

قم بإنشاء دليل جديد وتشغيله 

 curl -fsSL https://github.com/abhijithvijayan/web-extension-starter/archive/react-typescript.tar.gz | tar -xz --strip-components=1

بداية سريعة

تأكد من أن لديك

  • Node.js 10 أو لاحقًا

ثم قم بتشغيل ما يلي:

  • npm install لتثبيت التبعيات.
  • npm run dev:chrome لبدء تشغيل خادم التطوير لتمديد Chrome
  • npm run dev:firefox لبدء خادم التطوير لـ Firefox Addon
  • npm run dev:opera لبدء خادم التطوير لتمديد الأوبرا
  • npm run build:chrome لبناء تمديد الكروم
  • npm run build:firefox لبناء Firefox Addon
  • npm run build:opera لبناء تمديد الأوبرا
  • npm run build Builds and Packs Extensions All tire

تطوير

  • npm install لتثبيت التبعيات.

  • لمشاهدة تغييرات الملف في التطوير

    • الكروم
      • npm run dev:chrome
    • Firefox
      • npm run dev:firefox
    • الأوبرا
      • npm run dev:opera

  • تحميل تمديد في المتصفح

  • الكروم

    • انتقل إلى شريط عنوان المتصفح واكتب chrome://extensions
    • تحقق من زر Developer Mode لتمكينه.
    • انقر على زر Load Unpacked Extension…
    • حدد مجلد المتصفحات في extension/ .

  • Firefox

    • قم بتحميل الوظيفة الإضافية عبر about:debugging كإضافة مؤقتة.
    • اختر ملف manifest.json في الدليل المستخرج

  • الأوبرا

    • تحميل الامتداد عبر opera:extensions
    • تحقق من Developer Mode وتحميله على أنه تفريغ من الدليل المستخرج من الامتداد.

إنتاج

  • تقوم npm run build ببناء امتداد لجميع المتصفحات إلى دليل extension/BROWSER على التوالي.

ملاحظة: بشكل افتراضي ، تم تعيين manifest.json مع الإصدار 0.0.0 . سيقوم محمل WebPack بتحديث الإصدار في البناء مع إصدار إصدار package.json . من أجل إصدار إصدار جديد ، قم بتحديث الإصدار في package.json وتشغيل البرنامج النصي.

إذا كنت لا ترغب في استخدام إصدار package.json ، فيمكنك تعطيل الخيار هنا.

توليد متصفح محدد.

تحديث source/manifest.json ملف مع بائع المتصفح مفاتيح البيان 

 {
  "__chrome__name" : "SuperChrome" ,
  "__firefox__name" : "SuperFox" ,
  "__edge__name" : "SuperEdge" ,
  "__opera__name" : "SuperOpera"
}

إذا كان البائع هو chrome فهذا يجمع: 

 {
  "name" : "SuperChrome" ,
}

إضافة مفاتيح إلى بائعين متعددين عن طريق فصلهم مع | في البادئة 

 {
  __chrome|opera__name: "SuperBlink"
}

إذا كان البائع هو chrome أو opera ، فإن هذا يجمع: 

 {
  "name": "SuperBlink"
}

شاهد حزمة ReadMe الأصلية لحزمة wext-manifest-loader لمزيد من التفاصيل

البق

يرجى تقديم مشكلة هنا للاختلاف ، أو الوثائق المفقودة ، أو السلوك غير المتوقع.

conting & typexcript config

  • تكوين ESLINT & أجمل المشترك - @abhijithvijayan/eslint-config
  • تكوين TypeScript المشترك - @abhijithvijayan/tsconfig

رخصة

MIT © Abhijith Vijayan

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل