Расширение Chrome: заблокировать элементы страницы перед доступом

Question

Я пытаюсь сделать элементы блока на веб-странице, но я хочу сделать это, прежде чем они будут загружены. Так, например, я мог бы использовать

chrome.webRequest.onBeforeRequest.addListener(...);

И перенаправлять/отменить запрос. Но я хочу проверить фактическое содержание запроса. То, что я делаю прямо сейчас, начинается с XMLHttpRequest, чтобы загрузить URL-адрес, проверить содержимое и заблокировать его, если это необходимо. Однако основная проблема заключается в том, что на самом деле не так много объектов заблокировано. Это означает, что каждый объект загружается дважды: один раз для «моей проверки» и один раз, после того, как я сказал «хорошо, вы можете загрузить его».

Как перехватить процесс загрузки, чтобы я мог осмотреть его на лету и передать байты данных, если они разрешены?

Надеюсь, вы понимаете мой вопрос, спасибо :-)

Пример того, как я сделать это прямо сейчас:

function shall_be_blocked(info){ 
    var xhr = new XMLHttpRequest(); 
    xhr.open("GET", file, false); 
    //... #load the file and inspect the bytes 
    if (xhr.responseText=="block it") { 
    return true; 
    } 
    return false; 
} 

chrome.webRequest.onBeforeRequest.addListener(
    function(info) { 
    ret = shall_be_blocked(info); 
    if (ret ...){return {cancel:true};}//loads the file once, as it is getting blocked 
    return {};//loads the file twice 
    }, 
    {},["blocking"] 
); 

Answer 1

мне удалось добиться того, что я пытался сделать. Решение не обязательно нуждается в расширениях, но для установки прокси-сервера это может быть полезно. После этого раствор (для указанной задачи выше) выглядит следующим образом:

• Используйте расширение хрома, чтобы использовать прокси-сервер, в этом случае локального
• настроить proxyscript, например с помощью питона, чтобы направлять весь трафик (и, возможно, установить сертификаты, так HTTPs трафика могут быть проанализированы, а)
• => Человек-в-середине установлено, анализировать трафик и изменять при необходимости

Да, на самом деле это не решение проблемы создания хромового расширения, но это пока невозможно (см. https://bugs.chromium.org/p/chromium/issues/detail?id=104058).

С наилучшими пожеланиями, mutilis

Answer 2

Я считаю, что вы можете использовать arraybuffers читать содержимое в режиме реального времени.

Ниже приведен пример загрузки файла/страницы в буфер;

var oReq = new XMLHttpRequest(); 
oReq.open("GET", "/myfile.png", true); 
oReq.responseType = "arraybuffer"; 

oReq.onload = function (oEvent) { 
    var arrayBuffer = oReq.response; // Note: not oReq.responseText 
    if (arrayBuffer) { 
    var byteArray = new Uint8Array(arrayBuffer); 
    for (var i = 0; i < byteArray.byteLength; i++) { 
     // do something with each byte in the array 
    } 
    } 
}; 

oReq.send(null); 

Это кусок кода найден на странице XMLHttpRequest документации. Link.

Answer 3

Вы можете использовать ServiceWorker, чтобы прочитать оригинал Response перед возвратом содержимого оригинала Response или новым контентом.

if ("serviceWorker" in navigator) { 
    navigator.serviceWorker.register("sw.js").then(function(reg) { 
    console.log("register", reg); 
    }).catch(function(err) { 
    console.log("err", err); 
    }); 
} 

self.addEventListener("fetch", function(event) { 
    if (event.request.url == "/path/to/fetched/resource/") { 
    console.log("fetch", event); 
    event.respondWith(
     fetch(event.request).then(function(response) { 
     return response.text() 
      .then(function(text) { 
      if (text === "abc123") { 
       return new Response("def456") 
      } else { 
       return new Response(text) 
      } 
      }) 
     }) 
    ); 
    } 
}); 

plnkr https://plnkr.co/edit/MXGSZN1i3quvZhkI7fqe?p=preview

См What happens when you read a response?