إضافات Chrome: توسيع واجهة برمجة التطبيقات لإتاحة التنقل الفوري

Dave Tapuska

نصّ مختصر (TL;DR): تم تعديل واجهة برمجة تطبيقات الإضافات لإتاحة استخدام ميزة "التخزين المؤقت للصفحات". التحميل المسبق لعمليات التنقل. يُرجى الاطّلاع على التفاصيل أدناه.

يعمل Chrome بجد لجعل التنقل سريعًا. التنقل الفوري تقنيات مثل ميزة "التخزين المؤقت للصفحات" (يتم الشحن على الكمبيوتر المكتبي في Chrome 96) وقواعد التوقُّع (shipped في Chrome 103) تحسِّن من الرجوع والمضي قدمًا المستخدم. سنتعرّف في هذه المشاركة على التحديثات التي أجريناها على المتصفّح. الإضافات لاستيعاب مهام سير العمل الجديدة هذه.

فهم أنواع الصفحات

قبل طرح ميزة "التخزين المؤقت للصفحات" و"العرض المسبق"، كانت تتوفّر تجربة تحتوي علامة التبويب على صفحة نشطة واحدة فقط. ودائمًا كانت هذه البيانات ظاهرة. إذا يعود المستخدم إلى الصفحة السابقة، فسيتم إتلاف الصفحة النشطة (الصفحة ب) وستتم إعادة إنشاء الصفحة السابقة بالكامل (الصفحة أ). لم تكن الإضافات بحاجة إلى القلق بشأن جزء صفحات دورة الحياة الذي تم لأنه لم يكن هناك سوى علامة تبويب واحدة، وهي الحالة النشطة/المرئية.

من خلال ميزة "التخزين المؤقت للصفحات" وميزة "العرض المُسبَق"، لن تكون هناك مرحلة واحدة لواحد العلاقة بين علامات التبويب والصفحات. الآن، تقوم كل علامة تبويب بالفعل بتخزين العديد الصفحات والصفحات تنتقل بين الحالات بدلاً من أن تتعرض للتلف لإعادة البناء.

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

لاحظ أن علامة التبويب يمكن أن تحتوي على سلسلة من الصفحات المعروضة مسبقًا (وليس صفحة واحدة فقط)، نشطة (مرئية)، وسلسلة من الصفحات المخزّنة مؤقتًا للخلف/إعادة التوجيه.

ما الذي سيتغيّر بالنسبة إلى مطوّري الإضافات؟

رقم تعريف الإطار == 0

في Chromium، نشير إلى الإطار العلوي/الرئيسي باعتباره الإطار الأبعد.

مؤلفو الإضافة الذين يفترضون frameId من الإطار الأبعد هو 0 (إحدى أفضل الممارسات السابقة) قد تحدث مشكلات. نظرًا لأنه يمكن أن تحتوي علامة التبويب الآن على العديد من الإطارات الخارجية (المعروضة مسبقًا والمحفوظة مؤقتًا في ذاكرة التخزين المؤقت) الصفحات)، مع افتراض أن هناك واحدًا خارجيًا إطار علامة التبويب غير صحيح. سيظل frameId == 0 يمثّل الإطار الخارجي للصفحة النشطة، لكن الإطارات الأبعد من وتكون الصفحات الأخرى في علامة التبويب نفسها بقيمة غير صفرية. يحتوي الحقل الجديد frameType على تمت إضافة لحل هذه المشكلة. راجِع القسم "كيف أحدد ما إذا كان الإطار هو الإطار الأبعد؟" في هذه المقالة.

دورة حياة الإطارات مقابل المستندات

هناك مفهوم آخر يمثل مشكلة بالنسبة إلى الإضافات وهو دورة حياة الإطار. يستضيف إطار المستند مستندًا (مرتبطًا بعنوان URL ملتزم). يمكن أن يتغير المستند (مثلاً من خلال التنقل)، ولكن لن يتغير frameId، وبالتالي يصعب إقران شيء ما حدث في مستند معين به frameIds فقط. نحن بصدد تقديم مفهوم documentId وهي معرّف فريد لكل مستند إذا تم التنقل في إطار يفتح مستندًا جديدًا سيتغيّر فيه المعرِّف. هذا الحقل مفيد تحديد وقت تغيير الصفحات لحالة دورة حياتها (بين Prerender/active/cache) لأنّها تظل كما هي.

أحداث التنقّل على الويب

الأحداث في مساحة الاسم chrome.webNavigation يمكن أن تطلق عدة مرات على الصفحة نفسها اعتمادًا على دورة حياتها. عرض "كيف يمكنني معرفة دورة الحياة التي تتواجد بها الصفحة؟" وقسم "كيف يمكنني تحديد وقت انتقال الصفحة؟".

كيف يمكنني معرفة دورة حياة الصفحة؟

DocumentLifecycle النوع إلى عدد من واجهات برمجة تطبيقات الإضافات حيث تم وضع frameId المتوفرة مسبقًا. في حال توفُّر النوع DocumentLifecycle في حدث (مثل onCommitted) وقيمته هي الحالة التي تم إنشاء الحدث فيها. يمكنك دائمًا الاستعلام معلومات من WebNavigation getFrame() وgetAllFrames() ولكن يُفضّل دائمًا استخدام القيمة الواردة في الحدث. إذا كنت تستخدم في أي من الطريقتين، ينبغي الانتباه إلى أن حالة الإطار قد تتغير بين وقت وقوع الحدث ومتى يتم حل الوعود بكلا الطريقتين.

DocumentLifecycle القيم التالية:

• "prerender بوصة : لا يتم عرضها حاليًا للمستخدم، ولكنها تستعد لإمكانية عرضها للمستخدم.
• "active": يتم عرضه حاليًا للمستخدم.
• "cached": يتم تخزينها في ذاكرة التخزين المؤقت من خلال ميزة "التخزين المؤقت للصفحات".
• "pending_deletion": يجري إتلاف المستند.

كيف أحدّد ما إذا كان الإطار هو الإطار الخارجي؟

في السابق، ربما تحقّقت الإضافات مما إذا كان frameId == 0 لتحديد إذا كان الحدث يقع في الإطار الأبعد أو لا تحتوي على صفحات متعددة لدينا الآن في علامة تبويب عدة إطارات خارجية، لذا فإن تعريف frameId يمثل مشكلة. لن تتلقّى أبدًا أحداثًا حول عملية "التخزين المؤقت للصفحات" الإطار. ومع ذلك، بالنسبة إلى اللقطات المعروضة مُسبقًا، سيكون frameId بقيمة غير صفرية للإطار الخارجي. لذا فإنّ استخدام frameId == 0 كإشارة وتحديد ما إذا كان الإطار الخارجي غير صحيح.

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

• "outermost_frame": يُشار إليه عادةً باسم الإطار العلوي. لاحظ أن إلا أن هناك مضاعفات منها. على سبيل المثال، إذا كان لديك نسخة معروضة مسبقًا ومحفوظة مؤقتًا لكل صفحة منها إطار خارجي يمكن أن يسمى بالإطار العلوي.
• "fenced_frame": محجوزة للاستخدام في المستقبل
• "sub_frame": إطار iframe عادةً

يمكننا الجمع بين DocumentLifecycle وFrameType وتحديد ما إذا كان الإطار الإطار الخارجي النشط. مثل: tab.documentLifecycle === “active” && frameType === “outermost_frame”

كيف يمكنني حل مشاكل مدّة الاستخدام في الإطارات؟

كما ذكرنا أعلاه، يستضيف الإطار مستندًا وقد ينتقل الإطار إلى نافذة المستند، ولكن لن تتغير frameId. يؤدي هذا إلى حدوث مشكلات عندما يمكنك تلقّي حدث باستخدام frameId فقط. إذا بحثت عن عنوان URL في الإطار قد يكون مختلفًا عن وقت وقوع الحدث، وهذا ما يسمى مشكلة وقت الاستخدام.

لحلّ هذه المشكلة، أطلقنا documentId. (وparentDocumentId) وظيفة webNavigation.getFrame() تجعل الطريقة الآن frameId اختيارية إذا تم توفير documentId. تشير رسالة الأشكال البيانية سيتم تغيير documentId عند التنقّل في إطار.

كيف أحدِّد وقت انتقال الصفحة؟

هناك إشارات صريحة لتحديد وقت انتقال الصفحة بين الحالات.

لنلقِ نظرة على أحداث WebNavigation.

عند التنقّل للمرة الأولى في أيّ صفحة، سترى أربعة أحداث بالترتيب. الواردة أدناه. لاحظ أن هذه الأحداث الأربعة يمكن أن تحدث بواسطة حالة DocumentLifecycle إما "prerender" أو "active".

onBeforeNavigate
onCommitted
onDOMContentLoaded
onCompleted

وقد تم توضيح ذلك في المخطَّط أدناه الذي يوضّح تغيير documentId إلى "xyz" عندما تصبح الصفحة المعروضة مُسبقًا هي الصفحة النشطة.

عندما تنتقل صفحة من ذاكرة التخزين المؤقت للخلف/للأمام أو العرض المسبق إلى الحالة النشطة ستكون هناك ثلاثة أحداث أخرى (ولكن مع DocumentLifecyle هو "active").

onBeforeNavigate
onCommitted
onCompleted

لن يطرأ أي تغيير على documentId كما هو الحال في الأحداث الأصلية. هذا هو كما هو موضح أعلاه عندما يتم تفعيل documentId == xyz. لاحظ أن يتم تنشيط أحداث التنقّل نفسها، باستثناء onDOMContentLoaded. الحدث لأنه تم تحميل الصفحة من قبل.

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