Я узнаю о расширениях Chrome и с трудом разбираюсь в передаче сообщений.
Чтобы лучше это понять, у меня есть кнопка, и при щелчке она превращает содержимое на страницу в красный цвет, и, если есть содержимое дляобновите заголовок самого всплывающего окна.
Но я продолжаю получать ошибки:
"Unchecked runtime.lastError: Порт сообщения закрыт до получения ответа."
(внутри инструмента разработки расширений Chrome)
и
"Ошибка в обработчике событий: TypeError: Невозможно прочитать свойство 'query' из undefined в расширении chrome: //jhpandehcddbmdcjiaioihimniapmpci / content_script.js: 8: 29 "
(на инструментах разработчика активной страницы)
Может ли кто-нибудь указать на хорошие ресурсы или простое решение для этого?
манифест.json
{
"manifest_version": 2,
"name": "My ExTeNsIoN",
"version": "1.0",
"description": "My Extension",
"permissions": [
"tabs","<all_urls>"
],
"browser_action": {
"default_popup": "popup.html"
},
"content_scripts": [{
"matches": ["http://*/*","https://*/*"],
"js": ["jquery-3-4-0-min.js", "content_script.js"]
}]
}
popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Extension</title>
<link rel="stylesheet" type="text/css" href="popup.css">
</head>
<body>
<h1 id="the_title"></h1>
<input type="submit" id="color_button" value="Change Color">
<script src="jquery-3-4-0-min.js"></script>
<script src="popup.js"></script>
</body>
</html>
popup.js
$("#color_button").on("click",function() {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
console.log("sending hello greeting.");
});
});
})
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.greeting == "hello_2") {
$("#the_title").text("This Worked!");
}
});
content_script.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.greeting == "hello") {
$("p").css("color","#ff0000");
if($("p")) {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello_2"}, function(response) {
console.log("sending hello_2 greeting.");
});
});
}
}
});