web-tag-marker/test.html at main · Bouts2019/web-tag-marker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web Tag Marker 测试页面</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
      line-height: 1.8;
      color: #333;
      max-width: 900px;
      margin: 0 auto;
      padding: 40px 20px;
      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
      min-height: 100vh;
    }

    h1 {
      color: #2c3e50;
      margin-bottom: 10px;
      font-size: 32px;
    }

    .subtitle {
      color: #7f8c8d;
      margin-bottom: 40px;
      font-size: 16px;
    }

    .section {
      background: white;
      padding: 30px;
      margin-bottom: 30px;
      border-radius: 12px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    h2 {
      color: #34495e;
      margin-bottom: 20px;
      font-size: 24px;
      border-bottom: 3px solid #3498db;
      padding-bottom: 10px;
    }

    h3 {
      color: #2c3e50;
      margin: 20px 0 10px;
      font-size: 18px;
    }

    p {
      margin-bottom: 15px;
      text-align: justify;
    }

    .feature-list {
      list-style: none;
      padding: 0;
    }

    .feature-list li {
      padding: 12px 15px;
      margin-bottom: 10px;
      background: #ecf0f1;
      border-left: 4px solid #3498db;
      border-radius: 4px;
    }

    .feature-list li:before {
      content: "✓ ";
      color: #27ae60;
      font-weight: bold;
      margin-right: 8px;
    }

    .test-section {
      background: #fff9c4;
      padding: 20px;
      border-radius: 8px;
      margin: 20px 0;
      border-left: 4px solid #ffc107;
    }

    .test-section h3 {
      color: #f57c00;
      margin-top: 0;
    }

    code {
      background: #f8f9fa;
      padding: 2px 6px;
      border-radius: 3px;
      font-family: 'Courier New', monospace;
      color: #e74c3c;
    }

    .highlight {
      background: #ffeb3b;
      padding: 2px 4px;
    }

    .long-content {
      margin-top: 50px;
    }

    .spacer {
      height: 100px;
      background: #e0e0e0;
      margin: 20px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #999;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <h1>🏷️ Web Tag Marker 测试页面</h1>
  <p class="subtitle">用于测试浏览器扩展的标记功能</p>

  <div class="section">
    <h2>功能介绍</h2>
    <p>欢迎使用 Web Tag Marker 浏览器扩展！这是一个强大的文本标记工具，可以帮助您在浏览网页时快速标记重要内容。</p>

    <h3>主要功能</h3>
    <ul class="feature-list">
      <li>选中文本后自动弹出标签选择器</li>
      <li>创建自定义标签，设置不同的前景色和背景色</li>
      <li>点击已标记内容可以取消或更改标签</li>
      <li>在管理界面查看所有标记，点击可跳转到对应位置</li>
      <li>标记数据本地存储，隐私安全</li>
    </ul>
  </div>

  <div class="section">
    <h2>使用说明</h2>

    <div class="test-section">
      <h3>测试 1：基本标记功能</h3>
      <p>选中这段文字，然后选择一个标签进行标记。您可以尝试使用不同的标签来标记不同的内容，比如用"重要"标记关键信息，用"待办"标记需要处理的任务。</p>
    </div>

    <div class="test-section">
      <h3>测试 2：标记操作功能</h3>
      <p>完成标记后，<strong>点击已标记的文字</strong>，会弹出操作菜单。您可以选择取消标记或更改到其他标签。这个功能非常适合在您改变主意时快速调整标记。</p>
    </div>

    <div class="test-section">
      <h3>测试 3：管理界面跳转</h3>
      <p>在页面不同位置创建多个标记，然后打开扩展的管理界面。在"页面标记"选项卡中，点击任意标记项，页面会自动滚动到对应位置并高亮显示。这在处理长文档时特别有用。</p>
    </div>

    <h3>创建自定义标签</h3>
    <p>点击浏览器工具栏的扩展图标，在管理界面中创建您自己的标签。每个标签都可以设置独立的前景色和背景色，让您的标记更加个性化。</p>
  </div>

  <div class="section">
    <h2>技术细节</h2>
    <p>本扩展完全符合 <code>Manifest V3</code> 规范，可以安全地上架到 Chrome Web Store。所有数据都存储在本地，不会上传到任何服务器，确保您的隐私安全。</p>

    <p>扩展使用了现代的 Web 技术构建，包括 <strong>Chrome Storage API</strong>、<strong>Content Scripts</strong> 和 <strong>Service Worker</strong>，确保在各种网站上都能稳定运行。</p>
  </div>

  <div class="section long-content">
    <h2>长文档测试</h2>
    <p>这是用于测试管理界面跳转功能的长文档内容。您可以在不同位置创建标记，然后测试点击跳转功能。</p>

    <div class="spacer">向下滚动继续 ↓</div>

    <h3>第一章：扩展的起源</h3>
    <p>Web Tag Marker 最初是为了解决网页浏览时需要标记重要内容的需求而开发的。在浏览长篇文章、学习资料或工作时，我们经常需要快速标记某些内容，以便稍后回顾或处理。</p>

    <p>传统的书签功能只能保存整个页面，而本扩展允许您标记页面中的特定文本片段，大大提高了信息管理的灵活性。</p>

    <div class="spacer">标记测试区域 1</div>

    <h3>第二章：核心功能详解</h3>
    <p>扩展的核心功能围绕着"标签"展开。每个标签都有独特的颜色组合，您可以创建多个标签来表示不同的含义。比如，"重要"标签用黄色背景表示需要关注的内容，"待办"标签用红色背景表示需要处理的任务。</p>

    <p>当选中文字时，扩展会智能地检测您的选择，并在鼠标位置弹出标签选择器。这种设计符合直觉，让标记过程变得流畅自然。</p>

    <div class="spacer">标记测试区域 2</div>

    <h3>第三章：数据管理</h3>
    <p>所有标记数据都存储在浏览器的本地存储中。按URL组织数据结构，使得不同页面的标记互不干扰。管理界面提供了清晰的视图，让您可以快速查看当前页面的所有标记。</p>

    <p>点击管理界面中的标记项，页面会自动滚动到对应位置，并显示高亮动画。这个功能特别适合在长文档中快速定位您之前标记的内容。</p>

    <div class="spacer">标记测试区域 3</div>

    <h3>第四章：未来展望</h3>
    <p>虽然当前版本已经具备了完整的标记功能，但我们还有很多改进计划。包括支持标记的导出和导入、添加快捷键操作、实现标记搜索功能等。</p>

    <p>我们还计划添加团队协作功能，让用户可以分享他们的标记，这对于学习和工作场景都非常有用。</p>

    <div class="spacer">标记测试区域 4</div>

    <h3>第五章：技术实现</h3>
    <p>本扩展采用了纯原生 JavaScript 开发，没有使用任何框架或库，确保了轻量级和高性能。通过 Chrome Extension API，我们实现了与浏览器深度集成的功能。</p>

    <p>Content Script 负责处理页面内容，包括文本选择、标记应用和交互逻辑。Service Worker 处理后台任务和数据管理。Popup 界面提供了友好的用户操作入口。</p>

    <div class="spacer">到底了！</div>
  </div>

  <div class="section">
    <h2>测试清单</h2>
    <ul class="feature-list">
      <li>选中文本，弹出标签选择器在鼠标位置</li>
      <li>选择标签，成功标记文本</li>
      <li>点击已标记文本，弹出操作菜单</li>
      <li>取消标记，文本恢复原状</li>
      <li>更改标签，文本颜色更新</li>
      <li>在管理界面查看所有标记</li>
      <li>点击管理界面的标记项，页面滚动并高亮</li>
    </ul>
  </div>

  <div class="section">
    <h2>反馈与支持</h2>
    <p>如果您在使用过程中遇到任何问题或有改进建议，欢迎通过以下方式联系我们：</p>
    <p>• GitHub Issues<br>
       • Chrome Web Store 评论<br>
       • 直接联系开发者</p>

    <p style="text-align: center; margin-top: 30px; color: #7f8c8d;">
      感谢您使用 Web Tag Marker！
    </p>
  </div>
</body>
</html>