如何点击Chrome扩展按钮直接打开带dev前缀的URL，移除弹窗

要把原来的弹窗触发改成点击图标直接执行操作，只需三步：

1. 删除弹窗相关文件 #

直接删掉项目里的popup.html和popup.js，我们不再需要弹窗界面。

2. 修改manifest.json #

更新配置，移除弹窗设置，添加后台服务脚本（Manifest V3 用 Service Worker 处理图标点击事件）：

{
    "name": "My URL Changer",
    "version": "1.0",
    "manifest_version": 3,
    "permissions": ["tabs"],
    "host_permissions": ["<all_urls>"],
    "action": {
        "default_title": "My URL Changer"
    },
    "background": {
        "service_worker": "background.js"
    }
}

• 移除了action字段下的default_popup配置
• 添加background字段指定后台脚本文件
• 权限调整为tabs（仅需查询标签页信息，无需注入脚本），保留host_permissions确保能处理所有URL

3. 创建background.js文件 #

把原来弹窗里的URL修改逻辑移到这里，监听扩展图标点击事件：

chrome.action.onClicked.addListener(() => {
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
        const url = new URL(tabs[0].url);
        // 避免重复添加dev.前缀
        if (!url.hostname.startsWith('dev.')) {
            url.hostname = `dev.${url.hostname}`;
            chrome.tabs.create({ url: url.toString() });
        }
    });
});

• 用chrome.action.onClicked监听图标点击动作
• 保留原有的标签页查询和URL修改逻辑，额外增加前缀重复判断（可选但能提升体验）

修改完成后，点击扩展图标就会直接在新标签页打开带dev.前缀的目标URL，完全不需要弹窗操作。

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