insightflow/chrome-extension/content.js

// InsightFlow Chrome Extension - Content Script
// 在页面中注入，处理页面交互

(function() {
  'use strict';
  
  // 防止重复注入
  if (window.insightflowInjected) return;
  window.insightflowInjected = true;
  
  // 创建浮动按钮
  let floatingButton = null;
  let selectionPopup = null;
  
  // 监听选中文本
  document.addEventListener('mouseup', handleSelection);
  document.addEventListener('keyup', handleSelection);
  
  function handleSelection(e) {
    const selection = window.getSelection();
    const text = selection.toString().trim();
    
    if (text.length > 0) {
      showFloatingButton(selection);
    } else {
      hideFloatingButton();
      hideSelectionPopup();
    }
  }
  
  // 显示浮动按钮
  function showFloatingButton(selection) {
    if (!floatingButton) {
      floatingButton = document.createElement('div');
      floatingButton.className = 'insightflow-float-btn';
      floatingButton.innerHTML = `
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M12 5v14M5 12h14"/>
        </svg>
      `;
      floatingButton.title = '保存到 InsightFlow';
      document.body.appendChild(floatingButton);
      
      floatingButton.addEventListener('click', () => {
        const text = window.getSelection().toString().trim();
        if (text) {
          showSelectionPopup(text);
        }
      });
    }
    
    // 定位按钮
    const range = selection.getRangeAt(0);
    const rect = range.getBoundingClientRect();
    
    floatingButton.style.left = `${rect.right + window.scrollX - 40}px`;
    floatingButton.style.top = `${rect.top + window.scrollY - 45}px`;
    floatingButton.style.display = 'flex';
  }
  
  // 隐藏浮动按钮
  function hideFloatingButton() {
    if (floatingButton) {
      floatingButton.style.display = 'none';
    }
  }
  
  // 显示选择弹窗
  function showSelectionPopup(text) {
    hideFloatingButton();
    
    if (!selectionPopup) {
      selectionPopup = document.createElement('div');
      selectionPopup.className = 'insightflow-popup';
      document.body.appendChild(selectionPopup);
    }
    
    selectionPopup.innerHTML = `
      <div class="insightflow-popup-header">
        <span>保存到 InsightFlow</span>
        <button class="insightflow-close-btn">&times;</button>
      </div>
      <div class="insightflow-popup-content">
        <div class="insightflow-text-preview">${escapeHtml(text.substring(0, 200))}${text.length > 200 ? '...' : ''}</div>
        <div class="insightflow-actions">
          <button class="insightflow-btn insightflow-btn-primary" id="if-save-quick">快速保存</button>
          <button class="insightflow-btn" id="if-save-select">选择项目...</button>
        </div>
      </div>
    `;
    
    selectionPopup.style.display = 'block';
    
    // 定位弹窗
    const selection = window.getSelection();
    const range = selection.getRangeAt(0);
    const rect = range.getBoundingClientRect();
    
    selectionPopup.style.left = `${Math.min(rect.left + window.scrollX, window.innerWidth - 320)}px`;
    selectionPopup.style.top = `${rect.bottom + window.scrollY + 10}px`;
    
    // 绑定事件
    selectionPopup.querySelector('.insightflow-close-btn').addEventListener('click', hideSelectionPopup);
    selectionPopup.querySelector('#if-save-quick').addEventListener('click', () => saveQuick(text));
    selectionPopup.querySelector('#if-save-select').addEventListener('click', () => saveWithProject(text));
  }
  
  // 隐藏选择弹窗
  function hideSelectionPopup() {
    if (selectionPopup) {
      selectionPopup.style.display = 'none';
    }
  }
  
  // 快速保存
  async function saveQuick(text) {
    hideSelectionPopup();
    
    chrome.runtime.sendMessage({
      action: 'clipPage',
      selectionText: text
    });
  }
  
  // 选择项目保存
  async function saveWithProject(text) {
    // 获取项目列表
    chrome.runtime.sendMessage({ action: 'fetchProjects' }, (response) => {
      if (response.success && response.projects.length > 0) {
        showProjectSelector(text, response.projects);
      } else {
        saveQuick(text); // 失败时快速保存
      }
    });
  }
  
  // 显示项目选择器
  function showProjectSelector(text, projects) {
    selectionPopup.innerHTML = `
      <div class="insightflow-popup-header">
        <span>选择项目</span>
        <button class="insightflow-close-btn">&times;</button>
      </div>
      <div class="insightflow-popup-content">
        <div class="insightflow-project-list">
          ${projects.map(p => `
            <div class="insightflow-project-item" data-id="${p.id}">
              <div class="insightflow-project-name">${escapeHtml(p.name)}</div>
              <div class="insightflow-project-desc">${escapeHtml(p.description || '').substring(0, 50)}</div>
            </div>
          `).join('')}
        </div>
      </div>
    `;
    
    selectionPopup.querySelector('.insightflow-close-btn').addEventListener('click', hideSelectionPopup);
    
    // 绑定项目选择事件
    selectionPopup.querySelectorAll('.insightflow-project-item').forEach(item => {
      item.addEventListener('click', () => {
        const projectId = item.dataset.id;
        saveToProject(text, projectId);
      });
    });
  }
  
  // 保存到指定项目
  async function saveToProject(text, projectId) {
    hideSelectionPopup();
    
    chrome.runtime.sendMessage({
      action: 'getConfig'
    }, (config) => {
      // 临时设置默认项目
      config.defaultProjectId = projectId;
      chrome.runtime.sendMessage({
        action: 'saveConfig',
        config: config
      }, () => {
        chrome.runtime.sendMessage({
          action: 'clipPage',
          selectionText: text
        });
      });
    });
  }
  
  // HTML 转义
  function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
  }
  
  // 点击页面其他地方关闭弹窗
  document.addEventListener('click', (e) => {
    if (selectionPopup && !selectionPopup.contains(e.target) && 
        floatingButton && !floatingButton.contains(e.target)) {
      hideSelectionPopup();
      hideFloatingButton();
    }
  });
  
})();