Когда пользователь щелкает цвет в диаграмме цвета из jscolour, я хочу, чтобы он запустил эту функцию и назначил цвет переменной, которая позже будет отправлена как .sendMessage в content.js, который его получит и изменит цвет элемент на странице выбранного цвета.
То, что происходит сейчас, это только то, что передается только значение по умолчанию (указанное в html), а цвет меняется только на значение по умолчанию. Взаимодействие с диаграммой цвета не приводит к чему-либо другому, кроме изменения текста в блоке, но текст в блоке никогда не будет переназначен на передаваемую переменную. Сообщение отправляется и принимается правильно, просто назначение цвета - нет.
Я попробовал инструменты разработчика на Chrome, чтобы увидеть, срабатывает ли функция вообще, а также отслеживать значение переменной с помощью точек останова
<body>
<input type="text" id="fontColor" class = "jscolor" />
<input type="submit" id="btnChange" value="change"/>
</body>
$(() => {
var color = $('#fontColor').val();
$('#fontColor').on("change paste keyup", () =>{
color = $(this).val();
alert(color);
});
$('#btnChange').click(() =>{
chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
chrome.tabs.sendMessage(tabs[0].id, {todo: "changeColor", clickedColor: color });
});
});
});
chrome.runtime.sendMessage({todo: "showPageAction"});
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.todo == "changeColor"){
var addColor = '#' + request.clickedColor;
console.log(addColor)
$('.api').css('color', addColor);
}
});
Цвет статьи должен измениться. Он имеет класс api, поэтому текст там должен измениться на выбранный цвет, выбранный в кликере и измененный при нажатии кнопки изменения.