browser-plugin-creator/templates/content-script-vue/content.js

A modern scaffolding tool for creating browser extensions with ease

// Vue内容脚本示例

function initContentScript() {
  // 防止重复注入
  if (window.{{projectName}}Injected) return;
  window.{{projectName}}Injected = true;

  console.log('{{projectName}} Vue内容脚本已加载');

  // 创建Vue应用容器
  const container = document.createElement('div');
  container.id = '{{projectName}}-widget';
  container.style.cssText = `
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    background: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    font-family: Arial, sans-serif;
    font-size: 14px;
  `;

  // 简单的Vue应用
  container.innerHTML = `
    <div id="vue-content-widget">
      <h3>{{projectName}}</h3>
      <p>Vue内容脚本已激活</p>
      <button @click="highlightParagraphs">高亮段落</button>
      <button @click="clearHighlights">清除高亮</button>
    </div>
  `;

  document.body.appendChild(container);

  // 添加事件监听器
  const highlightBtn = container.querySelector('button');
  const clearBtn = container.querySelectorAll('button')[1];

  let highlightedElements = [];

  highlightBtn.addEventListener('click', () => {
    const paragraphs = document.querySelectorAll('p');
    paragraphs.forEach(p => {
      p.style.backgroundColor = '#e3f2fd';
      p.style.padding = '5px';
      p.style.borderRadius = '3px';
      highlightedElements.push(p);
    });
  });

  clearBtn.addEventListener('click', () => {
    highlightedElements.forEach(el => {
      el.style.backgroundColor = '';
      el.style.padding = '';
      el.style.borderRadius = '';
    });
    highlightedElements = [];
  });
}

// 延迟执行
setTimeout(initContentScript, 1000);