Để thiết lập kết nối giữa Devtools Page và nhiều trang content script, Background Page được sử dụng làm người hòa giải. Vì vậy, ý tưởng là có một kênh từ devtools đến background và từ background đến content scripts. Đây là một phương pháp chung cần thiết để xử lý bản chất biến của tập lệnh nội dung execution time.
Bạn có thể sử dụng tập lệnh sau làm tài liệu tham khảo để liên lạc giữa devtools.js đến content scripts.
manifest.json
đăng ký background, devtools và content scripts để biểu thị tập tin
{
"name": "Inspected Windows Demo",
"description": "This demonstrates Inspected window API",
"devtools_page": "devtools.html",
"manifest_version": 2,
"version": "2",
"permissions": [
"experimental",
"tabs"
],
"background": {
"scripts": [
"background.js"
]
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"myscript.js"
]
}
]
}
devtools.html
đăng ký devtools.js tuân thủ CSP
<html>
<head>
<script src="devtools.js"></script>
</head>
<body></body>
</html>
devtools.js
//Created a port with background page for continous message communication
var port = chrome.extension.connect({
name: "Sample Communication" //Given a Name
});
//Posting message to background page
port.postMessage("Request Tab Data");
//Hanlde response when recieved from background page
port.onMessage.addListener(function (msg) {
console.log("Tab Data recieved is " + msg);
});
myscript.js
//Handler request from background page
chrome.extension.onMessage.addListener(function (message, sender) {
console.log("In content Script Message Recieved is " + message);
//Send needed information to background page
chrome.extension.sendMessage("My URL is" + window.location.origin);
});
background.js
//Handle request from devtools
chrome.extension.onConnect.addListener(function (port) {
port.onMessage.addListener(function (message) {
//Request a tab for sending needed information
chrome.tabs.query({
"status": "complete",
"currentWindow": true,
"url": "http://www.google.co.in/"
}, function (tabs) {
for (tab in tabs) {
//Sending Message to content scripts
chrome.tabs.sendMessage(tabs[tab].id, message);
}
});
});
//Posting back to Devtools
chrome.extension.onMessage.addListener(function (message, sender) {
port.postMessage(message);
});
});
Output
Bạn có thể thấy http://www.google.co.in/ được nhận được trong devtools trang
Tài liệu tham khảo
Bạn có thể tham khảo các tài liệu sau đây để biết thêm thông tin.