دليل إضافة Chrome

نظرة عامة على الإضافة

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

1. تجاوز قيود CORS: الوصول إلى الموارد عبر المصادر وتنزيلها مباشرةً (مثل الصور والخطوط المستضافة لدى طرف ثالث).
2. التقاط حالة العرض الحقيقية: الحصول على DOM وCSS النهائيين بعد حسابات JavaScript الديناميكية.
3. الوصول إلى المحتوى المؤمَّن: استنساخ الصفحات التي تتطلب تسجيل الدخول (مثل لوحات المعلومات وأنظمة الإدارة).

الواجهة والميزات

انقر على أيقونة الإضافة في الزاوية العلوية اليمنى من المتصفح لفتح لوحة التحكم الرئيسية.

يحتوي شريط الأدوات العائم على وجهتي إخراج: الموقع الإلكتروني يحافظ على سير عمل HTML/ZIP الحالي، بينما Figma ينشئ أرشيف .cdesign محلي لإضافة CloneWebsite Figma. راجع تصدير صفحات الويب إلى Figma للاطلاع على سير العمل الكامل ونموذج الأذونات.

إعدادات الاستنساخ

قبل بدء الاستنساخ، يمكنك تكوين الخيارات التالية:

• وضع الاستنساخ العميق: يحاول التقاط محتوى iframe والموارد الديناميكية الأعمق (قد يزيد من وقت المعالجة).
• معالجة الصور:
  • الاستخراج كملفات (موصى به): يستخرج جميع الصور كملفات .png/.jpg مستقلة محفوظة في مجلد assets.
  • الاحتفاظ بـ Base64: يحتفظ بالصور كبيانات مضمّنة داخل HTML (سيؤدي إلى حجم ملف HTML ضخم).
• تصفية الخصوصية:
  • إزالة برامج التتبع النصية: يزيل تلقائياً أكواد التتبع المعروفة مثل Google Analytics وFacebook Pixel وغيرها.
  • إزالة كل JS: ينتج نسخة ثابتة بالكامل وغير تفاعلية من الصفحة (الأكثر أماناً).
• الإصلاح التلقائي للروابط الخارجية: يحول المسارات المطلقة إلى مسارات نسبية لضمان تجربة تصفح سلسة دون اتصال.

عملية الاستنساخ التفصيلية

1. مرحلة التحضير

1. مرر عبر الصفحة للتأكد من تحميل جميع الصور والمحتوى ذات التحميل الكسول بالكامل.
2. وسّع أي قوائم منسدلة أو مكونات أكورديون أو نوافذ منبثقة تريد التقاطها.
3. انتظر حتى يتم استبدال جميع شاشات الهيكل العظمي بالمحتوى الحقيقي.

2. مرحلة التنفيذ

بعد النقر على بدء الاستنساخ، تُجري الإضافة الخطوات التالية:

1. تجميد DOM: يُوقف جميع حركات CSS وطفرات DOM الناتجة عن المؤقتات لمنع تغير الصفحة أثناء الالتقاط.
2. استخراج الموارد: يجتاز شجرة DOM للعثور على جميع الصور والخطوط وأوراق الأنماط الخارجية المُشار إليها.
3. حساب الأنماط: يحصل على الأنماط المحسوبة النهائية لجميع العناصر لضمان الاتساق البصري بين البيئات.
4. تنظيف التكرارات: يزيل العناصر غير المرئية والعناصر النائبة الفارغة وعلامات البرنامج النصي غير المفيدة المعروفة.
5. التجميع والتنزيل: يستخدم JSZip لبناء هيكل الملفات في الذاكرة ويُطلق إجراء تنزيل المتصفح.

3. التعامل مع الصفحات الكبيرة

إذا واجهت مشكلات عند استنساخ صفحات كبيرة أو معقدة جداً (مثل القوائم الطويلة أو لوحات المعلومات ذات التمرير اللانهائي):

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

اختصارات لوحة المفاتيح والإجراءات الشائعة

• Alt + Shift + C (Mac: Option + Shift + C): استنساخ الصفحة الحالية بنقرة واحدة باستخدام الإعدادات الافتراضية.
• قائمة السياق: انقر بزر الماوس الأيمن على منطقة فارغة من الصفحة وحدد CloneWebsite -> Clone this page.

الأخطاء الشائعة والحلول

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

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

س: لا يحدث شيء عند النقر على استنساخ؟
ج: يرجى فتح أدوات مطوّري Chrome (F12) والتبديل إلى لوحة Console للتحقق من الأخطاء. قد تمنع بعض سياسات أمان المحتوى (CSP) الصارمة جداً تنفيذ نصوص الإضافة.