في هذه السلسلة من المقالات ، أود أن أتحدث عن تجربتي في كتابة امتداد ويب للمتصفحات. لدي بالفعل خبرة في إنشاء امتداد الويب ، والذي تم تثبيته بواسطة حوالي 100000 من مستخدمي Chrome ، الذين عملوا بشكل مستقل ، ولكن في هذه السلسلة من المقالات قررت الخوض في عملية تطوير امتداد الويب من خلال دمجها بإحكام مع جانب الخادم.




الجزء 2 ، الجزء 3 ، الجزء 4

فكرة لامتداد الويب

يواجه كل مطور مهام العمليات الآلية في المتصفح. مرة واحدة بالنسبة لي كانت المهمة هي جمع أعضاء مجموعات من موضوع معين على LinkedIn و Facebook.

قبل ذلك ، كانت لدي خبرة في كتابة حلول محلل الويب في php ، لكن هذه المواقع تستخدم العديد من العناصر الديناميكية وقد تحول تركيز الحل لهذه المهمة بشكل خاص إلى التفاعل مع موارد الويب من خلال المتصفح.

بالطبع ، لم أكن لأنتهك الاتفاقية المتعلقة بتقديم الخدمات (الشروط والأحكام) ، لذا فإن ما تم وصفه أدناه هو صورة نقية من مخيلتي ولا يوصى بتنفيذها.

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

بعد البحث عن حلول الطرف الثالث ، اخترت iMacros لهذه المهمة. هذا الملحق له لغته الخاصة لكتابة وحدات الماكرو. بطريقة ما قمت بتكييفها لحل المشكلة مع LinkedIn. اضطررت إلى تنزيل الإصدار القديم من Mozilla Firefox ، نظرًا لأن الامتداد لم ينجح في تنفيذ هذا المتصفح متعدد الخيوط.

أثناء البحث عن حلول تابعة لجهات خارجية ، صادفت الكثير من الأشكال المختلفة لمحلل الويب ، وزاحف الويب ، ومكشطة الويب ، وما إلى ذلك. وقد ركز الكثيرون على المواقع التي تحتوي على التنقل بين الصفحات ، وليس على المحتوى الديناميكي. اقترحت بعض الحلول تثبيت حل برمجي لنظام التشغيل ، ثم استخدام ملحق ويب لمثل هذا المجمع. لقد صادفت أشياء متخصصة للغاية ، على سبيل المثال ، لجمع المشاركين فقط على Facebook.

بعد كل العذاب ، كانت لدي فكرة "اختراع دراجتي" لأتمتة المهام في المتصفح. من بين المتطلبات الإلزامية لإضافتي على الويب ، أبرزت:

1. العمل في أقصى عدد من متصفحات الويب ، بما في ذلك الهاتف المحمول.
2. استخدام لغة البرمجة النصية القياسية للمتصفحات هو جافا سكريبت.
3. استخدام ملفات البيانات الخاصة بك في البرامج النصية.
4. القدرة على حفظ البيانات الواردة من البرنامج النصي إلى ملف.
5. يجب أن تكون البرامج النصية عامة أو خاصة. إذا كان النص عامًا ، فيجب على فريق الأمان التحقق من هذا النص.

أبعد من هذه القائمة ، لاحظت أشياء أكثر تحديدًا لكل عنصر.

1. تحتاج إلى استخدام إطار عمل لكتابة ملحقات الويب لتقليل الجهود المبذولة لتطوير حلول عبر المستعرضات.
2. يتم دعم جافا سكريبت من قبل جميع المتصفحات ، ولكنك تحتاج إلى كتابة مكتبتك الخاصة للتفاعل مع امتداد الويب. يجب أن تحتوي هذه المكتبة على وظائف لحفظ البيانات واسترجاع البيانات من الملفات التي تم تنزيلها وما إلى ذلك.
3. غالبًا ما يكون من الضروري استخدام الإدخال لتشغيل البرنامج النصي. على سبيل المثال ، بيانات التفويض ، ومفاتيح واجهة برمجة التطبيقات ، وقائمة الصفحات التي يجب الزحف إليها ، وما إلى ذلك. يجب تحميل هذه البيانات مباشرة إلى امتداد الويب وتخزينها في السحابة.
4. يعد حفظ البيانات من البرنامج النصي من أكثر الوظائف الضرورية للأتمتة. يجب تحميل البيانات المخزنة إلى ملف csv مباشرة من امتداد الويب ، أو إرسالها إلى بريد المستخدم عند تجاوز حد البيانات للتحميل. على سبيل المثال ، إذا كان تحميل أعضاء المجموعة يزيد عن 10000 ، فقد يستغرق التنزيل من امتداد الويب وقتًا طويلاً. يجب تجنب ذلك عن طريق إنشاء ملف على الخادم.
5. يجب أن يكون لديك واجهة ويب إدارية لفريق الأمان للتحقق من البرامج النصية للمستخدمين الذين وضعوا علامة عامة.

من وقت لآخر ، وجدت المزيد والمزيد من الحلول لنفس المشكلة - تشغيل نصوص مخصصة في متصفح. كل هذه الحلول لا تتناسب مع متطلباتي ، لأنني أردت الحصول على امتداد ويب قادر على إزالة الإعلانات من كل صفحة ؛ تحويل الصفحة وإظهار محتوياتها فقط ، دون ترميز غير ضروري ؛ جمع البيانات من أي صفحة وتحويلها إلى تنسيق مناسب للاستخدام في المستقبل ؛ جمع البيانات بعد فترة زمنية معينة ؛ الخ.

لذلك ، "اشتعلت فيها النيران" بغضب من خلال إنشاء ملحق لتشغيل البرامج النصية المخصصة لأقصى مجموعة من المهام.

اختيار إطار عمل ملحق ويب

نظرًا لأنني استهدفت في البداية أقصى عدد من متصفحات الويب ، فقد كنت بحاجة إلى إطار عمل لبناء ملحقات عبر المتصفحات. يمكننا أن نلاحظ على الفور حقيقة أنه لا يوجد ببساطة مثل هذا الإطار. نظرًا لأن العديد من المتصفحات ، على الرغم من أنها تعمل بهذه الطريقة وتوفر ملحقات ويب مع واجهة برمجة تطبيقات مماثلة للتفاعل ، تختلف بشكل أساسي.

اضطررت إلى التخلي عن الإصدار الأولي من دعم متصفح الجوال على الفور تقريبًا. نظرًا لأنه لا يوجد مثل هذا المتصفح لا يوفر القدرة على استخدام ملحقات الويب. صادفت إشارة واحدة فقط لدعم ملحقات الويب في متصفح Dolphin ، ولكن لم أتمكن من العثور على معلومات تفصيلية على الموقع الرسمي. تقرر التخلي عن هذه الفكرة المشرقة.

عند كتابة الملحق القديم ، استخدمت إطار عمل الكانجو. في عام 2013 ، كانت مريحة قدر الإمكان. على الرغم من دون دعم Internet Explorer.

نظرًا لأن إضافتي يمكن أن تعمل كملف مرجعي ، لم أكن مهتمًا بهذه الحقيقة واخترت هذا الإطار ، والذي كان في وقته هو الحل المثالي لتطوير عبر المتصفح.

منذ ذلك الحين ، ظهرت مشاريع أخرى حددت لنفسها هدف التطوير عبر المتصفح لإضافات الويب. لقد وجدت كل هذه المشاريع في مرحلة مبكرة من التطوير. تم تبسيط مهمتهم منذ ذلك الحين ، حيث بدأ Mozilla Firefox في استخدام WebExtensions API ، مما جعل من الممكن بسهولة تحويل ملحقات Chrome إلى ملحقات لمتصفح Firefox.

كانت ملحقات متصفح Opera في عام 2013 متوافقة مع ملحقات Chrome. تعمل امتدادات Safari الآن فقط مع MacOs ، لأن الدعم لنظام Windows الأساسي لمتصفح Safari نفسه توقف منذ فترة طويلة.

يعمل متصفح Tor على محرك Mozilla Firefox القديم وبالتالي يدعم ملحقات الويب xpi ، التي تخلت عنها مؤسسة Mozilla لصالح تقنية Web Extension.

في الأساس ، يقوم إطار عمل kango تقريبًا بعمله حتى يومنا هذا ، حيث يقوم بإنشاء ملحقات ويب لجميع المتصفحات باستثناء Internet Explorer. ولكن نظرًا لأن الكثير من الوقت قد انقضى ويعمل Firefox الآن على آلية مشابهة لـ Chrome ، فإن kango يقوم بإنشاء نفس الحزمة لمتصفحين. كان علي تعديل الجيل لمتصفح فايرفوكس قليلاً وإضافة الجيل لتور.

نظرًا لأن حالة مشروع إطار عمل kango غير واضحة ، بالإضافة إلى ترخيص الرمز ، لا يمكنني نشر التغييرات في المجال العام. إذا سمح أصحاب حقوق النشر بإصدار الإصدار 1.9.0 بكود مفتوح المصدر ، فسأكون سعيدًا للمساعدة في هذا التعهد.

تحتوي جميع امتدادات الويب على نقطتين للعمل مع البيانات. يسمح لك ملف content.js بمعالجة DOM ، بينما تسمح لك background.html بالعمل مع بيانات الخلفية وتفاعل الخادم. يحدث الاتصال بين هاتين النقطتين من خلال آلية الرسائل.

وبالتالي ، لتعديل DOM مع البيانات من جانب الخادم ، نحتاج إلى الحصول عليها من background.html واستخدامها في content.js من خلال آلية تمرير الرسائل

لم تنجح هذه الآلية المثالية في حالتي لعدد من الأسباب. لذلك ، تركت في background.js فقط منطق العمل مع النوافذ المنبثقة وزر ملحق الويب في المتصفح.
منطق أي امتداد ويب مع نافذة منبثقة هو نفسه. من خلال النقر على الزر ، نعرض فقط النافذة المنبثقة ، عند النقر الثاني ، أغلق.

يوفر إطار عمل Kango للمطور واجهة موحدة للتفاعل ، ثم يترجم كود امتداد الويب المكتوب إلى امتداد الويب لمتصفح ويب معين ، وبالتالي يوفر الكثير من الوقت في تطوير امتدادات الويب عبر المتصفح.

في المقالة التالية ، سأتحدث عن اختيار "إطار جانب الخادم من امتداد الويب وواجهة امتداد الويب"