browser-plugin-creator/templates/content-script-react/content.jsx

A modern scaffolding tool for creating browser extensions with ease

import React, { useEffect, useState } from 'react';

function ContentScript() {
  const [highlightedElements, setHighlightedElements] = useState([]);

  useEffect(() => {
    // 初始化内容脚本
    const initContentScript = () => {
      // 查找页面中的所有段落
      const paragraphs = document.querySelectorAll('p');
      
      // 高亮段落
      paragraphs.forEach((p, index) => {
        p.style.backgroundColor = '#fffacd';
        p.style.padding = '5px';
        p.style.borderRadius = '3px';
      });

      setHighlightedElements(Array.from(paragraphs));
      
      console.log(`{{projectName}}: 高亮了 ${paragraphs.length} 个段落`);
    };

    // 延迟执行以确保DOM加载完成
    setTimeout(initContentScript, 1000);

    // 清理函数
    return () => {
      highlightedElements.forEach(element => {
        element.style.backgroundColor = '';
        element.style.padding = '';
        element.style.borderRadius = '';
      });
    };
  }, []);

  return null; // 内容脚本不需要渲染UI
}

// 内容脚本入口
if (typeof window !== 'undefined') {
  // 防止重复注入
  if (!window.{{projectName}}Injected) {
    window.{{projectName}}Injected = true;
    
    // 创建影子DOM容器
    const container = document.createElement('div');
    container.id = '{{projectName}}-container';
    
    // 使用React渲染内容（可选）
    // 这里我们使用纯内容脚本，不渲染React组件
    
    console.log('{{projectName}} 内容脚本已加载');
  }
}

export default ContentScript;