highlighter chrome extension

ماركيت هيغليغتر

هذا رابط امتداد Chrome يتيح لك تمييز النص المهم في أي صفحة ويب. قم بزيارة الصفحة مرة أخرى خلال دقيقة واحدة أو أسبوع واحد أو عام واحد - ستكون بياناتك موجودة دائمًا.

التقنيات

1. (فانيليا) جافا سكريبت
2. جوجل API

سمات

1. قم بتمييز أي نص واضغط على Command+K لحفظه تلقائيًا
2. يمكن للمستخدم مسح التمييزات المخزنة لأي عنوان URL باستخدام أمر واحد بسيط، Command+Shift+A
3. المزامنة عبر جميع الأجهزة - إذا قمت بتمييز نص من جهاز كمبيوتر محمول، ثم نظرت إلى نفس صفحة الويب من هاتفك، فستكون العناصر المميزة هناك (إذا قمت بتسجيل الدخول إلى Chrome على كليهما).

بنية البيانات المخزنة (الكائن)

 highlights = {
    google.com: {
        text1: ["query selector", index, note, color]
        text2: ["query selector", index, note, color]
    },
    yahoo.com: {
        text3: ["query selector", index, note, color],
        text4: ["query selector", index, note, color]
    },
    https://developer.mozilla.org/en-US/docs/Web/API/document/execCommand: {
        "When an HTML document has been switched to designMode, its document object exposes an execCommand": ["p.summary", 20],
        "A DOMString specifying the name of the command to execute. See Commands for a list of possible commands.": ["p", 0, "example note", #CFFFDF]
    }
}

كيف يعمل

لدي نصين يتم تحميلهما في كل صفحة. الأول هو الخلفية.js الذي يستمع لحدث معين. يقوم الحدث Command+K بتشغيل وظيفة تقوم بإدخال برنامج نصي في المتصفح (injection_script.js)، والذي يسلط الضوء على النص المحدد.

لتمييز النص، اسحب مؤشر الماوس فوق بعض النص، ثم اضغط على Command+K. يؤدي هذا إلى تشغيل وظيفة تستدعي عدة وظائف أخرى. تسلسل الأحداث:

1. الاستيلاء على النص المحدد
2. يقوم بتشغيل وضع التصميم، مما يسمح لنا بإجراء تغييرات مؤقتة على DOM
3. إذا كانت الخلفية مظللة بالفعل، فسنحتاج إلى إزالة التمييز:
   1. تحديد علامة <span> المحيطة بالنص وتعيين style.backgroundColor = شفاف (إزالة التمييز)
   2. يحصل على كائن "الإبرازات" من وحدة التخزين - chrome.storage.get()
   3. يتكرر عبر جميع المفاتيح (وهي النقاط البارزة المحفوظة) للبحث عن تطابق، ويحذفها من وحدة التخزين
4. بخلاف ذلك، قم بلف النص في <span> وقم بتطبيق لون الخلفية
5. عند تحديث الصفحة: استرداد "الإضاءات" من وحدة التخزين
   1. إذا لم تكن هناك بيانات لعنوان URL النشط، فاضبط المفتاح على عنوان URL الحالي والقيمة على كائن فارغ (aol.com: {})
   2. إذا كان هناك، فاحصل على بنية البيانات المميزة من وحدة التخزين (chrome.storage.get())
6. استرداد وتعيين قيمة محدد استعلام صالحة للنص المحدد (سيتم استخدام هذا للاستعلام عن DOM وتطبيق الإبرازات لاحقًا. ارجع إلى بنية الكائن أعلاه للتوضيح)
   1. إذا كان العنصر الأصلي للنص المميز له اسم فئة، فقم بتخزين سلسلة "element.className" ("p.firstParagraph"، "h2.sectionHeader"، إلخ)
   2. إذا لم يكن هناك اسم فئة، قم بتخزين السلسلة "العنصر" ("p"، "h2"، "li"، إلخ)
7. أعط المفتاح (النص المميز) قيمة (مصفوفة تحتوي على قيمتين - الأولى، محدد الاستعلام والثانية، فهرس مكان ظهور النص المحدد في العنصر الأصلي)
   1. أقوم بتخزين فهرس السلسلة لأنه إذا قمت فقط بتخزين محدد النص والاستعلام، فلنفترض أنك قمت بتمييز "the" ضمن علامة "p"، عند تطبيق التمييزات إذا قمت بتحديث الصفحة، فإن كل تكرار لـ "the" في سيتم تمييز العلامة "p". تتيح لي إضافة قيمة IndexOf التحقق من تطابق الفهارس مع DOM وبعد ذلك فقط قم بتطبيق التمييز، لذلك أقوم بتطبيق التمييز على الكلمة الصحيحة.
8. قم بتخزين متغير الإبرازات المحدث الذي يحتوي على النص المميز الجديد باستخدام chrome.storage.set()
9. قم بإيقاف تشغيل وضع التصميم

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

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

إذا كانت هناك ميزات مميزة مخزنة لعنوان URL:

1. يتم تشغيل الدالة ApplyHighlights()
2. يستغرق الأمر معلمتين، كائن "الإبرازات" وعنوان URL النشط
3. حلقات من خلال مفاتيح الكائن المخزن (المفاتيح هي النقاط المميزة المخزنة، في حين أن قيم هذه المفاتيح عبارة عن مصفوفة تحتوي على قيم querySelector وindexOf)
4. يُنفِّذ التابع document.body.querySelectorAll()‎ للحصول على مصفوفة من جميع العقد المتطابقة
5. يتكرر عبر كل عقدة تم إرجاعها وإذا كان HTML الداخلي يحتوي على "سلسلة" تطابق مفتاح الكائن (النص المميز) وبنفس قيمة الفهرس: 1. يقوم بتشغيل وظيفة .replace() لتغليف النص المطابق في علامة <span > بعلامة سمة النمط المضمنة للون الخلفية

• ملاحظة جانبية: لقد قمت في الأصل بمراجعة كل عقدة DOM بشكل متكرر للتحقق من التطابقات، ولكن تخزين قيمة querySelector ومقارنة قيم HTML للعقد المطابقة فقط مع القيم المخزنة الخاصة بي يكون أسرع بكثير.

ترقيات للإصدار التالي

1. قم بتخزين السلسلة المحددة التي أبرزتها

• "قم بتنزيل مكتبة jQuery من jQuery.com".
• إذا قمت بتمييز "jQuery" الثاني، فستكون القيمة المخزنة في المقام الأول.
• وذلك لأن قيمة IndexOf التي أقوم بتخزينها تعود بعد المطابقة الأولى
• PLAN - ابدأ في حساب الفهرس بعد علامة الامتداد

2. لا يمكن التمييز بين عناصر الكتلة (إذا قمت بسحب التمييز من علامة h2 إلى علامة ap، فسيتم تسجيل h2 فقط)
3. قيد التقدم: اسمح للمستخدمين باختيار لون التمييز

• حاليا الثابت مشفرة

4. اجعل عدد النقاط البارزة والميزات الفعلية لصفحة ما يظهر في الامتداد popup.html
5. القيود/حالات الحافة: البريد الإلكتروني وملفات PDF
6. أطلب أذونات لكل موقع. التي تقوم بعض المواقع بحظر وصول "*" إليها (cnn.com)
7. إذا قمت بتمييز "jQuery" في عنصر واحد، فقم بتمييزه مرة أخرى في عنصر آخر، وسيتجاوز العنصر الثاني الأول (لأن المفتاح هو نفسه)
8. إذا كان العنصر الأصلي عبارة عن علامة مضمنة، فلن يتم تسجيل مؤشر النص الداخلي/html (-1) أو أنه ينهي التمييز في نهاية العلامة المضمنة، ابحث عن فهرس علامة الامتداد وابدأ الفهرس هناك
9. وضع الانهيار - قم بطي المستند إلى العناصر الرئيسية للإبرازات المخزنة فقط

مشاكل محلولة

1. تخزين النقاط البارزة التي تمتد عبر علامات العناصر المضمنة (a، em، st، إلخ.)

• من قبل، تم حفظ النص الموجود قبل العلامة المضمنة فقط، لأنني قمت بتخزين النص الداخلي
• لقد قمت بحلها عن طريق تخزين ملف HTML الداخلي بدلاً من ذلك
• كانت المشكلة التي نشأت من هذا التغيير هي أنني كنت أقوم بتخزين فهرس النص الداخلي، والذي من شأنه إعادة تطبيق الإبرازات على النص القياسي داخل عنصر النص، مثل علامة "p". لكن مؤشر IndexOf يختلف بالنسبة للعناصر المحيطة بالعناصر المضمنة لأن مؤشر IndexOf يحسب كل حرف في العلامات.
• لحل هذه المشكلة، أقوم بمقارنة قيم InternalText.indexOf وInnerHTML.indexOf ومقارنة كل منهما بالعقد المطابقة عند تطبيق التمييزات على الصفحات التي يزورها المستخدم مرة أخرى.

2. إذا قمت بالنقر المزدوج لتسليط الضوء على قسم ما، فلن يتم تسجيل قيم فهرس، وبالتالي لن يتمكن تطبيقي من إعادة تطبيق التمييزات

• لحلها أضفت أساليب .toString() و .trim() إلى ملف IndexOf(...)

3. سيؤدي تمييز علامة <a> إلى إزالة الارتباط عند تحميل الصفحة.

ترقيات المستقبل

## صورة المثال

حالات الحافة

1. إذا تغيرت أسماء الفصول
   • الحل: إذا كان اسم الفئة غير موجود في DOM، فقم بإزالة اسم الفئة من محدد الاستعلام وابحث فقط في عقد علامة العنصر
2. إذا تم إخفاء المحتوى بواسطة زر، فلن يتم تسجيل العناصر المميزة الخاصة بي قبل أن يتم البحث عند_التحميل ولا يتم الكشف عن المحتوى إلا بعد حدث المتصفح (ولهذا السبب لا يعمل على البريد الإلكتروني)

السماح لشخص ما بالوصول إلى جميع العناصر المميزة في popup.html السماح للمستخدمين بتغيير لون قلم التمييز إصلاح خطأ تمييز العنصر المضمّن