Chrome扩展开发：通过Content Script注入随页面滚动始终显示的停止录制按钮

核心思路 #

通过Content Script注入独立的React组件，利用CSS固定定位保证按钮始终悬浮在页面顶层，同时通过Chrome扩展的消息机制触发录制终止逻辑。

1. 编写固定定位的React按钮组件 #

创建一个带固定样式的按钮，处理点击事件并与后台/录制逻辑通信：

// StopRecordButton.tsx
import React from 'react';
import './StopRecordButton.css';

const StopRecordButton = () => {
  const handleStop = () => {
    // 向后台Service Worker发送停止录制指令
    chrome.runtime.sendMessage({ action: 'stopRecording' }, (res) => {
      if (res.success) {
        // 成功停止后移除按钮容器
        document.getElementById('stop-record-container')?.remove();
      }
    });

    // 如果录制逻辑直接在Content Script中，可直接调用停止方法
    // (window as any).mediaRecorder?.stop();
  };

  return (
    <button id="stop-record-btn" onClick={handleStop}>
      停止录制
    </button>
  );
};

export default StopRecordButton;

对应的样式文件（确保按钮悬浮在最上层）：

/* StopRecordButton.css */
#stop-record-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 12px 28px;
  background-color: #dc3545;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  z-index: 999999; /* 确保不被页面元素遮挡 */
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
}

#stop-record-btn:hover {
  background-color: #c82333;
}

2. 在Content Script中挂载React组件 #

创建独立的DOM容器挂载组件，避免与页面原有DOM/React实例冲突：

// content.tsx
import React from 'react';
import { createRoot } from 'react-dom/client';
import StopRecordButton from './StopRecordButton';

// 创建独立容器并添加到页面
const container = document.createElement('div');
container.id = 'stop-record-container';
document.body.appendChild(container);

// 挂载React组件
const root = createRoot(container);
root.render(<StopRecordButton />);

3. 配置Manifest V3 #

确保Content Script和权限配置正确：

// manifest.json
{
  "manifest_version": 3,
  "name": "屏幕录制工具",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 匹配需要注入的页面，可按需修改
      "js": ["content.js"], // 编译后的Content Script文件
      "css": ["StopRecordButton.css"]
    }
  ],
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["activeTab", "scripting", "tabs"]
}

4. 后台处理停止录制逻辑 #

在Service Worker中接收消息并终止录制：

// background.ts
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'stopRecording') {
    // 这里处理实际的录制终止逻辑，比如调用MediaRecorder.stop()
    if (globalThis.mediaRecorder) {
      globalThis.mediaRecorder.stop();
      delete globalThis.mediaRecorder;
      sendResponse({ success: true });
    } else {
      sendResponse({ success: false, error: '无正在进行的录制' });
    }
    return true; // 标记异步响应
  }
});

注意事项 #

• 打包React代码时，确保React和ReactDOM被正确包含在Content Script的编译产物中
• 若页面存在严格的Content Security Policy，需在manifest中配置相应的content_security_policy
• 可根据需求调整按钮的位置、样式，比如改为左上角或添加图标

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