Chrome扩展V3中如何实现登录后立即跳转至popup.html页面

原代码仅调用chrome.action.setPopup()仅会修改后续点击扩展图标时的弹窗配置，不会对当前已经打开的login.html弹窗实例生效，因此需要手动触发当前页面的跳转。

实现步骤 #

• 保留chrome.action.setPopup()配置，确保后续点击扩展图标直接打开已登录的popup.html
• 手动修改当前弹窗页面的地址，立即跳转到目标页面

完整代码示例 #

const loginBtn = document.getElementById("login");
loginBtn.onclick = function () {
   // 此处替换为实际的账号凭证校验逻辑
   const isLoginValid = true; 
   if (isLoginValid) {
      // 配置后续点击扩展图标默认打开popup.html
      chrome.action.setPopup({
         popup: "popup.html",
      });
      // 立即跳转当前弹窗到目标页面
      window.location.replace("popup.html");
      // 可搭配本地存储持久化登录状态，避免重启浏览器后重复登录
      chrome.storage.local.set({ isLogin: true });
   }
};

注意事项 #

• 如果使用Chrome扩展Manifest V3版本，需要在manifest.json中配置对应权限才能正常调用相关接口，例如用到本地存储时需在permissions字段中添加storage权限。
• 使用window.location.replace跳转不会在浏览历史中留下login.html的记录，用户点击弹窗返回按钮不会退回到登录页，体验更符合预期。

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