当我使用chrome.runtime.sendMessage时，它会生成错误处理响应？

Question

这是我的popup.js中的代码：

$(function()
{
    let color = $("input").val();
    $("input").on("change paste keyup", function(){
        color = $(this).val();
    });
    $("button").click(function()
    {
        chrome.tabs.query({active:true, currentWindow:true},function(tabs){
            chrome.runtime.sendMessage(tabs[0].id, {todo:"change", clicked: color});
        });
    });
});

这是我的内容脚本中的代码：

chrome.runtime.sendMessage({todo:"showPage"});

chrome.runtime.onMessage.addListener(function(req,sender,sendResponse)
{
        if(req.todo == "change")
        {
                let add = "#"+req.clicked;
                $('.api').css('color', add);
        }
});

当我单击按钮时，我的popup.js文件应该将消息发送到内容脚本，但是当我单击按钮时，出现错误：

Error handling response: 
TypeError: Error in invocation of runtime.sendMessage(optional string extensionId, any message, optional object options, optional function responseCallback): 
Error at parameter 'options': Unexpected property: 'todo'.

我在这里错过了什么吗？我也尝试了responseCallback，但是也没有用。