【实战案例 4】TabMagnet - Chrome 标签管理插件

项目背景

痛点：

Chrome 默认行为：新标签总是在最右边打开，切换标签很不方便。

解决方案：

TabMagnet：让新标签在当前标签旁边打开。

技术栈：

Chrome Extension Manifest V3
Background Service Worker

完整代码

manifest.json


{
  "manifest_version": 3,
  "name": "TabMagnet",
  "version": "1.0.0",
  "description": "让新标签在当前标签旁边打开",
  "permissions": ["tabs"],
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  }
}

background.js


// 记录最后一个活跃的标签页 ID
let lastActiveTabId = null;
 
// 监听标签页激活（用户切换到某个标签）
chrome.tabs.onActivated.addListener((activeInfo) => {
  lastActiveTabId = activeInfo.tabId;
});
 
// 监听标签页创建
chrome.tabs.onCreated.addListener(async (newTab) => {
  // 如果没有记录的活跃标签，不处理
  if (!lastActiveTabId) return;
 
  try {
    // 获取最后活跃标签的信息
    const lastTab = await chrome.tabs.get(lastActiveTabId);
 
    // 计算新标签应该插入的位置（活跃标签的右边）
    const newIndex = lastTab.index + 1;
 
    // 移动新标签到目标位置
    await chrome.tabs.move(newTab.id, { index: newIndex });
 
    console.log(`标签 ${newTab.id} 已移动到位置 ${newIndex}`);
  } catch (error) {
    console.error('移动标签失败:', error);
  }
});

安装和测试

将代码保存到文件夹
访问 chrome://extensions/
开启「开发者模式」
点击「加载已解压的扩展程序」
选择项目文件夹

测试：

打开多个标签页
在中间某个标签页上点击链接
新标签应该在当前标签旁边打开，而不是最右边

成功！ 🎉