المستوى: مبتدئ. المقال ده لأي حد كتب HTML وشوية JavaScript قبل كده. مش محتاج خبرة سابقة في الإضافات ولا أدوات build.

اعمل أول Chrome Extension بنفسك: زر يحسب وقت قراءة أي صفحة

في آخر المقال هيكون عندك إضافة متصفح شغّالة بتحط شريط فوق أي صفحة يقولك تقراها في كام دقيقة. كله في أقل من 40 سطر، وبدون أي مكتبة خارجية.

المشكلة باختصار

الإضافات (Extensions) بتبان حاجة معقدة ومحتاجة أدوات كتير. اللي بيحصل فعلاً إن أبسط إضافة مفيدة محتاجة ملفين بس: ملف تعريف وملف JavaScript. هنبني واحدة حقيقية دلوقتي عشان تكسر الحاجز ده، وبعدها أي فكرة تانية هتبقى مجرد تعديل في نفس الهيكل.

الإضافة بتشتغل إزاي؟ الفكرة قبل الكود

تخيّل إنك دخلت مكتبة، وفيه موظف بيقف جنبك ويعدّ صفحات أي كتاب بتفتحه ويقولك: "ده هتخلّصه في ربع ساعة". هو مش بيغيّر الكتاب، بس بيقرا محتواه ويضيف معلومة فوقه. إضافتنا بتعمل نفس الحاجة بالظبط مع صفحات الويب.

علميًا: المتصفح بيسمح لك تحقن كود JavaScript جوّه أي صفحة. الكود ده اسمه content script، وبيشتغل في نفس سياق الصفحة، فيقدر يقرا نصّها ويعدّل على عناصرها زي أي كود بتاع الموقع نفسه. عشان المتصفح يعرف يشغّل الكود ده، بيقرا الأول ملف تعريف اسمه manifest.json بيقوله: الإضافة اسمها إيه، ومين الملف اللي يشتغل، وعلى أنهي صفحات. النسخة الحالية من نظام الإضافات اسمها Manifest V3.

الخطوات

1. اعمل فولدر جديد باسم reading-time.
2. جوّه الفولدر اعمل ملف manifest.json وحط فيه ده:

{
  "manifest_version": 3,
  "name": "وقت القراءة",
  "version": "1.0",
  "description": "يعرض وقت القراءة المتوقّع فوق أي صفحة",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

السطر المهم هو content_scripts: بيقول للمتصفح شغّل content.js على كل الصفحات (<all_urls>).

1. في نفس الفولدر اعمل ملف content.js وحط فيه الكود ده:

(function () {
  // 1) اقرا نص الصفحة كله
  const text = document.body.innerText || "";

  // 2) عدّ الكلمات
  const words = text.trim().split(/\s+/).filter(Boolean).length;

  // 3) اقسم على 200 كلمة/دقيقة (سرعة القراءة المتوسطة)
  const minutes = Math.max(1, Math.round(words / 200));

  // 4) اعمل شريط وحطه فوق الصفحة
  const bar = document.createElement("div");
  bar.textContent = "وقت القراءة: " + minutes + " دقيقة - " + words + " كلمة";
  bar.style.cssText =
    "position:fixed;top:0;left:0;right:0;z-index:2147483647;" +
    "background:#4b7bff;color:#fff;font:600 14px sans-serif;" +
    "padding:8px 14px;text-align:center;";
  document.body.appendChild(bar);
})();

ركز في المنطق: بنقرا النص، نعدّ الكلمات، نقسم على 200، ونعرض النتيجة في شريط ثابت فوق. رقم 200 مش عشوائي؛ متوسط سرعة القراءة الصامتة للبالغين حوالي 238 كلمة/دقيقة حسب مراجعة علمية لـ Brysbaert سنة 2019، وبنستخدم 200 كرقم مبدئي محافظ عشان التقدير ميطلعش أقل من الواقع.

التحقق من إنها شغّالة

1. افتح المتصفح واكتب في العنوان: chrome://extensions.
2. فعّل Developer mode من فوق على اليمين.
3. دوس Load unpacked واختار فولدر reading-time.
4. افتح أي مقال طويل، هيظهر شريط أزرق فوق يقولك مثلاً: "وقت القراءة: 4 دقيقة - 812 كلمة".

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

الـ trade-offs اللي لازم تعرفها

• الدقة مقابل البساطة: innerText بيعدّ كلمات القائمة والفوتر كمان، مش نص المقال بس. فالتقدير بيطلع أعلى شوية من الحقيقي. المكسب: كود بسيط بلا مكتبات. الخسارة: مش دقيق 100%.
• التغطية مقابل الخصوصية: <all_urls> معناه إن الإضافة بتشتغل على كل موقع بتفتحه. ده مريح للتجربة، بس لو هتنشرها للناس الأفضل تحدد نطاقات معينة بدل ما تطلب صلاحية على كل حاجة.
• الشريط الثابت: بيغطّي شوية من أعلى الصفحة. الافتراض هنا إنك عايز حاجة سريعة، مش واجهة مصقولة.

متى متستخدمش الطريقة دي

الكود ده ممتاز للتعلّم وللاستخدام الشخصي، بس مش جاهز للنشر على Chrome Web Store زي ما هو: المتجر محتاج أيقونات وسياسة خصوصية ومراجعة. كمان على المواقع اللي بتحمّل محتواها بعد فتح الصفحة (تطبيقات SPA)، ممكن العدّ يحصل قبل ما النص يظهر، فالنتيجة تطلع غلط. في الحالة دي محتاج تستنى تحميل المحتوى الأول. ولو عايز دقة عالية في تحديد نص المقال بس، هتحتاج مكتبة استخلاص محتوى زي Readability بدل innerText.

الخطوة التالية

غيّر رقم 200 في الكود لـ 238 (الرقم من البحث العلمي)، حدّث الإضافة، وقارن التقدير على نفس المقال. لو الفرق كبير عندك، ده معناه إن سرعة قراءتك بعيدة عن المتوسط؛ عدّل الرقم لسرعتك انت وهتبقى إضافة مظبوطة على مقاسك.

مصادر

• Chrome for Developers — Content scripts (Manifest V3): developer.chrome.com/docs/extensions/develop/concepts/content-scripts
• Chrome for Developers — Get started (Hello World): developer.chrome.com/docs/extensions/get-started
• MDN Web Docs — Content scripts: developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts
• Brysbaert, M. (2019). How many words do we read per minute? A review. Journal of Memory and Language: doi.org/10.1016/j.jml.2019.104047