如何将React+TypeScript开发的Chrome扩展定位到页面右侧？

核心思路 #

Chrome默认的扩展popup是浏览器托管的原生组件，无法通过CSS修改其弹出位置。要实现类似ZoomInfo/SimilarWeb的侧边栏效果，必须放弃默认popup，将React应用直接注入到当前页面的DOM结构中。

具体实现步骤 #

1. 修改index.css，设置侧边栏固定样式 #

给根容器#react-chrome-app添加固定定位样式，让它始终贴在页面右侧：

#react-chrome-app {
  /* 固定定位到页面右侧 */
  position: fixed;
  top: 0;
  right: 0;
  /* 自定义侧边栏尺寸，可按需调整 */
  width: 380px;
  height: 100vh;
  /* 确保层级高于页面所有内容 */
  z-index: 999999;
  /* 基础样式优化 */
  background-color: #fff;
  border-left: 1px solid #e0e0e0;
  box-shadow: -2px 0 10px rgba(0,0,0,0.1);
  overflow-y: auto;
}

/* 可选：给页面主体添加右侧内边距，避免内容被侧边栏遮挡 */
body {
  padding-right: 380px;
}

2. 调整manifest.json配置（关键） #

要让扩展能将React代码注入到目标页面，需配置content_scripts，同时移除默认的action.default_popup配置：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 匹配需要注入的页面，可按需缩小范围
      "js": ["index.js"], // React打包后的主脚本
      "css": ["index.css"] // 同步注入侧边栏样式
    }
  ],
  "action": {
    "default_icon": {
      "16": "icons/icon16.png" // 替换为你的扩展图标路径
    }
  }
}

3. 添加侧边栏显示/隐藏逻辑（可选） #

如果需要点击扩展按钮切换侧边栏状态，可通过service-worker实现：

3.1 在manifest.json中注册service-worker

"background": {
  "service_worker": "background.js"
}

3.2 编写background.js监听按钮点击

chrome.action.onClicked.addListener(async (tab) => {
  // 向当前页面发送切换侧边栏的消息
  chrome.tabs.sendMessage(tab.id, { action: "toggleSidebar" });
});

3.3 在React的App.tsx中监听消息并控制显示

import { useEffect, useState } from 'react';

function App() {
  const [isVisible, setIsVisible] = useState(true);

  useEffect(() => {
    const messageListener = (message: { action: string }) => {
      if (message.action === "toggleSidebar") {
        setIsVisible(prev => !prev);
      }
    };
    chrome.runtime.onMessage.addListener(messageListener);
    return () => chrome.runtime.onMessage.removeListener(messageListener);
  }, []);

  return (
    <div style={{ display: isVisible ? 'block' : 'none' }}>
      {/* 你的侧边栏内容 */}
    </div>
  );
}

export default App;

4. 打包与测试 #

用React打包工具（如Vite或Create React App）完成打包后，在Chrome扩展管理页面加载已解压的扩展包，即可在目标页面看到右侧固定的侧边栏。

为什么之前的方案无效？ #

你尝试的第一个方案是修改popup位置，但Chrome的原生popup受浏览器安全机制限制，无法通过CSS改变其弹出位置；第二个方案是创建iframe，但如果未正确配置content_scripts权限和注入逻辑，iframe无法成功嵌入页面。

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