إنجاز Google chrome extension من خلال Next.js أو React

يمكن ذلك بالطبع ستجد ٌقالب للمشروع كمثال هنا لبدء التطوير مباشرًة من خلال Next.js.

• next-chrome-starter

والفكرة تتمحور حول ملف ملف البيان manifest.json الخاص بإضافات جوجل كروم، حيث يحدد بيانات تعريف الإضافة، مثل الاسم، الإصدار، الوصف، و أيضًا الأذونات التي تحتاجها الإضافة للعمل، مثل الوصول إلى علامات التبويب أو تخزين البيانات.

{
"manifest_version": 3,
"name": "MyChromeExtension",
"version": "1.0",
"description": "A Chrome extension built with Next.js",
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "index.html"
}
}

وملفات JavaScript التي سيتم تشغيلها في الخلفية أو في صفحات الويب، وللعلم يجب إنشاء ذلك الملف في مجلد public في مشروع Next.js.

والملفات التالية أيضًا:

• Background Scripts  ملفات JavaScript تعمل في الخلفية بشكل مستمر لمعالجة المهام طويلة الأمد وإدارة حالة الإضافة وتتواصل مع أجزاء أخرى من الإضافة باستخدام واجهات برمجة تطبيقات كروم (Chrome APIs).
•  
• Content Scripts ملفات JavaScript يتم حقنها في صفحات الويب التي يزورها المستخدم للتفاعل مع صفحات الويب، مثل تعديل محتوى الصفحة (DOM) أو تنفيذ إجراءات أخرى.
• Popup and Options Pages توفر واجهة المستخدم للتفاعل مع الإضافة، وهنا نستخدم Next.js لتبسيط تطوير  الواجهات من خلال ميزات مثل العرض من جانب الخادم (SSR) وواجهات برمجة التطبيقات (API routes).

بالنسبة لرياكت يمكنك إيجاد قالب مباشر للبدء منه من خلال هذا الرابط: رياكت كروم starter على موقع غيتهاب.

فمن خلال رياكت يمكنك بناء واجهة الإضافة واستخدامها لتطوير إضافة كروم فستحتاج إلى إعداد رياكت ليعمل داخل بيئة إضافة كروم لذا هناك بعض الخطوات التي يجب اتباعها مثل إعداد manifest.json ودمج تطبيق رياكت مع الإضافة أولا تقوم بإنشاء تطبيق رياكت كالمعتاد باستخدام create-react-app كالتالي:

npx create-react-app chrome-extension

يمكنك تسمية المشروع كما تشاء مثلا هنا أنا اخترت اسم chrome-extension.

بعدها نقوم بالتعديل على ملف manifest.json قبل ذلك يجب أن ننشئ مجلد باسم public داخل مجلد المشروع في حالة لم يكن موجودا ونضيف داخله ملف json وهو الذي يحتوي على إعدادات الإضافة التالية:

{
  "manifest_version": 3,
  "name": "My Chrome Extension",
  "version": "1.0",
  "description": "A Chrome extension using React",
  "action": {
    "default_popup": "index.html"
  },
  "permissions": []
}

لكن ريكات يستخدم Webpack للتجميع، لذلك ستحتاج إلى تعديل إعدادات Webpack لتوافق مع بيئة الإضافة ثم بناء المشروع من خلال استخدام الأمر التالي:

npm run build

وأما بالنسبة ل NodeJs فلا يمكن تشغيله مباشرة داخل إضافة كروم، لأن إضافات كروم تعمل فقط ضمن بيئة جافا سكريبت للمتصفح لكن يمكنك استخدام Node.js إذا كنت بحاجة إلى تشغيل خادم خارجي يتواصل مع الإضافة كال API أو لمعالجة البيانات بحيث يمكنك بناء خادم ودمجه مع إضافة كروم عبر الـ HTTP Requests باستخدام fetch أو axios.