التقاط استجابات رأس HTTP في ملحق Chrome

الخلفية

توفر ملحقات Chrome الوظيفة لتعديل رؤوس الطلب قبل إرسالها. ومع ذلك، لا يتم دعم الوصول إلى رؤوس الاستجابة بشكل مباشر من خلال واجهات برمجة التطبيقات (APIs) الملحقة.

الحل: حقن البرنامج النصي DOM

أحد الأساليب لالتقاط استجابات HTTP هو إدخال برنامج نصي في DOM لموقع الويب لمراقبة نشاط الشبكة. تستخدم هذه التقنية الكود التالي:

// البرنامج النصي للخلفية: inject.js var s = document.createElement('script'); s.src = chrome.runtime.getURL('injected.js'); s.onload = وظيفة () { this.remove(); }; (document.head || document.documentElement).appendChild(s); // نص المحتوى: injected.js (وظيفة (XHR) { // تجاوز أساليب XMLHttpRequest var XHR = XMLHttpRequest.prototype; ['فتح'، 'setRequestHeader'، 'إرسال'].forEach(function(method) { var originalMethod = XHR[method]; XHR[طريقة] = وظيفة() { // اعتراض الأحداث والتقاط رؤوس الطلبات والاستجابة ... }; }); })(XMLHttpRequest);

// Background script: inject.js
var s = document.createElement('script');
s.src = chrome.runtime.getURL('injected.js');
s.onload = function() {
    this.remove();
};
(document.head || document.documentElement).appendChild(s);

// Content script: injected.js
(function(xhr) {

    // Override XMLHttpRequest methods
    var XHR = XMLHttpRequest.prototype;

    ['open', 'setRequestHeader', 'send'].forEach(function(method) {
        var originalMethod = XHR[method];

        XHR[method] = function() {
            // Intercept events and capture request and response headers
            ...
        };
    });

})(XMLHttpRequest);

Manifest Configurationلإدخال البرنامج النصي، قم بتحديث ملف Manifest.json للملحق كما يلي:

"content_scripts": [{ "المطابقات": ["*://website.com/*"]، "run_at": "document_start"، "js": ["contentscript.js", "inject.js"] }]، "web_accessible_resources": [{ "الموارد": ["injected.js"], "المطابقات": ["*://website.com/*"] }]

// Background script: inject.js
var s = document.createElement('script');
s.src = chrome.runtime.getURL('injected.js');
s.onload = function() {
    this.remove();
};
(document.head || document.documentElement).appendChild(s);

// Content script: injected.js
(function(xhr) {

    // Override XMLHttpRequest methods
    var XHR = XMLHttpRequest.prototype;

    ['open', 'setRequestHeader', 'send'].forEach(function(method) {
        var originalMethod = XHR[method];

        XHR[method] = function() {
            // Intercept events and capture request and response headers
            ...
        };
    });

})(XMLHttpRequest);

النتيجة

يسمح هذا الحل للامتداد بالتقاط وتسجيل رؤوس الطلب والاستجابة، مما يتيح للامتداد استرداد الرؤوس المطلوبة من الاستجابة.