如何通过Chrome API或JavaScript实现Chrome扩展的小标签打开LinkedIn

核心思路 #

借助Chrome扩展的chrome.windows.create()API创建自定义尺寸的悬浮小窗口加载LinkedIn页面，配合扩展权限配置与可选的页面样式优化，实现目标效果。

具体实现步骤 #

1. 配置扩展清单（manifest.json） #

先在manifest.json中声明必要权限与基础配置：

{
  "manifest_version": 3,
  "name": "LinkedIn Small Tab",
  "version": "1.0",
  "permissions": ["tabs", "windows"],
  "action": {
    "default_icon": {
      "16": "icon16.png",
      "48": "icon48.png"
    },
    "default_title": "Open LinkedIn Small Tab"
  },
  "background": {
    "service_worker": "background.js"
  }
}

• windows权限是创建自定义窗口的核心，tabs用于关联标签页管理。
• 采用Manifest V3的service worker承载后台逻辑。

2. 后台触发逻辑（background.js） #

在后台脚本中监听扩展图标点击事件，创建小窗口：

chrome.action.onClicked.addListener(() => {
  // 自定义小窗口的尺寸与位置，可按需调整
  const windowOptions = {
    url: "https://www.linkedin.com/",
    type: "popup",
    width: 400,
    height: 600,
    left: screen.width - 420, // 贴屏幕右侧显示
    top: 20
  };

  chrome.windows.create(windowOptions, (newWindow) => {
    // 可选：监听窗口关闭事件做后续处理
    chrome.windows.onRemoved.addListener((windowId) => {
      if (windowId === newWindow.id) {
        console.log("LinkedIn small tab closed");
      }
    });
  });
});

• type: "popup"会创建无地址栏的悬浮窗口，更贴近「small tab」样式；若需保留地址栏，可改为type: "normal"并调整尺寸。
• 尺寸、位置参数可根据使用习惯自定义，比如居中显示或固定在屏幕角落。

3. 优化窗口体验（可选） #

如果要让小窗口更适配LinkedIn使用场景，可添加以下优化：

• 锁定窗口尺寸，禁止最大化：

chrome.windows.create(windowOptions, (newWindow) => {
  chrome.windows.update(newWindow.id, {
    state: "normal",
    resizable: false // 禁止用户调整窗口大小
  });
});

• 注入样式调整LinkedIn页面布局：在manifest.json中添加内容脚本配置：

"content_scripts": [
  {
    "matches": ["https://www.linkedin.com/*"],
    "css": ["small-tab-styles.css"]
  }
]

然后在small-tab-styles.css中编写适配样式：

/* 隐藏冗余侧边栏，适配小窗口宽度 */
.global-nav, .feed-identity-module, .right-rail {
  display: none !important;
}
.main-content {
  width: 100% !important;
  margin: 0 !important;
}

4. 测试与调试 #

• 打开Chrome的chrome://extensions/页面，开启「开发者模式」，点击「加载已解压的扩展程序」选择你的扩展文件夹。
• 点击扩展图标触发小窗口，验证尺寸、布局与功能是否符合预期。

注意事项 #

• LinkedIn页面可能存在反嵌入或窗口检测逻辑，若加载异常，可尝试将窗口类型改为normal，或通过chrome.webRequestAPI调整用户代理。
• Manifest V3中service worker无法直接操作DOM，页面相关操作需通过内容脚本或chrome.scriptingAPI实现。

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