بناء إضافة Google Chrome مخصصة لتسهيل تحليل السيو الداخلي للمنافسين

8 min read Aldawsari
دقائق القراءة: 8

بناء إضافة Google Chrome مخصصة لتسهيل تحليل السيو الداخلي للمنافسين

في عالم تحسين محركات البحث (SEO) سريع التطور، يواجه المتخصصون تحدياً مستمراً في تحليل المنافسين يدوياً، وهو ما يستغرق وقتاً وجهداً كبيرين. تخيل لو كان بإمكانك بناء إضافة Google Chrome مخصصة لتسهيل تحليل السيو الداخلي للمنافسين، تقوم بجمع البيانات الأساسية بنقرة زر واحدة؟ هذا المقال سيأخذك في رحلة تفصيلية، خطوة بخطوة، لبناء أداة قوية تمنحك ميزة تنافسية لا تقدر بثمن.

لماذا نحتاج إضافة Chrome لتحليل السيو الداخلي؟

تحليل السيو الداخلي (On-Page SEO) للمنافسين هو حجر الزاوية في أي استراتيجية SEO ناجحة. يتضمن هذا التحليل فحص عناصر مثل العناوين (<title>)، الأوصاف الوصفية (meta description)، العناوين الفرعية (<h1>، <h2>، إلخ)، بنية الروابط الداخلية والخارجية، سمات الصور البديلة (alt attributes)، وحتى كثافة الكلمات المفتاحية. القيام بكل هذا يدوياً لكل صفحة منافس يمكن أن يكون مهمة شاقة ومملة، وعرضة للأخطاء. الإضافة المخصصة توفر:

  • توفير الوقت: أتمتة عملية جمع البيانات التي تستغرق ساعات.
  • الدقة: تقليل الأخطاء البشرية في جمع وتحليل البيانات.
  • الكفاءة: الوصول السريع إلى المعلومات الهامة مباشرة من المتصفح.
  • التخصيص: بناء أداة تلبي احتياجاتك الدقيقة دون الحاجة للاعتماد على أدوات طرف ثالث قد تكون مكلفة أو لا توفر كل ما تحتاجه.

المفاهيم الأساسية قبل البدء

ما هو السيو الداخلي (On-Page SEO)؟

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

كيف تعمل إضافات Google Chrome؟

إضافات Chrome هي برامج صغيرة تُكتب باستخدام تقنيات الويب القياسية مثل HTML و CSS و JavaScript. تتفاعل هذه الإضافات مع متصفح Chrome وتوفر وظائف إضافية. تتكون الإضافات عادةً من:

  • ملف manifest.json: يصف الإضافة، صلاحياتها، ومكوناتها.
  • صفحة popup.html: الواجهة الرسومية التي تظهر عند النقر على أيقونة الإضافة.
  • سكريبتات المحتوى (content scripts): ملفات JavaScript تتفاعل مباشرة مع محتوى صفحات الويب التي يزورها المستخدم.
  • سكريبتات الخلفية (background scripts): تعمل في الخلفية وتتعامل مع الأحداث العامة للمتصفح.

هيكلة الإضافة: المكونات الأساسية

لإنشاء إضافة تحليل السيو، سنحتاج إلى المكونات التالية:

ملف manifest.json

هذا الملف هو بمثابة بطاقة هوية الإضافة. يحدد اسمها، إصدارها، الأذونات التي تحتاجها، وأي ملفات HTML أو JavaScript سيتم استخدامها.

popup.html و popup.js

popup.html هي الصفحة التي ستظهر عندما ينقر المستخدم على أيقونة الإضافة في شريط أدوات Chrome. ستعرض هذه الصفحة واجهة بسيطة لعرض نتائج التحليل. أما popup.js فهو ملف JavaScript الذي سيتعامل مع منطق الواجهة، مثل إرسال طلبات إلى content.js واستقبال البيانات منه.

content.js: قلب التحليل

هذا هو الجزء الأكثر أهمية. content.js هو السكريبت الذي سيتم حقنه في صفحة الويب الحالية. وظيفته هي التفاعل مع DOM (Document Object Model) للصفحة، واستخراج جميع البيانات المتعلقة بالسيو الداخلي التي نحتاجها (العناوين، الأوصاف، الروابط، إلخ).

background.js (اختياري لكن مفيد)

يمكن استخدام background.js للتعامل مع منطق أكثر تعقيداً لا يرتبط مباشرة بواجهة المستخدم أو محتوى الصفحة، مثل تخزين البيانات، أو إجراء طلبات API خارجية، أو الاستماع لأحداث المتصفح.

خطوات بناء الإضافة: من الفكرة إلى التنفيذ

الخطوة 1: إعداد بيئة العمل

ابدأ بإنشاء مجلد جديد على جهاز الكمبيوتر الخاص بك، وليكن اسمه seo-analyzer-extension. داخل هذا المجلد، سنقوم بإنشاء جميع الملفات اللازمة.

الخطوة 2: صياغة manifest.json

أنشئ ملفاً باسم manifest.json داخل مجلد الإضافة وأضف الكود التالي:


{
  "manifest_version": 3,
  "name": "SEO On-Page Analyzer",
  "version": "1.0",
  "description": "أداة لتحليل السيو الداخلي للمنافسين بنقرة واحدة.",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png"
    }
  },
  "permissions": [
    "activeTab",
    "scripting"
  ],
  "host_permissions": [
    "<all_urls>"
  ]
}
💡 ملاحظة فنية: تأكد من إنشاء مجلد icons ووضع صور بأحجام مختلفة (16×16, 48×48, 128×128) فيه، حتى لو كانت صوراً وهمية في البداية. هذه الأيقونات ضرورية لظهور الإضافة بشكل صحيح في المتصفح.

الخطوة 3: واجهة المستخدم (popup.html)

أنشئ ملفاً باسم popup.html وأضف الكود التالي. هذا الملف سيوفر هيكلاً بسيطاً لعرض النتائج.


<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SEO Analyzer</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            width: 350px;
            padding: 15px;
            background-color: #f4f7f6;
            color: #333;
        }
        h3 {
            color: #2c3e50;
            border-bottom: 1px solid #eee;
            padding-bottom: 5px;
            margin-top: 15px;
        }
        p, ul {
            font-size: 0.9em;
            line-height: 1.6;
            margin-bottom: 10px;
        }
        ul {
            list-style-type: none;
            padding-left: 0;
        }
        li {
            background-color: #e9ecef;
            margin-bottom: 5px;
            padding: 8px;
            border-radius: 4px;
            word-wrap: break-word;
        }
        .loading {
            text-align: center;
            font-style: italic;
            color: #555;
        }
        .error {
            color: #e74c3c;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h2>نتائج تحليل السيو الداخلي</h2>
    <div id="results">
        <p class="loading">جارٍ التحميل...</p>
    </div>
    <script src="popup.js"></script>
</body>
</html>

الخطوة 4: منطق الواجهة (popup.js)

أنشئ ملف popup.js. هذا السكريبت سيقوم بإرسال رسالة إلى content.js لطلب البيانات، ثم يعرضها في popup.html.


document.addEventListener('DOMContentLoaded', () => {
    const resultsDiv = document.getElementById('results');
    resultsDiv.innerHTML = '<p class="loading">جارٍ تحليل الصفحة...</p>';

    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
        const activeTab = tabs[0];
        if (activeTab) {
            chrome.scripting.executeScript(
                {
                    target: { tabId: activeTab.id },
                    files: ['content.js']
                },
                () => {
                    chrome.tabs.sendMessage(activeTab.id, { action: 'getSEOData' }, (response) => {
                        if (chrome.runtime.lastError) {
                            resultsDiv.innerHTML = '<p class="error">خطأ: لا يمكن الوصول إلى محتوى الصفحة. تأكد من أنك على صفحة ويب صالحة.</p>';
                            return;
                        }
                        if (response && response.data) {
                            displayResults(response.data);
                        } else {
                            resultsDiv.innerHTML = '<p class="error">لم يتم العثور على بيانات تحليل السيو.</p>';
                        }
                    });
                }
            );
        } else {
            resultsDiv.innerHTML = '<p class="error">لا توجد علامة تبويب نشطة.</p>';
        }
    });

    function displayResults(data) {
        resultsDiv.innerHTML = '';

        const appendSection = (title, content) => {
            const h3 = document.createElement('h3');
            h3.textContent = title;
            resultsDiv.appendChild(h3);
            if (Array.isArray(content)) {
                if (content.length === 0) {
                    const p = document.createElement('p');
                    p.textContent = 'لا يوجد.';
                    resultsDiv.appendChild(p);
                } else {
                    const ul = document.createElement('ul');
                    content.forEach(item => {
                        const li = document.createElement('li');
                        li.textContent = item;
                        ul.appendChild(li);
                    });
                    resultsDiv.appendChild(ul);
                }
            } else if (content) {
                const p = document.createElement('p');
                p.textContent = content;
                resultsDiv.appendChild(p);
            } else {
                const p = document.createElement('p');
                p.textContent = 'غير متوفر.';
                resultsDiv.appendChild(p);
            }
        };

        appendSection('عنوان الصفحة (Title)', data.title);
        appendSection('الوصف الوصفي (Meta Description)', data.metaDescription);
        appendSection('العنوان الرئيسي (H1)', data.h1);
        appendSection('العناوين الفرعية (H2)', data.h2);
        appendSection('العناوين الفرعية (H3)', data.h3);
        appendSection('سمات الصور البديلة (Alt Texts)', data.altTexts);
        appendSection('الروابط الداخلية', data.internalLinks);
        appendSection('الروابط الخارجية', data.externalLinks);
    }
});

الخطوة 5: استخراج البيانات (content.js)

أنشئ ملف content.js. هذا السكريبت سيتم حقنه في الصفحة الحالية ويقوم باستخراج البيانات المطلوبة.


(() => {
    if (window.hasRun) {
        return;
    }
    window.hasRun = true;

    function getSEOData() {
        const data = {};

        // Get Title
        data.title = document.querySelector('title') ? document.querySelector('title').textContent : null;

        // Get Meta Description
        data.metaDescription = document.querySelector('meta[name="description"]') ? document.querySelector('meta[name="description"]').getAttribute('content') : null;

        // Get H1
        data.h1 = document.querySelector('h1') ? document.querySelector('h1').textContent : null;

        // Get H2s
        data.h2 = Array.from(document.querySelectorAll('h2')).map(el => el.textContent);

        // Get H3s
        data.h3 = Array.from(document.querySelectorAll('h3')).map(el => el.textContent);

        // Get Alt Texts for Images
        data.altTexts = Array.from(document.querySelectorAll('img'))
            .map(img => img.getAttribute('alt'))
            .filter(alt => alt && alt.trim() !== '');

        // Get Links (Internal and External)
        const links = Array.from(document.querySelectorAll('a'));
        const currentHostname = window.location.hostname;
        data.internalLinks = [];
        data.externalLinks = [];

        links.forEach(link => {
            const href = link.getAttribute('href');
            if (href) {
                try {
                    const url = new URL(href, window.location.href);
                    if (url.hostname === currentHostname) {
                        data.internalLinks.push(url.href);
                    } else {
                        data.externalLinks.push(url.href);
                    }
                } catch (e) {
                    // Handle malformed URLs or relative paths that URL constructor can't resolve
                    if (!href.startsWith('#') && !href.startsWith('javascript:')) {
                        if (href.startsWith('/') || href.startsWith('./') || href.startsWith('../')) {
                            data.internalLinks.push(href); // Likely internal relative link
                        } else if (href.includes('://')) {
                            data.externalLinks.push(href); // Likely external absolute link
                        }
                    }
                }
            }
        });

        // Remove duplicates from link arrays
        data.internalLinks = [...new Set(data.internalLinks)];
        data.externalLinks = [...new Set(data.externalLinks)];

        return data;
    }

    chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
        if (request.action === 'getSEOData') {
            const seoData = getSEOData();
            sendResponse({ data: seoData });
        }
    });
})();
💡 ملاحظة فنية: وظيفة window.hasRun تضمن أن content.js لا يتم حقنه وتنفيذه أكثر من مرة في نفس الصفحة، مما يمنع تكرار مستمعي الأحداث (event listeners) أو تداخل البيانات.

الخطوة 6: اختبار الإضافة وتحميلها

بعد إنشاء جميع الملفات، حان وقت اختبار الإضافة:

  1. افتح متصفح Google Chrome.
  2. اذهب إلى chrome://extensions.
  3. قم بتفعيل وضع المطور (Developer mode) في الزاوية العلوية اليمنى.
  4. انقر على زر “تحميل إضافة غير مضغوطة” (Load unpacked).
  5. اختر المجلد الرئيسي لإضافتك (seo-analyzer-extension).
  6. يجب أن تظهر الإضافة الآن في قائمة إضافاتك، وستظهر أيقونتها في شريط أدوات Chrome.

الآن، قم بزيارة أي صفحة ويب، وانقر على أيقونة الإضافة، وسترى نتائج تحليل السيو الداخلي تظهر في النافذة المنبثقة.

تحسينات وميزات متقدمة

هذه الإضافة هي نقطة انطلاق ممتازة. يمكنك توسيعها لتشمل ميزات أكثر تقدماً مثل:

  • تحليل كثافة الكلمات المفتاحية: حساب تكرار الكلمات المفتاحية الرئيسية.
  • تصدير البيانات: إضافة زر لتصدير البيانات إلى ملف CSV أو JSON.
  • فحص الروابط المعطلة: التحقق من حالة الروابط (HTTP status codes).
  • التكامل مع واجهات برمجة التطبيقات (APIs): ربط الإضافة بأدوات SEO خارجية مثل Ahrefs أو SEMrush لجلب بيانات إضافية.
  • واجهة مستخدم أفضل: تحسين تصميم الواجهة لعرض البيانات بشكل أكثر جاذبية وتفاعلية.

الخاتمة

بناء إضافة Google Chrome مخصصة لتحليل السيو الداخلي للمنافسين ليس مجرد تمرين برمجي، بل هو استثمار في كفاءة عملك وقدرتك على اتخاذ قرارات مستنيرة في مجال SEO. لقد قمنا بتغطية الأساسيات، ومن هنا، السماء هي الحدود لما يمكنك تحقيقه. ابدأ بتطبيق هذه الخطوات، وستجد نفسك قادراً على تحليل المنافسين بسرعة ودقة لا مثيل لهما، مما يمنحك ميزة تنافسية حقيقية في السوق الرقمي.

الأسئلة الشائعة (FAQ)

س1: هل أحتاج إلى خبرة برمجية كبيرة لبناء هذه الإضافة؟

ج1: الخبرة الأساسية في HTML و CSS و JavaScript كافية للبدء. هذا المقال يوفر لك جميع الأكواد والهيكل اللازم، ويمكنك التعلم والتوسع تدريجياً.

س2: هل يمكنني استخدام هذه الإضافة لتحليل السيو الداخلي لموقعي الخاص؟

ج2: بالتأكيد! الإضافة مصممة لتحليل أي صفحة ويب تزورها، بما في ذلك صفحات موقعك الخاص. إنها أداة ممتازة للتدقيق السريع لصفحاتك.

س3: ما هي الأذونات (Permissions) التي تحتاجها الإضافة ولماذا؟

ج3: تحتاج الإضافة إلى إذن activeTab للوصول إلى علامة التبويب النشطة حالياً، وإذن scripting لحقن وتنفيذ سكريبتات المحتوى (content.js) في الصفحات. إذن <all_urls> في host_permissions يسمح للإضافة بالعمل على أي عنوان URL، وهو ضروري لتحليل أي موقع.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *