Перехват запросов посредством “JS” в расширении браузера “Chrome”?

Question

[demon1806]

Доброго времени суток! Может кто-нибудь подсказать, а в идеале привести примеры реализации данного задания: "Перехватить запрос, сделать ему cancel, а потом его урл и хидеры вывести на страницы в таком виде
You have requested ${url} URL
With the next headers: ${listOfHeaders}
". Всё создаётся посредством "JS" в виде расширения под "Chrome".

Answer 1

[Ihor Bratukh]

Ну схема приблизительно такая, проксирование методов

(function () {
    'use strict';

    var original = {
        open: XMLHttpRequest.prototype.open,
        send: XMLHttpRequest.prototype.send
    };

    XMLHttpRequest.prototype.open = function (method, url, async, user, password) {
        console.log(url);
        return original.open.call(this, method, url, async, user, password);
    };

    XMLHttpRequest.prototype.send = function (data) {
        console.log(data);
        return original.send.call(this, data);
    };

}());

Comments

[demon1806]

Вот только как в этом случае потом урл и хидеры вывести на страницу в таком виде
You have requested ${url} URL
With the next headers: ${listOfHeaders}?

[0ffff0]

demon1806, прочитайте методичку с MDN внимательно и до конца, материал по моей ссылке далеко не теоретический, как вы выразились, это скорее пошаговая инструкция, если выполнить все шаги правильно - все заработает.
в конце раздела Логирование URL запросов сказано:

Для проверки проинсталлируйте WebExtension, откройте консоль браузера и откройте какую-нибудь веб-страницу. В консоли!!! вы должны увидеть URL для каждого ресурса, который запрашивает браузер:

, вы проинсталлировали?
а консоль открывали?

[0ffff0]

А как на страницу вывести это дело десятое, сначала проинсталлирйтесь, и загляните в консоль, пожалуйста.

[demon1806]

0ffff0, я всё сделал: Что теперь дальше ?

Answer 2

[0ffff0]

Для перехвата HTTP запросов используйте webRequest API . Этот API позволит вам добавлять слушателей, на различных этапах создания HTTP запросов. В слушателях вы можете:

1. получить доступ к заголовкам и телам запроса, к заголовкам ответ
   
2. отменять и перенаправлять запросы
   
3. изменять запрос и заголовки ответа
   

Comments

[demon1806]

Т. е. первый вариант не подойдёт что-ли?... Не могли бы Вы привести пример реализации данного теоретического материала, если нетрудно ? Просто хотелось бы узнать, как потом урл и хидеры вывести на страницу в таком виде
You have requested ${url} URL
With the next headers: ${listOfHeaders}?

[0ffff0]

demon1806, прочитайте методичку с MDN внимательно и до конца, материал по моей ссылке далеко не теоретический, как вы выразились, это скорее пошаговая инструкция, если выполнить все шаги правильно - все заработает.
в конце раздела Логирование URL запросов сказано:

Для проверки проинсталлируйте WebExtension (имеется ввиду ваше приложение), откройте консоль браузера и откройте какую-нибудь веб-страницу. В консоли!!! вы должны увидеть URL для каждого ресурса, который запрашивает браузер:

вы проинсталлировали?
а консоль открывали?
Сделайте все это, а потом разберемся с вашим видом
"You have requested ${url} URL
With the next headers: ${listOfHeaders}? "

[0ffff0]

Cкрин с результатом работы приложения

созданного из

function logURL(requestDetails) {
  console.log("Loading: " + requestDetails.url);
}

browser.webRequest.onBeforeRequest.addListener(
  logURL,
  {urls: ["<all_urls>"]}
);

и

{
  "description": "Demonstrating webRequests",
  "manifest_version": 2,
  "name": "webRequest-demo",
  "version": "1.0",

  "permissions": [
    "webRequest",
    "<all_urls>"
  ],

  "background": {
    "scripts": ["background.js"]
  }
}

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

[demon1806]

0ffff0, у меня всё получилось: Что теперь дальше ?

[0ffff0]

demon1806, У вас все получилось, это здорово!
Дальше, преодолевая неизвестность, читаем материал по ссылкам.
загрузка контент-скрипта MDN Скрипты Content Scripts
добавление кнопок Add a button to the toolbar
изучив их, вы сможете

1. Открыть окошко
   
2. Из вашего приложения изменить содержимое любой страницы
   
3. Создать красивую кнопочку для запуска приложения на панели броузера, если захотите
   
   

[0ffff0]

demon1806, вот еще туториал создания поедателя страниц (ест все буквы со страниц домена указанного в собственном, отдельном манифесте в разделе "matches":
Modify_a_web_page он без перевода, но очень простой, дальше думаю выкрутитесь

[0ffff0]

demon1806, ну чо как там?

[demon1806]

0ffff0, пока делаю, неособо почему-то получается, если честно... Вы не пробовали случаем такое же реализовать, кстати ?

[0ffff0]

demon1806, у меня есть сырая реализация, вам должна понравиться, сейчас набросаю

[0ffff0]

demon1806, значит вот,
создаем такую папку data и суем туда
page-16.png

потом

main.js

// main.js
var tabs = require("sdk/tabs");

});

манифест

{
  "description": "Demonstrating webRequests",
  "manifest_version": 2,
  "name": "webRequest",
  "version": "1.0",
  "browser_action":{
    "default_title": "mytest",
     "default_icon": {
      "16": "page-16.png"
      
    }
  },

  "permissions": [

  "webRequest",
   "webRequestBlocking",
    "<all_urls>",
	"*://pp.userapi.com/*",
	"tabs"
  ],

  "background": {
	
    "scripts": ["background.js"]

	},
  
	"content_scripts":[
	{
	"matches": ["*://*.test1.ru/*"],
	"js":["pageeater/pageeater.js"]
	
	}
	]
}

бэкграунд

var data = [];
var tab_Id=1;
var i=0;
var test1 = {};

function onOpenPage(tab) {
 
browser.tabs.query({
	  
	  currentWindow: false, active: false
   
  }).then(sendMessageToTabs).catch(onError);
  
  return tab_Id = tab.id
 
}

function logURL(requestDetails) {
 i++; 
 data[i]=requestDetails.url;
 console.log("i "+i+ " data: "+data[i]+" Your URL is : " + requestDetails.url);
return i

}


function onError(error) {
  console.log(`Error: ${error}`);
}


function pause500ms() {  
    return new Promise((res) => setTimeout(res, 500));
}


async function sendMessageToTabs(tabs){

	await pause500ms();
    
	browser.tabs.sendMessage(
	
     (tab_Id),
	  {

	  greeting:data, test:test1
		
		}
		  
		  ).then(response => {
			  
			  
	  console.log(" Message from the content script:");
      console.log(response.response);}).catch(onError);
	  }
	  var targetPage ="http://test1.ru"; 
	   
function logHeaders(e){
		var result = "";
		for(var i in e.requestHeaders){}
			console.log("headers "+e.requestHeaders)	
		 test1 = e.requestHeaders;

	return test1,{requestHeaders: e.requestHeaders};
  }
  


  var pattern = "https://pp.userapi.com/*";

function redirect(requestDetails) {
  console.log("Redirecting: " + requestDetails.url);
  return {
    redirectUrl: "https://38.media.tumblr.com/tumblr_ldbj01lZiP1qe0eclo1_500.gif"
  };
}

browser.webRequest.onBeforeRequest.addListener(
  redirect,
  {urls:[pattern], types:["image"]},
  ["blocking"]
);
 
  
 browser.webRequest.onSendHeaders.addListener(
	logHeaders,
	{urls:["<all_urls>"]},
	["requestHeaders"]
	);





browser.webRequest.onBeforeRequest.addListener(
  logURL,
  {urls: ["<all_urls>"]},
  
  );
  
  
browser.browserAction.onClicked.addListener(function() {
  var creating = browser.tabs.create({
     url:"http://test1.ru"
	
  });
  creating.then(onOpenPage, onError);
});

контент скрипт

var pattern = "https://mdn.mozillademos.org/*";

function redirect(requestDetails) {
  console.log("Redirecting: " + requestDetails.url);
  return {
    redirectUrl: "https://38.media.tumblr.com/tumblr_ldbj01lZiP1qe0eclo1_500.gif"
  };
}

browser.webRequest.onBeforeRequest.addListener(
  redirect,
  {urls:[pattern], types:["image"]},
  ["blocking"]
);

Загружаем в броузере через main.js
Запускаем по кнопке в панели, которая появится после загрузки расширения.

[demon1806]

0ffff0, я всё сделал, как у Вас написано, но в итоге вот такая беда в ошибках возникает: И ещё: "Я делаю под "Chrome", а в примере не под него реализовали"... Вы не могли бы ещё помочь, а то я уже запутался?... Спасибо большое заранее! И ещё: "К чему Вы выслали первую статью из списка ?" Я её основательно прочитал, но как-то не могу понять, как использовать данный материал при выполнении моей задачи... Можете, если не трудно, прояснить данный момент при возможности ? Вторая статья вообще не работает, если честно...

[0ffff0]

demon1806, Все у вас получится, только не надо торопиться. Выполняйте все задачи последовательно.
Вы про эту ссылку? content-script ?
Ну подумайте, вам-же надо запросы и заголовки на страницу выводить, background.js этого не умеет, это делает content-script, верно? Значит вам надо научиться изменять страницу из расширения , это первая задача. Создайте приложение, которое уничтожает контент на странице и пишет туда что-нибудь, любой бред, а уже потом замените бред на данные которые content-script.js получит от background-script.js. Это будет первая задача

[0ffff0]

demon1806, Листинги отредактированы, попробуйте еще раз, только имейте ввиду, расширение написано кривыми руками(моими), работает оно очень неэффективно и грузит комп на все ядра.
Эффект от него следующий,
Открываем vk и видим что часть картинок заменена на физиономию мужика у которого волосы встали дыбом.

На вкладке, которая открывается по кнопке с панели выводятся запросы

[0ffff0]

demon1806, сделайте пока под фаерфох, потом с вашим хромом разберемся

[0ffff0]

demon1806, и тестируйте лучше отдельные модули, если не работают, еще не означает, что реализация под хром не подходит, например вот этот код не заработает,

var pattern = "https://mdn.mozillademos.org/*";
//background.js
function redirect(requestDetails) {
  console.log("Redirecting: " + requestDetails.url);
  return {
    redirectUrl: "https://38.media.tumblr.com/tumblr_ldbj01lZiP1qe0eclo1_500.gif"
  };
}

browser.webRequest.onBeforeRequest.addListener(
  redirect,
  {urls:[pattern], types:["image"]},
  ["blocking"]
);

пока не добавишь в манифест одну строчку

//вместо манифеста 
{

  "description": "Demonstrating webRequests",
  "manifest_version": 2,
  "name": "webRequest-demo",
  "version": "1.0",

  "permissions": [
    "webRequest",
    "webRequestBlocking",
"*://mdn.mozillademos.org/*",
	
  ],
 
  "background": {
    "scripts": ["background.js"]
  }

}
//который на mdn

//используйте этот исправленный

{

  "description": "Demonstrating webRequests",
  "manifest_version": 2,
  "name": "webRequest-demo",
  "version": "1.0",

  "permissions": [
    "webRequest",
    "webRequestBlocking",
	"<all_urls>",
    "*://mdn.mozillademos.org/*",
	
  ],
 
  "background": {
    "scripts": ["background.js"]
  }

}

И всего делов, все перехватывается и перехваченные запросы отображаются в консоли

[demon1806]

0ffff0, я правильно понимаю, что в одном и том же расширении Вы заменили картинке на сайте и тут же вывели какую-то информацию на сайт "test1.ru" ? Если так, то у меня не получилось повторить это же, но примеры с официального сайта у меня получилось претворить в жизнь. Что в итоге дальше делать, Вы не подскажите случаем ? Просто не могу сообразить, как в итоге вывести URL и headers тогда... Вот, как пример доказательства, если что:



Вот что-то типа этого требовалось, не так ли ?

А вот, что в итоге сделал, но до конца так и не дошёл...:

manifest.json.

{

"manifest_version": 2,
"name": "modify-page",
"version": "1.0",

"permissions": [
"activeTab",
"contextMenus",
"webRequest",
"webRequestBlocking",
"https://developer.mozilla.org/",
"https://mdn.mozillademos.org/",
"https://www.youtube.com/"
],

"background": {
"scripts": ["background.js"]
}

}

background.js.

'use strict';

var targetPage = "https://www.youtube.com/*";
browser.webRequest.onBeforeRequest.addListener(function(details) {
var scheme = /^https/.test(details.url) ? 'https' : 'http';
return { redirectUrl: scheme + '://robwu.nl/204' };
}, {
urls: ['*://www.youtube.com/*'] // Example: Block all requests to YouTube
}, ['blocking']);

var request = new XMLHttpRequest();
request.open("GET", "foo.txt", true);
request.send();

request.onreadystatechange = function() {
if(this.readyState === this.HEADERS_RECEIVED) {

// Get the raw header string
var headers = request.getAllResponseHeaders();

// Convert the header string into an array
// of individual headers
}
};

browser.contextMenus.create({
id: "eat-page",
title: "Eat this page"
});

function messageTab(tabs) {
browser.tabs.sendMessage(tabs[0].id, {
replacement: "Message from the extension!"
});
}

function onExecuted(result) {
var querying = browser.tabs.query({
active: true,
currentWindow: true
});
querying.then(messageTab);
}

browser.contextMenus.onClicked.addListener(function(info, tab) {
if (info.menuItemId == "eat-page") {
let executing = browser.tabs.executeScript({
file: "page-eater.js"
});
executing.then(onExecuted);
}
});

page-eater.js.

function eatPageReceiver(request, sender, sendResponse) {
document.body.textContent = "";
var header = document.createElement('h1');
header.textContent = request.replacement;
document.body.appendChild(header);
}
browser.runtime.onMessage.addListener(eatPageReceiver);

var elem = document.getElementById('header');
//var arr = headers.trim().split(/[\r\n]+/);

// Create a map of header names to values
var elem = {};
arr.forEach(function (line) {
var parts = line.split(': ');
var header = parts.shift();
var value = parts.join(': ');
headerMap[header] = value;
elem.innerHTML = "header";
});
//alert(JSON.stringify(headerMap));
//

В итоге только вот это вышло...:

[0ffff0]

demon1806, мдя

[0ffff0]

demon1806, вот отличный реф для межскриптового общенияruntime.connect()
работает из под хрома, проверено, только замените browser на chrome, как обычно
На его основе при должной сноровке можно вывести urlы на страницу

Например делаем

//content-script
document.body.textContent = "";

var p = document.createElement('p');

p.textContent = "This page has been eaten";
var responses = ['a','b'];

document.body.appendChild(p);


var myPort = chrome.runtime.connect({name:"port-from-cs"});
myPort.postMessage({greeting: "hello from content script"});

myPort.onMessage.addListener(function(m) {
  console.log("In content script, received message from background script: ");
  console.log(m.greeting);
  
 p.textContent = "response: "+m.urls+ " !!!! If page is empty or response is undefined must visiting other tabs and reload this page!!!!";
 
  
});

document.body.addEventListener("click", function() {
  myPort.postMessage({greeting: "they clicked the page!"});
   p.textContent = ' if you se this reload the page please ';
});

//background.js
var data = ["All urls: "];
var i = 0;
chrome.tabs.create({"url": "http://test1.ru"});
function logURL(requestDetails) {
 i++; 
 data[i]=requestDetails.url;
 console.log("i "+i+ " data: "+data[i]+" Your URL is : " + requestDetails.url);
return i

}
chrome.webRequest.onBeforeRequest.addListener(
  logURL,
  {urls: ["<all_urls>"]},
  
  );

var portFromCS;

function connected(p) {
	
  portFromCS = p;
  portFromCS.postMessage({greeting: "hi there content script!",urls:data});
  portFromCS.onMessage.addListener(function(m) {
    console.log("In background script, received message from content script")
    console.log(m.greeting)
	
  });
}

chrome.runtime.onConnect.addListener(connected);

chrome.browserAction.onClicked.addListener(function() {
  portFromCS.postMessage({greeting: "they clicked the button!"});
});

но имейте ввиду что в строке
chrome.tabs.create({"url": "http://test1.ru"});
вам надо вписать другой url поскольку test1.ru существует только у меня в локальной сети

[0ffff0]

demon1806,

Вот что-то типа этого требовалось, не так ли ?

Не перестаете меня радовать!
Нет конечно .

[0ffff0]

результат должен быть таким

[demon1806]

0ffff0, я сделал всё, как у Вас, но мой максимальный результат таков...:



Код оформил вот таким образом:

manifest.json.

{

"description": "Demonstrating webRequests",
"manifest_version": 2,
"name": "webRequest-demo",
"version": "1.0",

"permissions": [
"webRequest",
"webRequestBlocking",
"",
"*://www.youtube.com//*"

],

"background": {
"scripts": ["background.js"]
},
"browser_action": {}

}

background.js.

//background.js
var data = ["All urls: "];
var i = 0;
chrome.tabs.create({"url": "https://www.youtube.com/"});
function logURL(requestDetails) {
i++;
data[i]=requestDetails.url;
console.log("i "+i+ " data: "+data[i]+" Your URL is : " + requestDetails.url);
return i

}
chrome.webRequest.onBeforeRequest.addListener(
logURL,
{urls: [""]},

);

var portFromCS;

function connected(p) {

portFromCS = p;
portFromCS.postMessage({greeting: "hi there content script!",urls:data});
portFromCS.onMessage.addListener(function(m) {
console.log("In background script, received message from content script")
console.log(m.greeting)

});
}

chrome.runtime.onConnect.addListener(connected);

chrome.browserAction.onClicked.addListener(function() {
portFromCS.postMessage({greeting: "they clicked the button!"});
});

content-script.js.

//content-script
document.body.textContent = "";

var p = document.createElement('p');

p.textContent = "This page has been eaten";
var responses = ['a','b'];

document.body.appendChild(p);

var myPort = chrome.runtime.connect({name:"port-from-cs"});
myPort.postMessage({greeting: "hello from content script"});

myPort.onMessage.addListener(function(m) {
console.log("In content script, received message from background script: ");
console.log(m.greeting);

p.textContent = "response: "+m.urls+ " !!!! If page is empty or response is undefined must visiting other tabs and reload this page!!!!";

});

document.body.addEventListener("click", function() {
myPort.postMessage({greeting: "they clicked the page!"});
p.textContent = ' if you se this reload the page please ';
});

Всё правильно сделал или нет ? Открывается ли файл сверху или нет ?? А как Вы сделали, чтобы тот URL существовал в локальной сети? У меня такое ощущение снова, что я неверно сделал какие-то моменты... Извините, что, возможно, в очередной раз Вас достал, просто уже хочется доделать хотя бы это...:((( Спасибо большое заранее за помощь !

[0ffff0]

demon1806, добавить в манифест

"content_scripts":[
	{
	"matches": ["*://*.thet_s_all.ru/*"],
	"js":["pageeater.js"]
	
	}
	]

[demon1806]

0ffff0, в общем ситуация осталась прежней:



Может вот здесь таится ключ к разгадке, как считаете ?



Просто он по ходу до некоторых функций вывода так и не доходит... У Вас такой же код или нет ? У меня ситуации одинаковы и в "Chrome", и в "Firefox"((( Не знаю, что ещё можно сделать:((( Открываются ли данные файлы, всё видно и понятно там ?? Код манифеста у меня стал таким, если что, остальные файлы я не менял:

{

"description": "Demonstrating webRequests",
"manifest_version": 2,
"name": "webRequest-demo",
"version": "1.0",

"permissions": [
"webRequest",
"webRequestBlocking",
"",
"*://www.youtube.com//*"

],

"background": {
"scripts": ["background.js"]
},
"browser_action": {},

"content_scripts":[
{
"matches": ["*://*.thet_s_all.ru/*"],
"js":["pageeater.js"]

}
]
}

Всё ли верно здесь или нет ??

[0ffff0]

demon1806, РЖУ НИМАГУ и над фото и над этим:

Всё ли верно здесь или нет ??

Ну зачем вы скопипастили, а голова, а думать?
"matches": ["*://*.youtube.com/*"],
Вот, утештесь.
И на будущее : если url выглядит как шутка, его надо заменить

[demon1806]

0ffff0, ДА, ПРИЗНАЮ, ЧТО БЫЛ НЕВНИМАТЕЛЕН, спасибо Вам большое за помощь ! Всё получилось:



На будущее запомню. Сейчас буду думать, как остальные headers вывести, чтобы в итоге привести к специальному виду... Открывается ли данный файл, всё видно там, кстати, и понятно ? Вы не могли бы ещё подсказать, как можно вывести в итоге ещё заголовки, а то я немного не могу сообразить, хоть и понимаю, что это делается интуитивно также, как и URL ?

[0ffff0]

demon1806, Ну типа,

var test1 = [];
  function logHeaders(e){
	
		for(var i in e.requestHeaders){
			test1[i] = e.requestHeaders;
			console.log("headers "+test1[0][i].value)
		}
				
		 

	return test1,{requestHeaders: e.requestHeaders};
  }
chrome.webRequest.onSendHeaders.addListener(
logHeaders,
{urls:["<all_urls>"]},
	["requestHeaders"]
)

[0ffff0]

demon1806, Ну чё как чё?

[demon1806]

0ffff0, я вот только не могу понять, что теперь дописать ещё нужно, чтобы эти headers он выводил на страницу, а то как-то получается нужно ещё один цикл запускать или как, не подскажите и это случаем ? Я просто, руководствуясь документацией, решил вот так сделать или это бред в итоге ?

background.js.

//background.js
var data = ["You have requested: "];
var i = 0;
chrome.tabs.create({"url": "https://www.youtube.com/"});
function logURL(requestDetails) {
i++;
data[i]=requestDetails.url;
console.log("i "+i+ " data: "+data[i]+" URL : " + requestDetails.url);
return i

}
chrome.webRequest.onBeforeRequest.addListener(
logURL,
{urls: [""]},

);

var test1 = [];
function logHeaders(e){

for(var i in e.requestHeaders){
test1[i] = e.requestHeaders;
console.log("headers "+test1[0][i].value)
}

return test1,{requestHeaders: e.requestHeaders};
}
chrome.webRequest.onSendHeaders.addListener(
logHeaders,
{urls:[""]},
["requestHeaders"]
)

var portFromCS = []

function connected(p) {

portFromCS[0] = p
portFromCS.postMessage({greeting: "hi there content script!",urls:data});
portFromCS.onMessage.addListener(function(m) {
console.log("In background script, received message from content script")
console.log(m.greeting)

portFromCS[1] = p
portFromCS.postMessage({greeting: "hi there content script!",urls:data});
portFromCS.onMessage.addListener(function(m) {
console.log("In background script, received message from content script")
console.log(m.greeting)
})})}

chrome.runtime.onConnect.addListener(connected);

chrome.browserAction.onClicked.addListener(function() {
portFromCS.forEach(p => {
p.postMessage({greeting: "they clicked the button!"});
})
});

А здесь думаю, как это можно грамотно сваять, честно говоря...:

pageeater.js.

//content-script
document.body.textContent = "";

var p = document.createElement('p');

p.textContent = "This page has been eaten";
var responses = ['a','b'];

document.body.appendChild(p);

var myPort = chrome.runtime.connect({name:"port-from-cs"});
myPort.postMessage({greeting: "hello from content script"});

myPort.onMessage.addListener(function(m) {
console.log("In content script, received message from background script: ");
console.log(m.greeting);

p.textContent = ""+m.urls+ "";

});

document.body.addEventListener("click", function() {
myPort.postMessage({greeting: "they clicked the page!"});
p.textContent = ' if you see this reload the page please ';
});

Просто с ходу не могу понять, и это печально(((

[0ffff0]

demon1806,

думаю, как это можно грамотно сваять, честно говоря...:

между нами девочками, грамотно это не про нас, делайте просто чтоб работало.
Как по мне,

portFromCS.postMessage({greeting: "hi there content script!", urls:data, 

headers:test1 
//и на той стороне p.textContent = headers[такой-то][такой-то].value
});

достаточно хорошо для вас

[demon1806]

0ffff0, я очень долго пытался сегодня доделать, но ничего почему-то не получается... Вы не могли бы снова подсказать, почему всё опять не так, а то вроде сделал, как мне говорили, (см. выделенные строки)?...



Вот в итоге, что вышло:



Открываются ли данные фалы, всё видно и понятно там ??

[0ffff0]

demon1806,

[0ffff0]

похоже админы на нас болт забили, теперь только картинками будем обмениваться

[demon1806]

0ffff0, всё сделал, как у Вас, но ничего в итоге до конца не получается, вот код, если что:

pageeater.js

//content-script
function outHeaders(param){
for(var i = 0; i < param.length; i++) {
for(var j = 0; j < param[i].length; j++) {
console.log("header "+i+"."+j)
console.log(param[i][j].name+" : "+ param[i][j].value)
}
}
}
document.body.textContent = "";

var p = document.createElement('p');

p.textContent = "This page has been eaten";

document.body.appendChild(p);

var myPort = chrome.runtime.connect({name:"port-from-cs"});
myPort.postMessage({greeting: "hello from content script"});

myPort.onMessage.addListener(function(m) {
console.log("In content script, received message from background script: ");
console.log(m.greeting);
outHeaders(m.headers);
p.textContent = ""+m.urls+outHeaders(m.headers)+"";

});

document.body.addEventListener("click", function() {
myPort.postMessage({greeting: "they clicked the page!"});
p.textContent = ' if you see this reload the page please ';
});

В итоге вот такая история:



Я уже пробовал по-разному экспериментировать, но всё как-то не срастается...:((( Вы не могли бы ещё подсобить ? Спасибо большое за терпение и помощь ! Может тогда будем общаться посредством какой-нибудь почты или мессенджеров, или сообщениями по телефону или, как вариант, через социальные сети, если это Вас не затруднит ? При желании всё-таки сотрудничать могу предоставить данные для связи или в другом случае жду такой же обратной связи. Приму любой ответ. Открывается ли, кстати, данный файл, всё видно и понятно там ?? Я слышал, что через такую структуру можно сделать:

body = document.getElementsByTag('body');
body.innerHTML =

Но я не могу понять, как...

[0ffff0]

demon1806, история такая ровно как надо, вывели заголовки в консоль.
Теперь на страницу:



Вот. Печатайте.

[demon1806]

0ffff0, я ничего не могу понять, (см. выделенные строки)...:



Результат в итоге таков(((:



Вы также написали код или нет ? Я теперь просто в замешательстве...:((( Открываются ли данные файлы, всё видно и понятно там ??

[0ffff0]

demon1806, все верно.
Там у меня косяк, только последний заголовок выводится, ща исправлю

[0ffff0]

demon1806, этот кусок без косяков:

function outHeaders(param){
		
		var data = [], p = document.createElement('p');
		document.body.appendChild(p);
		for(let i = 0; i<param.length; i++){
			for(let j = 0; j<param[i].length; j++){
			
			 data += " header "+i+"."+j+" : "+param[i][j].name+" : "+ param[i][j].value+"  ****";
			
			 }
		}
		p.textContent = data;
	}

ну почти

[demon1806]

0ffff0, спасибо Вам большое ! Всё получилось !! В общем у меня теперь вот такое задание: "Необходимо реализовать плагин для впн. Там, где выбирается страна, и он кидает сайты на локальный прокси." Начну в первую очередь с браузера "Chrome". Вы не могли бы и с этим помочь ?

[0ffff0]

demon1806, скиньте ваш телеграм

[demon1806]

0ffff0, вот:



Открывается ли данный файл, всё видно и понятно там ?
У меня в принципе уже есть представление реализации данного проекта, но не все моменты пока ясны, если честно... Пробую сейчас разобраться с реализацией уже готовых таких программных продуктов...:((( Вот, если что, мой номер телефона, по которому можно найти контакт "Telegram": 8-983-563-24-08.