Question

当用户单击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类，因此此处的文本应更改为在答题器中选择的所选颜色，并在单击更改按钮后更改。

当我单击jscolor中的颜色时，如何获得触发功能？

0 个答案: