feat: 添加 LLM Content Extractor 浏览器扩展

- 支持框选区域提取网页内容 - 支持整页内容提取 - 输出格式：Markdown/JSON/XML - 自动复制到剪贴板
2025-12-03 16:44:03 +08:00
commit b1d9f2c518
13 changed files with 2067 additions and 0 deletions
--- a/browser-extension/popup.html
+++ b/browser-extension/popup.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>LLM Content Extractor</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      width: 320px;
+      padding: 16px;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      min-height: 200px;
+    }
+    .container {
+      background: white;
+      border-radius: 12px;
+      padding: 20px;
+      box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+    }
+    h1 {
+      font-size: 16px;
+      color: #333;
+      margin-bottom: 16px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    h1::before {
+      content: "✨";
+    }
+    .btn {
+      width: 100%;
+      padding: 12px 16px;
+      border: none;
+      border-radius: 8px;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.2s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      margin-bottom: 10px;
+    }
+    .btn:last-child {
+      margin-bottom: 0;
+    }
+    .btn-primary {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: white;
+    }
+    .btn-primary:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+    }
+    .btn-secondary {
+      background: #f5f5f5;
+      color: #333;
+    }
+    .btn-secondary:hover {
+      background: #ebebeb;
+    }
+    .format-select {
+      width: 100%;
+      padding: 10px 12px;
+      border: 1px solid #e0e0e0;
+      border-radius: 8px;
+      font-size: 14px;
+      margin-bottom: 12px;
+      background: white;
+    }
+    .status {
+      margin-top: 12px;
+      padding: 10px;
+      border-radius: 6px;
+      font-size: 13px;
+      display: none;
+    }
+    .status.success {
+      display: block;
+      background: #e8f5e9;
+      color: #2e7d32;
+    }
+    .status.error {
+      display: block;
+      background: #ffebee;
+      color: #c62828;
+    }
+    .divider {
+      height: 1px;
+      background: #e0e0e0;
+      margin: 16px 0;
+    }
+    .tip {
+      font-size: 12px;
+      color: #888;
+      text-align: center;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>LLM Content Extractor</h1>
+    
+    <select id="formatSelect" class="format-select">
+      <option value="markdown">Markdown 格式</option>
+      <option value="json">JSON 结构化</option>
+      <option value="xml">XML 格式</option>
+    </select>
+    
+    <button id="selectBtn" class="btn btn-primary">
+      <span>🎯</span> 框选区域提取
+    </button>
+    
+    <button id="fullPageBtn" class="btn btn-secondary">
+      <span>📄</span> 提取整页内容
+    </button>
+    
+    <div class="divider"></div>
+    
+    <button id="copyLastBtn" class="btn btn-secondary">
+      <span>📋</span> 复制上次结果
+    </button>
+    
+    <div id="status" class="status"></div>
+    
+    <p class="tip">提取后内容自动复制到剪贴板</p>
+  </div>
+  
+  <script src="popup.js"></script>
+</body>
+</html>