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



الجزء الأول ، الجزء الثاني ، الجزء الثالث

المهام المجدولة

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

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

باستخدام ملحق الويب ، يمكنك تعيين التردد المطلوب لاستلام البيانات من خلال برنامج نصي لطلب أسعار الصرف. يقبل ملحق الويب سلسلة في شكل تيجان كمدخل ، وبالتالي ، للحصول على أسعار الصرف في الوضع اليومي ، يجب عليك تحديد * * / 1 * * *.

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

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

console.log('script is ended'); 

باستخدام هذا الأمر ، يمكن للبرنامج النصي للمستخدم إغلاق عملية خادم Chromium التي تم إنشاؤها بواسطة Puppeteer. يتم تنفيذ ذلك من خلال تتبع حدث "وحدة التحكم" Puppeteer:

 //initialize browser and page page.on('console', async msg => { for (let i = 0; i < msg.args().length; ++i) { if(await msg.args()[i].jsonValue() == 'script is ended') { await browser.close(); } } }); 

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

 const timeLimitCron = 30; const timeout = setTimeout(async () => { if(browser) { await browser.close(); } clearTimeout(timeout); }, timeLimitCron * 1000 ); //time limit for cron, then forced closing, default 30 seconds 

نظرًا لأن برنامج جدولة المهام يعمل على جانب الخادم ، وغالبًا ما يحتاج المستخدم إلى استخدام عنوان IP معين ، فقد تمت إضافة خيار لاستخدام خادم وكيل.



يمكن للمستخدم أيضًا تنزيل أحدث سجل رسائل من وحدة تحكم Puppeteer. على سبيل المثال ، من الملائم التحقق من التشغيل الصحيح للخادم الوكيل.

اختصارات لوحة المفاتيح

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

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

كما هو موضح أعلاه ، تسمح لك إضافة الويب بالعمل مع DOM من خلال content.js ، ولكن لا يمكن استخدام كائن النافذة ، على سبيل المثال ، لتخزين المعلمات ، لأنها ليست كائن نافذة في علامة تبويب مفتوحة. يقيد هذا الشرط تشغيل امتداد الويب ككائن لتتبع ضغطات المفاتيح.

في المشكلة التي يتعين حلها ، من الضروري نقل "مفاتيح التشغيل السريع" من واجهة امتداد الويب إلى جانب الخادم للتخزين. بعد ذلك ، في كل مرة تقوم فيها بتحميل صفحة موارد ويب ، احصل على قائمة "مفاتيح التشغيل السريع" وقم بتحميل برنامج نصي للمستخدم بعد النقر فوق التركيبة الصحيحة. يتم استخدام Hotkeys.js كمكتبة للعمل مع مفاتيح التشغيل السريع .

بعد استلام قائمة مفاتيح التشغيل السريع من جانب الخادم ، يتم تنفيذ التعليمات البرمجية التالية:

 var hotKeysMap = {keys: [], id: []}; for(var i in data.response.data) { hotKeysMap.keys.push(data.response.data[i]['hotkeys']); hotKeysMap.id.push(data.response.data[i]["_id"]); } if(hotKeysMap.keys) { getScript("hotkeys.js", function() { var script = document.createElement("script"); script.setAttribute("class", "gCore-hotKeys"); script.setAttribute("data-endpoint", event.data.endPoint); script.setAttribute("data-token", event.data.token); script.setAttribute("data-userid", event.data.userId); script.innerHTML = "GChotKeys = JSON.parse(\"" + JSON.stringify(hotKeysMap).replace(/"/g, "\\\"") + "\");\n" + "hotkeys(GChotKeys.keys.join(','), function(event, handler) {" + " event.preventDefault();" + " localStorage.setItem('runHotKeysScript', GChotKeys.id[GChotKeys.keys.indexOf(handler.key)]);" + "});"; document.body.appendChild(script); }); } 

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

سبق ذكره أعلاه أن هناك مشكلة في الاتصال بين الصفحة المفتوحة لمورد الويب والنص البرمجي extension.js لملحق الويب ، والتي يتم استخدامها للتلاعب في DOM. في هذه الحالة ، يمكنك اللجوء إلى تقنية بسيطة للتحقق من القيمة في localStorage ، وهو كائن شائع لنقطتي التفاعل المذكورة أعلاه.

في content.js ، يمكنك ببساطة التحقق من قيمة التخزين المحلية مرة واحدة في الثانية وتنفيذ نفس عمليات معالجة DOM كما هو الحال عند النقر على الزر "تنفيذ" في ملحق الويب المنبثق.

 setInterval(function() { if(localStorage.getItem('runHotKeysScript')) { // run user script localStorage.removeItem('runHotKeysScript'); } }, 1000); 

وبالتالي ، يتم تنفيذ تقنية "مفاتيح التشغيل السريع" ، والتي تتيح لك تشغيل البرامج النصية للمستخدم بسرعة باستخدام قوة المكتبة الداخلية لحل المشكلات العملية.

الخلاصة

أثناء تنفيذ هذا المشروع ، تم حل المهام العملية لكتابة التكامل بين جزء الخادم القائم على meteor.js وملحق الويب عبر المتصفح. كانت العوائق الرئيسية هي SCP وعمليات التفاعل بين المكونات الثلاثة لجزء العميل - الصفحة المفتوحة في المتصفح ، ونصوص content.js و background.js.

آمل أن تسهل تجربتي كتابة المزيد من ملحقات الويب عبر المتصفحات المتخصصة.

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