Я застрял в основной программе c как раз тогда, когда я начал изучать расширение chrome. Моя программа - создать расширение, у которого есть кнопка для изменения цвета веб-страницы. Изменение цвета должно производиться в зависимости от действия, поэтому я не использовал значение по умолчанию css для изменения цвета при загрузке страницы. Ниже мои файлы. У меня есть проблема chrome .tabs.query в фоновом режиме. js не возвращает массив вкладок, и я получаю «ID not referenced error». Любая помощь приветствуется. Я просмотрел n статей в Google и StackOverflow, но мне ничего не помогает
Files: manifest. json
{
"manifest_version": 2,
"name": "Hello world",
"description": "Demo extension",
"version": "1.0",
"icons":
{
"16": "images/dog.png",
"48": "images/dog.png",
"128": "images/dog.png"
},
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"browser_action":
{
"default_icon": "images/dog.png",
"default_popup": "popup.html"
},
"content_scripts": [{
"js": ["content.js"],
"matches": ["<all_urls>"]
}],
"permissions": ["tabs", "http://*/*","activeTab"]
}
background. js
chrome.runtime.onMessage.addListener(
function(message, sender, sendResponse) {
switch(message.type) {
case "setcolor":
chrome.tabs.query({active: true, currentWindow: true}, function(tab){
chrome.tabs.sendMessage(tab[0].id,{type: "setcolor",color: message.color})
});
break;
default:
console.error("Unrecognised message: ", message);
}
всплывающее окно. html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="demo">Click below button to change color of page</p>
<button type="button" id = "red"> RED </button>
<script src = "myscript.js"></script>
</body>
</html>
myscript. js (или всплывающее окно. js)
function color(colorval) {
chrome.runtime.sendMessage({type: "setcolor",color: colorval})
}
document.getElementById('red').addEventListener('click', color('red'));
содержимое. js
chrome.runtime.onMessage.addListener(
function(message, sender, sendResponse) {
document.body.style.backgroundColor = message.color;
}
);