У меня есть расширение chrome, которое меняет цвет текущей веб-страницы. Во всплывающем окне у меня есть палитра цветов, откуда я выбираю цвет. Когда я нажимаю «изменить», цвет веб-страницы меняется на цвет, который я выбираю. Я хочу добавить цвета, которые мне нравятся, поэтому я хочу, чтобы при нажатии «добавить» мой любимый цвет добавлялся ниже. мой код работает хорошо, цвет обычно добавляет ниже. Проблема в том, что дополнительный ввод получает значение цвета, но когда я добавляю второй цвет (с вводом), ввод меняет цвет, но цвет предыдущего ввода также меняется. Предыдущий ввод имеет значение предыдущего цвета, но не сохраняет цвет. Как на картинке ниже. Может кто-то мне помочь, пожалуйста?
мой код
содержание. js
chrome.runtime.sendMessage({todo: "showPageAction"});
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
if (request.todo == "changeColor"){
var addColor = '#' + request.clickedColor;
$('body').css('font-style','italic');
$('body').css('color', addColor);
$('*').css('color', addColor);
}
});
всплывающее окно. js
$(function(){
color = $('#fontColor').val();
$("#fontColor").on("change paste keyup", function() {
color = $(this).val();
});
$('#btnChange').click(function(){
chrome.tabs.query({active:true,currentWindow: true}, function(tabs){
chrome.tabs.sendMessage(tabs[0].id, {todo: "changeColor", clickedColor: color })
});
});
$('.addc').click(function(){
let col = document.createElement('input');
col.type= "text";
col.className = "addCol";
col.width = "20px";
col.value = '#' + color;
chrome.storage.local.set({key: col.value});
let addBackColor = document.querySelector('.col');
addBackColor.appendChild(col);
chrome.storage.local.get(['key'], function(result) {
$('.addCol').css('background', result.key)
});
})
});