如何在浏览器扩展弹窗中于当前标签页打开链接？

要实现点击弹窗按钮后在当前标签页打开链接，核心是替换chrome.tabs.create为chrome.tabs.updateAPI，并确保权限配置正确，以下是各文件的修改步骤：

1. 配置Manifest权限（manifest.json） #

首先确保扩展拥有tabs权限，这样才能访问标签页相关API。根据你的Manifest版本调整：

Manifest V3 示例 #

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "permissions": ["tabs"],
  "action": {
    "default_popup": "popup.html"
  }
}

Manifest V2 示例 #

{
  "manifest_version": 2,
  "name": "你的扩展名称",
  "version": "1.0",
  "permissions": ["tabs"],
  "browser_action": {
    "default_popup": "popup.html"
  }
}

2. 修改弹窗逻辑（popup.js） #

将原来的chrome.tabs.create替换为chrome.tabs.update，先获取当前激活的标签页，再更新其URL：

Manifest V3（使用async/await） #

document.getElementById('openLinkBtn').addEventListener('click', async () => {
  // 获取当前窗口的激活标签页（即打开弹窗的标签页）
  const [currentTab] = await chrome.tabs.query({ active: true, currentWindow: true });
  // 更新当前标签页的URL
  chrome.tabs.update(currentTab.id, { url: "https://www.youtube.com/" });
});

Manifest V2（使用回调） #

document.getElementById('openLinkBtn').addEventListener('click', () => {
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    const currentTab = tabs[0];
    chrome.tabs.update(currentTab.id, { url: "https://www.youtube.com/" });
  });
});

3. 弹窗HTML（popup.html） #

确保按钮有对应的ID，与JS中的选择器匹配即可，无需额外修改：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>扩展弹窗</title>
</head>
<body>
  <button id="openLinkBtn">在当前标签页打开YouTube</button>
  <script src="popup.js"></script>
</body>
</html>

关键说明 #

• chrome.tabs.update用于修改已有标签页的URL，而chrome.tabs.create会创建新标签页，这是核心区别。
• chrome.tabs.query({ active: true, currentWindow: true })确保获取到的是当前窗口中激活的标签页，也就是用户点击扩展图标打开弹窗的那个标签页。

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