Chrome扩展按钮addEventListener未触发问题排查

最常见问题：控制台打开位置错误 #

你大概率是打开了当前网页的开发者控制台，但popup内的日志只会显示在popup专属控制台中。正确操作：点击扩展图标弹出界面后，右键点击按钮区域，选择「检查」，打开的控制台才能看到console.log的输出。

弹窗被拦截的解决方案 #

window.open容易被浏览器弹窗拦截策略限制，改用Chrome扩展原生的tabs.createAPI更稳定：

1. 更新manifest的权限配置：

{
    "manifest_version": 2,
    "name": "YouTube Button",
    "description": "A button that opens YouTube",
    "version": "1.0",
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "index.html"
    },
    "permissions": [
        "activeTab",
        "tabs"
    ]
}

2. 修改popup的脚本：

document.getElementById("youtube-button").addEventListener("click", function() {
    console.log('clicked youtoob button!');
    chrome.tabs.create({url: "https://www.youtube.com/"});
});

可选优化：确保DOM加载完成后绑定事件 #

虽然你的脚本位置已经在按钮之后，不会有DOM未加载的问题，但添加DOM加载监听可以适配更复杂的场景：

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById("youtube-button").addEventListener("click", function() {
        console.log('clicked youtoob button!');
        chrome.tabs.create({url: "https://www.youtube.com/"});
    });
});

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