Chrome扩展：弹窗点击按钮新开标签页自动登录（无需背景/内容脚本）

没问题，这个需求完全可以实现！你不需要依赖扩展的background脚本或者预注入的content script，仅靠popup里的常规JS就能完成点击按钮打开新标签页并自动填充登录信息的操作。下面给你详细讲清楚怎么做：

核心思路 #

点击popup里的提交按钮后，我们通过Chrome扩展的tabs API创建目标登录页面的新标签，然后用scripting API直接往这个新标签里注入一段脚本，由这段脚本完成用户名密码的填充和表单提交。整个流程都在popup的JS里完成，不需要额外的后台或预注入脚本。

步骤&代码示例 #

1. 先配置Manifest权限 #

首先得在manifest.json里声明必要的权限，不然Chrome会阻止我们操作标签和注入脚本：

{
  "manifest_version": 3,
  "name": "一键自动登录",
  "version": "1.0",
  "permissions": ["tabs", "scripting"],
  // 替换成你要自动登录的目标网站域名，必须准确
  "host_permissions": ["https://你的目标登录网站.com/*"],
  "action": {
    "default_popup": "popup.html"
  }
}

2. Popup页面的HTML #

就是你已经做的带输入框和提交按钮的页面，示例如下：

<!DOCTYPE html>
<html>
<body style="width: 200px; padding: 10px;">
  <label>用户名：<input type="text" id="username" style="width: 100%; margin: 5px 0;"></label>
  <label>密码：<input type="password" id="password" style="width: 100%; margin: 5px 0;"></label>
  <button id="loginBtn" style="width: 100%; padding: 5px;">一键登录</button>
  <script src="popup.js"></script>
</body>
</html>

3. Popup.js的核心逻辑 #

这里是关键，我们监听按钮点击，创建标签，等待加载完成后注入脚本：

document.getElementById('loginBtn').addEventListener('click', async () => {
  // 获取用户输入的账号密码
  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;
  // 替换成目标网站的登录页URL
  const targetLoginUrl = 'https://你的目标登录网站.com/login';

  try {
    // 1. 创建新标签页打开登录页面
    const newTab = await chrome.tabs.create({ url: targetLoginUrl });

    // 2. 等待标签页完全加载完成，不然注入脚本时页面元素还没渲染
    await new Promise((resolve) => {
      const checkTabStatus = () => {
        chrome.tabs.get(newTab.id, (tabInfo) => {
          if (tabInfo.status === 'complete') {
            chrome.tabs.onUpdated.removeListener(checkTabStatus);
            resolve();
          }
        });
      };
      chrome.tabs.onUpdated.addListener(checkTabStatus);
    });

    // 3. 往新标签页注入脚本，填充表单并提交
    await chrome.scripting.executeScript({
      target: { tabId: newTab.id },
      // 这里的func会在目标页面的上下文执行，args传递账号密码
      func: (user, pass) => {
        // ！！！这里要替换成目标网站的实际表单元素选择器
        // 比如目标页面的用户名输入框id是"user-name"，密码框是"user-pass"，登录表单是"login-form"
        document.getElementById('user-name').value = user;
        document.getElementById('user-pass').value = pass;
        document.getElementById('login-form').submit();
      },
      args: [username, password]
    });

    console.log('自动登录脚本已执行');
  } catch (error) {
    console.error('自动登录失败：', error);
    alert('登录失败啦，看看控制台的错误信息吧');
  }
});

重要注意事项 #

• 权限必须准确：host_permissions一定要包含目标网站的域名，否则Chrome会拒绝注入脚本。
• 表单选择器要对应：你得自己查看目标登录页面的HTML结构，把func里的元素ID替换成实际的，不然找不到元素就无法填充。
• 别用URL传密码：绝对不要把密码拼在URL里传递，那样会在地址栏和历史记录里泄露，我们用executeScript的args传递是安全的，因为这是扩展内部的通道，不会暴露。
• Popup生命周期问题：Popup在你点击页面其他地方就会关闭，但我们用了async/await确保所有操作（创建标签、等待加载、注入脚本）都在Popup关闭前完成，所以不用担心中断。

总的来说，这个方案完全满足你的需求，不需要额外的background或content script，仅靠popup里的JS就能实现自动登录功能。

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