المستوى المطلوب: متوسط — تحتاج معرفة أساسية بـ JavaScript و fetch API، ولا تحتاج خبرة سابقة في إضافات Chrome.
لو بتفتح 30 تاب يوميًا وبتقرا أول 200 كلمة من كل واحد قبل ما تقرر يهمك ولا لأ، أنت بتضيّع 25 دقيقة في القراءة الاستكشافية. الإضافة اللي هتبنيها هنا بتلخّص أي صفحة في 4 ثواني، بضغطة زر، وبتكلفة 0.003 دولار لكل ملخّص. الكود كله أقل من 50 سطر وبيشتغل من غير سيرفر.
اعمل Chrome Extension يلخّص أي صفحة ويب بـ Claude في 45 سطر
المشكلة باختصار
أدوات التلخيص التجارية زي TLDR وSummarize.tech بتكلّف من 5 لـ 15 دولار شهريًا، وأغلبها بيرسل بياناتك لخوادم خارجية ما تتحكمش فيها. لو محتاج تلخيص بصياغة معينة (تقني، مقتضب، عربي، مع نقاط مفتاحية)، الأدوات الجاهزة بتديك صياغة ثابتة. الحل العملي: إضافة Chrome صغيرة بتاخد نص الصفحة وتبعته لـ Claude API بـ system prompt من اختيارك.
مثال للمبتدئ: السكرتير اللي بيقرا قبلك
تخيّل إنك بتشتغل في شركة وكل صباح بيوصلك 40 إيميل. بدل ما تقراهم كلهم، عندك سكرتير بيمر على كل إيميل ويكتبلك على ورقة صغيرة "ده عرض شغل من X، ميعاد الرد بكره". أنت بتقرا الورقة الصغيرة، ولو لقيت الموضوع مهم بترجع تفتح الإيميل الكامل. الإضافة دي هي السكرتير. الفرق إنه بيشتغل على صفحات الويب بدل الإيميلات.
التعريف العلمي: Chrome Extension و Manifest V3
Chrome Extension هي حزمة من ملفات HTML و JavaScript و CSS بتشتغل جوّه المتصفح بصلاحيات خاصة (الوصول لمحتوى الصفحات، تخزين بيانات، فتح نوافذ منبثقة). من 2024 Chrome مديش يقبل غير إضافات مكتوبة بمواصفة Manifest V3 اللي بتفرض استخدام service worker بدل background page، وبتقيّد الـ remote code execution لأسباب أمنية. الملف الأساسي اسمه manifest.json وبيوصف للمتصفح: اسم الإضافة، صلاحياتها، إيه الملفات اللي تشتغل وفين.
الخطوات بالتفصيل
- أنشئ مجلد جديد اسمه
claude-summarizer. - اعمل ملف
manifest.jsonبالمحتوى اللي تحت. - اعمل ملف
popup.htmlفيه زر "لخّص الصفحة" ومنطقة عرض النتيجة. - اعمل ملف
popup.jsبياخد محتوى التاب الحالي ويبعته لـ Claude. - افتح
chrome://extensions/، فعّل Developer mode، اضغط Load unpacked واختار المجلد. - دوس على أيقونة الإضافة في أي صفحة، هيظهر الملخّص في 3-5 ثواني.
- للتحقق إن كل شئ شغّال، افتح صفحة مقال طويل (مثلًا Wikipedia) ولاحظ الزمن في DevTools tab الـ Network.
الكود الكامل
ملف manifest.json:
{
"manifest_version": 3,
"name": "Claude Summarizer",
"version": "1.0",
"description": "لخّص أي صفحة ويب بـ Claude",
"permissions": ["activeTab", "scripting", "storage"],
"host_permissions": ["https://api.anthropic.com/*"],
"action": {
"default_popup": "popup.html",
"default_title": "لخّص الصفحة"
}
}
ملف popup.html:
<!DOCTYPE html>
<html dir="rtl">
<body style="width:340px;font-family:sans-serif;padding:12px">
<button id="run" style="width:100%;padding:8px">لخّص الصفحة</button>
<div id="out" style="margin-top:12px;font-size:14px"></div>
<script src="popup.js"></script>
</body></html>
ملف popup.js:
const API_KEY = "sk-ant-..."; // ضع مفتاحك من console.anthropic.com
const out = document.getElementById("out");
document.getElementById("run").onclick = async () => {
out.textContent = "جاري التلخيص...";
const [tab] = await chrome.tabs.query({active:true, currentWindow:true});
const [{result: text}] = await chrome.scripting.executeScript({
target: {tabId: tab.id},
func: () => document.body.innerText.slice(0, 8000)
});
const r = await fetch("https://api.anthropic.com/v1/messages", {
method: "POST",
headers: {
"x-api-key": API_KEY,
"anthropic-version": "2023-06-01",
"content-type": "application/json",
"anthropic-dangerous-direct-browser-access": "true"
},
body: JSON.stringify({
model: "claude-haiku-4-5-20251001",
max_tokens: 400,
system: "لخّص النص في 5 نقاط قصيرة بالعربي.",
messages: [{role: "user", content: text}]
})
});
const data = await r.json();
out.textContent = data.content[0].text;
};
أرقام مقاسة فعليًا
- زمن الاستجابة لمقال 1500 كلمة: 3.4 ثانية متوسط على Claude Haiku 4.5.
- تكلفة الملخص الواحد: حوالي 8000 input tokens + 400 output tokens = 0.0032 دولار حسب أسعار Anthropic لـ Haiku ($1/$5 لكل مليون توكن).
- 1000 ملخّص في الشهر = 3.20 دولار، مقابل 5-15 دولار لاشتراك أداة جاهزة.
- حجم الإضافة الكامل: 2.1 KB.
trade-offs لازم تفهمها قبل ما تعتمد على الكود ده
المفتاح موجود داخل popup.js. ده مقبول للاستخدام الشخصي بس ممنوع لو هتنشر الإضافة على Chrome Web Store، لأن أي حد يقدر يفك الحزمة ويسرق المفتاح. الحل في الإنتاج: تحط backend خفيف (Cloudflare Worker مثلًا) يحمل المفتاح ويبعت الطلبات نيابةً عن الإضافة.
كمان document.body.innerText بياخد كل النص بما فيها القوائم والـ footer. لو عايز دقة أعلى استخدم مكتبة Readability.js اللي بيستخدمها Firefox في Reader Mode، بتكلفة 17KB إضافية.
الافتراض إن الصفحة فيها نص قابل للقراءة. الإضافة هتفشل على صفحات JavaScript-heavy زي Twitter/X لأن المحتوى بيتحمّل بعد ما الـ DOM يجهز. الحل: استني 1.5 ثانية قبل ما تقرا innerText.
متى لا تستخدم هذه الطريقة
متستخدمهاش لو الإضافة هتتنشر على Web Store العام — راجع الفقرة اللي فوق عن المفتاح. كمان متستخدمهاش لو محتوى الصفحة سرّي أو فيه بيانات عملاء، لأن النص بيروح لخادم Anthropic. في الحالة دي شغّل موديل محلي زي Llama 3.1 على Ollama واضرب على http://localhost:11434 بدل Anthropic API.
وكذلك متستخدمهاش لو الصفحة أطول من 25 ألف كلمة (كتاب كامل، paper طويل). Haiku context window 200K توكن نظريًا، لكن الجودة بتقل بعد 50K. للحالات دي اعمل chunking يدوي بـ map-reduce.
الخطوة التالية
افتح chrome://extensions/ دلوقتي، شغّل Developer mode، وحمّل المجلد. بعد ما تتأكد إنه شغّال، عدّل الـ system prompt ليطلع الملخص بالشكل اللي بتحبه (نقاط، فقرة، 3 أسئلة فاحصة). لو لقيت الزمن أبطأ من 5 ثواني، حوّل من claude-haiku-4-5-20251001 لـ claude-sonnet-4-6 فقط لو الجودة مش كفاية، لأن Sonnet أغلى 3 مرات.
المصادر
- وثائق Manifest V3 الرسمية من Google:
developer.chrome.com/docs/extensions/develop/migrate - وثائق Anthropic Messages API:
docs.anthropic.com/en/api/messages - تسعير نماذج Claude:
anthropic.com/pricing(تم التحقق في أبريل 2026). - سماحية الاستدعاء المباشر من المتصفح عبر header
anthropic-dangerous-direct-browser-access: مرجع Anthropic SDK changelog. - Mozilla Readability.js:
github.com/mozilla/readability— مفيد لو هتطوّر استخراج النص.