Chrome扩展中如何添加并关联跳转多个HTML页面？

原代码失效原因 #

chrome.browserAction.setPopup() 仅会修改后续点击扩展图标时触发的弹窗页面，对当前已经打开的popup实例不会产生任何效果，因此点击按钮后看不到变化。

推荐实现方式 #

方式1：弹窗内直接切换页面（最适配你的需求） #

直接在当前已打开的popup容器内跳转页面，无需额外创建窗口，操作逻辑最顺畅：

1. 替换popup.js中的按钮点击逻辑：

const settingsButton = document.getElementById('settings-btn');
settingsButton.addEventListener('click', () => {
    // 直接在当前弹窗上下文跳转至设置页
    window.location.replace('settings.html');
});

2. 在settings.html对应的js文件（比如settings.js）中添加返回逻辑：

const backButton = document.getElementById('back-btn');
backButton.addEventListener('click', () => {
    // 跳转回主弹窗页
    window.location.replace('popup.html');
});

方式2：独立窗口打开设置页 #

如果需要设置页脱离扩展图标弹窗，作为独立窗口常驻，可以使用该方案：
在popup.js中编写如下逻辑：

const settingsButton = document.getElementById('settings-btn');
settingsButton.addEventListener('click', () => {
    // 创建独立弹窗打开设置页
    chrome.windows.create({
        url: 'settings.html',
        type: 'popup',
        width: 450,
        height: 600
    }, () => {
        // 打开设置页后关闭原主弹窗
        window.close();
    });
});

适配注意事项 #

• 如果你使用的是Manifest V3版本的扩展，Chrome已经废弃了chrome.browserAction API，统一替换为chrome.action API即可。
• 确保所有html文件路径填写正确，若文件存放在扩展子目录下需要补全相对路径。

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