Ответ 1
Вы можете сделать это, но вам нужно будет использовать расширения Chrome.
Расширения Chrome имеют много безопасности в стиле песочницы. Связь между расширением Chrome и веб-страницей - это многоэтапный процесс. Здесь самое краткое объяснение, которое я могу предложить с полным рабочим примером в конце:
-
Расширение Chrome имеет полный доступ к хром. * API, но расширение Chrome не может напрямую связываться с веб-страницей JS, и веб-страница JS не может напрямую взаимодействовать с расширением Chrome.
-
Чтобы устранить разрыв между расширением Chrome и веб-страницей, вам необходимо использовать content script. Содержимое script - это, по сути, JavaScript, который вводится в области
windowцелевой веб-страницы. Содержимое script не может вызывать функции и не использовать переменные, созданные на веб-странице JS, , но они совместно используют доступ к тем же DOM и, следовательно, к событиям. -
Поскольку прямой доступ к переменным и вызывающим функциям не разрешен, единственный способ, которым может взаимодействовать веб-страница и контент script, - это запустить настраиваемые события.
Например, если я хочу передать сообщение из расширения Chrome на страницу, я мог бы сделать это:
content_script.js
document.getElementById("theButton").addEventListener("click", function() {
window.postMessage({ type: "TO_PAGE", text: "Hello from the extension!" }, "*");
}, false);
web_page.js
window.addEventListener("message", function(event) {
// We only accept messages from ourselves
if (event.source != window)
return;
if (event.data.type && (event.data.type == "TO_PAGE")) {
alert("Received from the content script: " + event.data.text);
}
}, false);
`4. Теперь, когда вы можете отправить сообщение из содержимого script на веб-страницу, теперь вам нужно, чтобы расширение Chrome собирало всю необходимую вам информацию о сети. Вы можете выполнить это через пару разных модулей, но самым простым вариантом является модуль webRequest (см. background.js ниже).
`5. Используйте сообщение, передающее, чтобы передать информацию о веб-запросах в контент script, а затем перейти на веб-страницу JavaScript.
Визуально, вы можете думать об этом так:
Полный рабочий пример:
Первые три файла содержат расширение Google Chrome, а последний файл - это файл HTML, который вы должны загрузить в веб-пространство http://.
icon.png
Используйте любой PNG файл 16x16.
manifest.json
{
"name": "webRequest Logging",
"description": "Displays the network log on the web page",
"version": "0.1",
"permissions": [
"tabs",
"debugger",
"webRequest",
"http://*/*"
],
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": "icon.png",
"default_title": "webRequest Logging"
},
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["content_script.js"]
}
],
"manifest_version": 2
}
background.js
var aNetworkLog = [];
chrome.webRequest.onCompleted.addListener(function(oCompleted) {
var sCompleted = JSON.stringify(oCompleted);
aNetworkLog.push(sCompleted);
}
,{urls: ["http://*/*"]}
);
chrome.extension.onConnect.addListener(function (port) {
port.onMessage.addListener(function (message) {
if (message.action == "getNetworkLog") {
port.postMessage(aNetworkLog);
}
});
});
content_script.js
var port = chrome.extension.connect({name:'test'});
document.getElementById("theButton").addEventListener("click", function() {
port.postMessage({action:"getNetworkLog"});
}, false);
port.onMessage.addListener(function(msg) {
document.getElementById('outputDiv').innerHTML = JSON.stringify(msg);
});
И используйте для веб-страницы следующие строки (называемые так, как вы хотите):
<!doctype html>
<html>
<head>
<title>webRequest Log</title>
</head>
<body>
<input type="button" value="Retrieve webRequest Log" id="theButton">
<div id="outputDiv"></div>
</head>
</html>