Chrome扩展中使用jQuery .css()无法向活动标签页注入CSS的问题

问题排查与修复步骤 #

1. 阻止表单默认提交行为 #

你的popup里用了submit类型的按钮，点击会触发表单默认提交逻辑，直接刷新popup页面，导致消息还没发送就被中断。在点击事件里加上阻止默认行为的代码：

修改popup.js的点击事件：

$('#btnChange').click(function(event) {
    // 阻止表单提交刷新页面
    event.preventDefault();
    chrome.tabs.query({
        active: true,
        currentWindow: true
    }, async function(tabs) {
        await chrome.tabs.sendMessage(tabs[0].id, {
            todo: "changeColor",
            clickedColor: color
        });
    });
});

2. 修正content脚本的jQuery加载顺序 #

manifest.json里content_scripts的js数组顺序搞反了，必须先加载jQuery，再加载依赖它的content.js，否则content.js里的jQuery代码会报错：

"content_scripts" :[{
    "matches" : ["https://developer.chrome.com/*"],
    "js" : ["jquery-3.7.0.min.js", "content.js"]
}]

3. 修正颜色值的处理逻辑 #

jscolor插件返回的颜色值已经自带#前缀（比如#ff0000），你在content.js里额外加了一个#，会变成##ff0000，这是无效的CSS颜色值。直接使用插件返回的原始值即可：

chrome.runtime.onMessage.addListener(function(request,sender,sendResponse){
    if (request.todo == "changeColor"){
        $('#view').css('color', request.clickedColor);      
    }
});

4. 确认目标页面的元素选择器是否正确 #

访问目标页面https://developer.chrome.com/docs/devtools/css/，检查是否存在id="view"的元素。实际页面里这个选择器不存在，换成页面真实的内容区域选择器，比如主内容区的.devsite-article-body：

$('.devsite-article-body').css('color', request.clickedColor);

调试小技巧 #

• 打开Chrome开发者工具的「扩展」面板，检查content脚本是否正确注入到目标页面
• 在content.js里加console.log(request)，查看接收到的消息内容是否正确
• 在popup.js里加console.log(color)，确认发送的颜色值是否符合预期

内容的提问来源于stack exchange，提问作者akashKP