Repository navigation
Expand file tree
/
Copy pathhelp.html
More file actions
2152 lines (1946 loc) · 119 KB
/
Copy pathhelp.html
File metadata and controls
2152 lines (1946 loc) · 119 KB
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
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GSS - 使用說明</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #0b0f14;
color: rgba(255, 255, 255, 0.9);
line-height: 1.7;
min-height: 100vh;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 40px 20px;
}
.header {
text-align: center;
margin-bottom: 40px;
padding-bottom: 30px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.header img {
width: 48px;
height: 48px;
margin-bottom: 16px;
}
.header h1 {
font-size: 28px;
margin-bottom: 8px;
background: linear-gradient(135deg, #4a90e2, #7b68ee);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.header p {
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
}
.lang-switch {
display: flex;
justify-content: center;
gap: 12px;
margin-bottom: 30px;
}
.lang-btn {
padding: 8px 20px;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(10, 12, 16, 0.8);
color: rgba(255, 255, 255, 0.7);
border-radius: 20px;
cursor: pointer;
font-size: 14px;
transition: all 0.2s;
}
.lang-btn:hover {
background: rgba(120, 190, 255, 0.14);
border-color: rgba(120, 190, 255, 0.45);
}
.lang-btn.active {
background: rgba(120, 190, 255, 0.35);
border-color: rgba(120, 190, 255, 0.7);
color: rgba(255, 255, 255, 0.95);
}
.content-section {
background: rgba(16, 18, 22, 0.98);
border-radius: 12px;
padding: 28px;
margin-bottom: 24px;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.content-section h2 {
font-size: 20px;
margin-bottom: 20px;
color: rgba(255, 255, 255, 0.95);
display: flex;
align-items: center;
gap: 10px;
}
.content-section h3 {
font-size: 16px;
margin: 24px 0 12px;
color: rgba(255, 255, 255, 0.85);
}
.content-section p {
margin-bottom: 12px;
color: rgba(255, 255, 255, 0.75);
}
.content-section ul {
margin: 12px 0;
padding-left: 24px;
}
.content-section li {
margin: 8px 0;
color: rgba(255, 255, 255, 0.75);
}
.content-section code {
background: rgba(120, 190, 255, 0.15);
padding: 2px 8px;
border-radius: 4px;
font-family: 'Consolas', 'Monaco', monospace;
font-size: 13px;
color: rgba(120, 190, 255, 0.95);
}
.highlight-box {
background: rgba(74, 144, 226, 0.1);
border-left: 3px solid #4a90e2;
padding: 16px;
border-radius: 0 8px 8px 0;
margin: 16px 0;
}
.footer {
text-align: center;
margin-top: 40px;
padding-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.5);
font-size: 13px;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<img src="https://elfinl.github.io/General-Sticker-System/icons/icon48.png" alt="GSS Logo">
<h1>General Sticker System (GSS)</h1>
<p id="header-subtitle">通用貼圖系統</p>
</div>
<div class="lang-switch">
<button class="lang-btn active" data-lang="zh-TW">繁中</button>
<button class="lang-btn" data-lang="zh-CN">简中</button>
<button class="lang-btn" data-lang="en">English</button>
<button class="lang-btn" data-lang="ja">日本語</button>
<button class="lang-btn" data-lang="ko">한국어</button>
</div>
<!-- 繁中內容 -->
<div id="content-zh-TW">
<div class="content-section">
<h2>📋 快速開始</h2>
<div class="highlight-box">
<p><strong>使用步驟:</strong></p>
<ol style="margin-left: 20px; margin-top: 8px;">
<li>在 Twitch、YouTube、Vaughn Live、beamstream、w.tv 或 KICK 登入並進入頻道頁面</li>
<li>開啟插件,輸入貼圖 ID 清單</li>
<li>點擊聊天室旁的 GSS 圖示開啟貼圖面板</li>
<li>點擊貼圖快速發送(例如 Twitch/KICK 全自動,其他平台自動填入)</li>
</ol>
</div>
</div>
<div class="content-section">
<h2>🌐 自定義平台</h2>
<p style="font-size: 13px; color: #666; margin-top: -4px; margin-bottom: 12px;">
📍 <strong>功能位置:</strong> <code>主面板</code> ➔ <code>設定頁</code> ➔ <code>自定義平台設定</code>
</p>
<div class="highlight-box"
style="background: rgba(40, 167, 69, 0.08); border-color: rgba(40, 167, 69, 0.4); margin-bottom: 16px;">
<p style="color: #28a745; font-weight: bold;">✅ 內置原生支援平台,無需重複新增:</p>
<p style="margin-top: 4px; font-size: 12px; line-height: 1.5; color: #555;">
GSS 已經在底層內置了 <strong>Twitch、YouTube、Kick、VaughnLive、BeamStream、W.tv</strong> 的原生貼圖管理功能。<br>
除非這些官方網站的底層結構發生重大改變、導致原生功能失效,否則<strong>請勿</strong>將上述網域重複加到下方的自定義平台中,以免發生腳本執行衝突。
</p>
</div>
<p>GSS 支援透過「自定義腳本」來擴充對任何直播網站的支持。即使是目前未列出的平台,您也可以透過簡單的設定來啟用貼圖功能。</p>
<div class="highlight-box">
<p><strong>設定三個關鍵參數:</strong></p>
<ul style="margin-top: 8px; font-size: 13px; margin-left: 16px;">
<li><strong>發動網域:</strong> 決定插件在哪個網站啟動(例如:<code>rumble.com</code>)。</li>
<li><strong>聊天室容器:</strong> 決定插件要「掃描哪裡」來找出別人的貼圖 ID(CSS 選擇器)。</li>
<li><strong>平台設定:</strong> 使用 <code>@</code> 指令格式定義按鈕位置與發送行為。</li>
</ul>
</div>
<h3>📜 平台設定語法</h3>
<p>在「平台設定」大文本框中,使用以下 <code>@</code> 指令格式(每行一個指令):</p>
<ul style="margin-bottom: 12px;">
<li><code>@hostname domain.com</code> - 發動網域(可選填,若已在上方的網域欄填寫則可省略)。</li>
<li><code>@chatContainer .selector</code> - 聊天室容器,決定插件要掃描哪裡來找出別人的貼圖 ID(可選填,若已在上方的容器欄填寫則可省略)。</li>
<li><code>@logic</code> - 開始定義腳本邏輯,後續每行一個指令:</li>
<ul style="margin-top: 4px; margin-left: 20px;">
<li><code>mount: .selector</code> - 決定貼圖按鈕要插在哪個元素旁邊。</li>
<li><code>input: .selector</code> - 決定貼圖 ID 要自動貼入哪個輸入框。</li>
<li><code>send: .selector</code> - (選填) 指定發送按鈕。若未填寫,則在輸入後按 Enter。</li>
</ul>
</ul>
<div class="highlight-box" style="background: rgba(74, 144, 226, 0.08); border-color: rgba(74, 144, 226, 0.4);">
<p><strong>📝 實戰範例 (以 Rumble 為例):</strong></p>
<p style="margin-top: 8px; font-size: 12px; color: #555;">您可以直接在「平台設定」文本框中貼上以下完整配置:</p>
<ul style="margin-top: 8px; font-size: 12px; margin-left: 16px; list-style: none; font-family: 'Consolas', 'Monaco', monospace; background: rgba(0,0,0,0.05); padding: 12px; border-radius: 6px;">
<li style="color: #4a90e2;">@hostname rumble.com</li>
<li style="color: #4a90e2;">@chatContainer .chat-history</li>
<li style="color: #4a90e2;">@logic</li>
<li style="padding-left: 20px; color: #333;">mount: .chat-message-form-section</li>
<li style="padding-left: 20px; color: #333;">input: #chat-message-text-input</li>
<li style="padding-left: 20px; color: #333;">send: .chat--send</li>
</ul>
<p style="margin-top: 8px; font-size: 11px; color: #666;">💡 提示:您也可以分開填寫,上方填寫網域和容器,下方只填寫 @logic 及其後續指令。</p>
</div>
<div class="highlight-box" style="background: rgba(255, 212, 59, 0.08); border-color: rgba(255, 212, 59, 0.4);">
<p><strong>💡 如何取得 CSS 選擇器?</strong></p>
<p style="margin-top: 8px; font-size: 12px;">
1. 在目標網站按下 <code>F12</code> 開啟開發者工具。<br>
2. 使用選擇工具 ↖️ 點擊網頁元素。<br>
3. 查看該元素的 <code>class</code> (用 <code>.</code> 開頭) 或 <code>id</code> (用 <code>#</code> 開頭)。
</p>
</div>
</div>
<div class="content-section">
<h2>🎨 貼圖格式</h2>
<h3>🌐 GSS 通用圖片連結</h3>
<p>格式:<code>GSS-[圖片連結]</code></p>
<ul>
<li>支援格式:.jpg, .jpeg, .png, .gif, .webp, .bmp, .svg, .mp4</li>
<li>支援直接連結或相對連結</li>
<li>範例:<code>GSS-https://example.com/image.jpg</code></li>
<li>範例:<code>GSS-cdn.discordapp.com/attachments/.../image.png</code></li>
</ul>
<div class="highlight-box">
<p><strong>🔍 連結取得方式:</strong></p>
<p style="margin-top: 8px; font-size: 12px;">
1. 在網路上看到喜歡的圖片<br>
2. 右鍵複製圖片連結<br>
3. 加上 <code>GSS-</code> 前綴即可使用<br>
<span style="color: rgba(255,255,255,0.6); font-size: 11px;">※ 支援 Discord、Imgur、或其他任何圖片連結</span>
</p>
</div>
<h3>CatBox 圖片/影片</h3>
<p>格式:<code>CB-xxx.ext</code></p>
<p>支援格式:<code>.gif</code>, <code>.png</code></p>
<p>範例:<code>CB-z8dta6.gif</code></p>
<div class="highlight-box">
<p><strong>🔍 CatBox ID 取得方式:</strong></p>
<p style="margin-top: 8px; font-size: 12px;">
CatBox 網址範例:<code>https://files.catbox.moe/z8dta6.gif</code>
</p>
<p style="margin-top: 8px;">
網址最後一段 <code>z8dta6.gif</code> 就是 ID
</p>
</div>
<h3>Imgur 圖片/影片</h3>
<p>格式:<code>IM-xxx.ext</code></p>
<ul>
<li>支援格式:.gif, .png, .jpg, .mp4</li>
<li>範例:<code>IM-ha3eTC7.gif</code>、<code>IM-abc1234.mp4</code></li>
</ul>
<div class="highlight-box">
<p><strong>🔍 Imgur ID 取得方式:</strong></p>
<p style="margin-top: 8px; font-size: 12px;">
Imgur 網址範例:<code>https://i.imgur.com/ha3eTC7.gif</code> 或 <code>https://imgur.com/ha3eTC7</code>
</p>
<p style="margin-top: 8px;">
網址最後一段 <code>ha3eTC7</code> 就是 ID<br>
使用時請加上 <code>IM-</code> 前綴和副檔名(如 .gif/.mp4),變成 <code>IM-ha3eTC7.gif</code><br>
<span style="color: rgba(255,255,255,0.6); font-size: 11px;">※ 若不知道副檔名,可先嘗試 .gif 或 .mp4</span>
</p>
</div>
<h3>meee.com.tw 圖片/影片</h3>
<p>格式:<code>ME-xxx.ext</code></p>
<ul>
<li>支援格式:.gif, .png(其他格式待確認)</li>
<li>範例:<code>ME-LXEcxGi.gif</code>、<code>ME-HUi2Bs0.png</code></li>
</ul>
<div class="highlight-box">
<p><strong>🔍 meee ID 取得方式:</strong></p>
<p style="margin-top: 8px; font-size: 12px;">
meee 網址範例:<code>https://meee.com.tw/LXEcxGi</code>
</p>
<p style="margin-top: 8px;">
網址最後一段 <code>LXEcxGi</code> 就是 ID<br>
使用時請加上 <code>ME-</code> 前綴和副檔名(如 .gif/.png),變成 <code>ME-LXEcxGi.gif</code><br>
<span style="color: rgba(255,255,255,0.6); font-size: 11px;">※ 若不知道副檔名,可先嘗試 .gif 或 .png</span>
</p>
</div>
<h3>🎬 YouTube 影片</h3>
<p>統一格式:<code>YT-xxx</code>(系統自動識別影片類型)</p>
<p style="margin-top: 8px; font-size: 12px;">
<code>https://www.youtube.com/watch?v=xxxx</code><br>
<code>https://www.youtube.com/shorts/xxxx</code>
</p>
<div class="highlight-box" style="background: rgba(40, 167, 69, 0.08); border-color: rgba(40, 167, 69, 0.4);">
<p><strong>🤖 智能模式:</strong></p>
<ul style="margin-top: 8px; font-size: 12px; margin-left: 16px;">
<li><strong>Shorts 短影音</strong>(9:16 比例)→ 自動靜音循環播放,可點擊播放</li>
<li><strong>一般影片</strong>(16:9 比例)→ 顯示縮略圖,點擊播放</li>
<li>系統自動檢測影片類型</li>
</ul>
</div>
<ul>
<li>在聊天室輸入會自動顯示縮略圖,點擊開啟內建播放器</li>
<li>範例:<code>YT-tGXZNHNhI0I</code></li>
</ul>
<div class="highlight-box">
<p><strong>🔍 ID 取得方式:</strong></p>
<p style="margin-top: 8px; font-size: 12px;">
<code>youtube.com/watch?v=xxx</code> → ID 是 <code>xxx</code> → 使用 <code>YT-xxx</code><br>
<code>youtu.be/xxx</code> → ID 是 <code>xxx</code> → 使用 <code>YT-xxx</code><br>
<code>youtube.com/shorts/xxx</code> → ID 是 <code>xxx</code> → 使用 <code>YT-xxx</code>
</p>
</div>
<div class="highlight-box">
<p><strong>📋 平台支援狀態:</strong></p>
<p style="margin-top: 8px; font-size: 12px;">
<strong>Twitch / KICK:</strong>完整支援縮略圖與播放器<br>
<strong>Vaughn Live:</strong>YT- 會顯示縮略圖,但完整 YouTube 連結不會轉換(避免官方攔截)
</p>
</div>
</div>
<div class="content-section">
<h2>🏷️ 標籤功能</h2>
<p>每張貼圖可添加最多 <strong>4 個標籤</strong>,方便分類和搜尋。</p>
<p>格式:<code>CB-xxx #meme #reaction</code></p>
<ul>
<li>標籤以 <code>#</code> 開頭</li>
<li>每個標籤最多 16 個字元</li>
<li>不能包含空格或 <code>#</code></li>
</ul>
<div class="highlight-box">
<p>💡 <strong>提示:</strong>右鍵點擊貼圖(在頻道頁面或插件面板)即可快速添加/移除標籤</p>
</div>
</div>
<div class="content-section">
<h2>⭐ 快捷操作</h2>
<ul>
<li><strong>★ 常用標記:</strong>點擊貼圖上的 ★ 按鈕將其標記為常用,常用貼圖會置頂顯示</li>
<li><strong>✕ 刪除:</strong>點擊 ✕ 按鈕從清單中移除貼圖</li>
<li><strong>右鍵標籤:</strong>在貼圖上點擊右鍵可添加或移除標籤</li>
</ul>
</div>
<div class="content-section">
<h2>🧹 清潔元素功能</h2>
<p>清潔元素功能讓你隱藏網頁上干擾視覺的元素,讓實況界面更乾淨。與 uBlock 不同,GSS 提供清楚的隱藏列表,讓你一目了然知道每個網域隱藏了什麼。</p>
<h3>📌 功能位置</h3>
<p>點擊插件面板中的【清潔】標籤頁即可進入清潔元素功能。</p>
<h3>🎯 方法一:揀選模式(推薦,最簡單)</h3>
<div class="highlight-box">
<p><strong>使用步驟:</strong></p>
<ol style="margin-left: 20px; margin-top: 8px;">
<li>在【清潔】頁面點擊【🎯 開始揀選元素】按鈕</li>
<li>Popup 會自動關閉,畫面中央會顯示「🎯 揀選模式中 | 點擊元素隱藏 | 按 Esc 退出」</li>
<li>將鼠標移動到你想隱藏的元素上(該元素會顯示藍色邊框)</li>
<li>點擊該元素,系統會自動生成選擇器並立即隱藏它</li>
<li>可以連續點擊多個元素進行隱藏</li>
<li>完成後按 <code>Esc</code> 鍵退出揀選模式</li>
</ol>
</div>
<h3>⌨️ 方法二:手動添加選擇器(進階)</h3>
<p>如果你知道 CSS 選擇器,可以直接手動添加。以下是詳細步驟:</p>
<div class="highlight-box">
<p><strong>步驟 1:取得 CSS 選擇器</strong></p>
<ol style="margin-left: 20px; margin-top: 8px; font-size: 13px;">
<li>在目標網頁按下 <code>F12</code> 開啟開發者工具</li>
<li>點擊開發者工具左上角的「選擇元素」按鈕(圖示:◇ 或 ↖️)</li>
<li>在網頁上點擊你想隱藏的元素</li>
<li>在開發者工具的「Elements」面板中,找到該元素的 HTML 程式碼</li>
<li>查看該元素的 <code>class</code> 或 <code>id</code> 屬性</li>
</ol>
<p style="margin-top: 12px; font-size: 12px; color: #868e96;">
<strong>選擇器格式:</strong><br>
• 如果有 <code>id="sidebar"</code> → 選擇器是 <code>#sidebar</code><br>
• 如果有 <code>class="advertisement"</code> → 選擇器是 <code>.advertisement</code><br>
• 如果有多個 class → 選擇器是 <code>.class1.class2</code><br>
• 如果是嵌套元素 → 選擇器是 <code>.parent .child</code>
</p>
</div>
<div class="highlight-box">
<p><strong>步驟 2:添加選擇器</strong></p>
<ol style="margin-left: 20px; margin-top: 8px; font-size: 13px;">
<li>在【清潔】頁面的「手動添加 CSS 選擇器」輸入框中,輸入你取得的選擇器</li>
<li>點擊右側的【添加】按鈕</li>
<li>系統會立即應用該規則並顯示在下方的規則列表中</li>
</ol>
<p style="margin-top: 12px; font-size: 12px; color: #868e96;">
<strong>範例:</strong><br>
• 輸入 <code>.sidebar</code> 隱藏側邊欄<br>
• 輸入 <code>#ads</code> 隱藏廣告區塊<br>
• 輸入 <code>.header .banner</code> 隱藏標題橫幅
</p>
</div>
<h3>📋 管理隱藏規則</h3>
<p>所有隱藏規則都會顯示在下方的表格中:</p>
<ul>
<li><strong>查看規則:</strong>表格顯示每個規則的平台、選擇器、元素類型和文字內容</li>
<li><strong>刪除規則:</strong>點擊規則右側的【刪除】按鈕即可移除該規則</li>
<li><strong>清空全部:</strong>點擊表格上方的【清空全部】按鈕可一次刪除所有規則</li>
<li><strong>按網域分組:</strong>規則自動按網域保存,不同網站的規則不會互相干擾</li>
</ul>
<h3>⚠️ 注意事項</h3>
<div class="highlight-box" style="background: rgba(255, 212, 59, 0.08); border-color: rgba(255, 212, 59, 0.4);">
<p><strong>選擇器穩定性警告:</strong></p>
<p style="margin-top: 8px; font-size: 12px;">
• 當你看到「⚠️ 選擇器可能不穩定,建議重新選擇」的提示時,表示系統認為該選擇器可能不穩定<br>
• 不穩定的選擇器可能包含 <code>nth-child</code> 或 <code>nth-of-type</code>,這些選擇器依賴元素位置<br>
• 網頁重新載入後,元素位置可能改變,導致選擇器失效<br>
• 建議選擇有固定 <code>id</code> 或多個穩定 <code>class</code> 的元素
</p>
</div>
<div class="highlight-box">
<p><strong>常見問題:</strong></p>
<ul style="margin-top: 8px; font-size: 12px; margin-left: 16px;">
<li><strong>Q:為什麼某些元素刷新後又出現了?</strong><br>
A:可能因為選擇器不穩定。建議重新選擇該元素的父容器,選擇有固定 id 或 class 的元素。</li>
<li><strong>Q:規則會永久保存嗎?</strong><br>
A:會。規則按網域自動保存到瀏覽器,重新載入頁面後規則仍然生效。</li>
<li><strong>Q:如何測試選擇器是否正確?</strong><br>
A:在開發者工具的 Console 中輸入 <code>document.querySelectorAll('你的選擇器')</code>,看能否找到元素。</li>
<li><strong>Q:可以隱藏頁面的任何元素嗎?</strong><br>
A:除了 <code>html</code> 和 <code>body</code> 元素外,其他元素都可以隱藏。</li>
</ul>
</div>
</div>
<div class="content-section">
<h2>🧶 TexoStreamCore (TSC) 實況管理</h2>
<p>TSC 是 GSS 的實況主管理平台,讓你在直播頁面快速切換不同實況主的頻道,並使用<strong>共用聊天室</strong>功能。</p>
<h3>📋 設定格式</h3>
<p>在管理面板的<strong>【編織】</strong>標籤輸入:</p>
<div class="highlight-box">
<pre style="margin:0; font-size:11px;"><code>>Elfin
!https://www.twitch.tv/elfinl
#https://www.twitch.tv/elfinl
#https://kick.com/elfinl
#https://vaughn.live/elfinl
#https://www.youtube.com/@Elfin-Lee</code></pre>
<p style="margin-top:8px; font-size:11px; color:#868e96;">
<span style="color:#ffaa66;">></span> 實況主名稱<br>
<span style="color:#ffaa66;">#</span> 直播平台網址<br>
<span style="color:#ffaa66;">!</span> 共用聊天室(支援 Twitch / KICK)
</p>
</div>
<h3>🎯 核心功能</h3>
<ul>
<li><strong>多位實況主管理:</strong>同時追蹤多位實況主的開台狀態</li>
<li><strong>實時狀態顯示:</strong>🟢 在線 / 🔴 離線 / ⚫ 未知</li>
<li><strong>面板控制:</strong>點擊網站標誌右側的 ▼ 箭頭展開/收合 TSC 面板,再點擊平台徽章直接跳轉</li>
<li><strong>共用聊天室:</strong>例如將 Twitch / KICK 聊天嵌入 Vaughn 頁面,完全支援 GSS 貼圖(注意:Twitch 聊天因安全策略無法在 KICK
頁面嵌入;KICK 聊天因 CSRF 保護限制,在第三方頁面只能查看無法發言(等待 KICK 官方開放嵌入 API);Vaughn Live 因無可靠檢測方法,開台狀態暫時顯示 ⚫ 未知)</li>
<li><strong>自動抓取:</strong>在直播頁面放置 <code>#GSS-TexoStreamCore</code> 標記,插件會自動讀取下方資料</li>
</ul>
<h3>🤖 自動抓取設定</h3>
<p>在直播說明或頁面任意位置加入以下格式,TSC 會自動偵測並匯入:</p>
<div class="highlight-box">
<pre style="margin:0; font-size:11px;"><code>#GSS-TexoStreamCore
>Elfin
!https://www.twitch.tv/elfinl
#https://www.twitch.tv/elfinl
#https://kick.com/elfinl
#https://vaughn.live/elfinl
#https://www.youtube.com/@Elfin-Lee</code></pre>
<p style="margin-top:8px; font-size:11px; color:#868e96;">
<span style="color:#ffaa66;">></span> 實況主名稱<br>
<span style="color:#ffaa66;">#</span> 直播平台網址(支援 Twitch / KICK / Vaughn / YouTube)<br>
<span style="color:#ffaa66;">!</span> 共用聊天室(支援 Twitch / KICK)
</p>
</div>
<h3>🌐 支援平台</h3>
<p><strong>貼圖發送:</strong>Twitch、KICK、YouTube、Vaughn Live</p>
<p><strong>開台狀態檢測:</strong>Twitch、KICK、YouTube、Vaughn Live(⚫ 尚未支持)</p>
</div>
</div>
<!-- English Content -->
<div id="content-en" class="hidden">
<div class="content-section">
<h2>📋 Quick Start</h2>
<div class="highlight-box">
<p><strong>Steps:</strong></p>
<ol style="margin-left: 20px; margin-top: 8px;">
<li>Log in to Twitch, YouTube, Vaughn Live, beamstream, w.tv or KICK and go to a channel page</li>
<li>Open the extension and enter your sticker ID list</li>
<li>Click the GSS icon next to the chat to open the sticker panel</li>
<li>Click sticker to send (e.g. Twitch/KICK: auto-send, others: auto-fill)</li>
</ol>
</div>
</div>
<div class="content-section">
<h2>🌐 Custom Platforms</h2>
<p style="font-size: 13px; color: #666; margin-top: -4px; margin-bottom: 12px;">📍 <strong>Location:</strong>
<code>Main Panel</code> ➔ <code>Settings</code> ➔ <code>Custom Platform Settings</code>
</p>
<div class="highlight-box"
style="background: rgba(40, 167, 69, 0.08); border-color: rgba(40, 167, 69, 0.4); margin-bottom: 16px;">
<p style="color: #28a745; font-weight: bold;">✅ Native Platforms Supported (No Setup Required):</p>
<p style="margin-top: 4px; font-size: 12px; line-height: 1.5; color: #555;">
GSS has natively integrated sticker management for <strong>Twitch, YouTube, Kick, VaughnLive, BeamStream,
and W.tv</strong>.<br>
Unless these official websites undergo major structural changes that break native support, <strong>DO
NOT</strong> add these domains to the custom platforms below to prevent script execution conflicts.
</p>
</div>
<p>GSS supports adding support for any live streaming website via "Custom Scripts". Even if a platform is not
currently listed, you can enable sticker functionality through simple configuration.</p>
<div class="highlight-box">
<p><strong>Set three key parameters:</strong></p>
<ul style="margin-top: 8px; font-size: 13px; margin-left: 16px;">
<li><strong>Domain:</strong> Where the script activates (e.g., <code>rumble.com</code>).</li>
<li><strong>Chat Container:</strong> Where the extension scans for sticker IDs (CSS selector).</li>
<li><strong>Platform Config:</strong> Use <code>@</code> command format to define button placement and sending behavior.</li>
</ul>
</div>
<h3>📜 Platform Config Syntax</h3>
<p>In the "Platform Config" large text box, use the following <code>@</code> command format (one command per line):</p>
<ul style="margin-bottom: 12px;">
<li><code>@hostname domain.com</code> - Domain (optional, can be omitted if already filled in the domain field above).</li>
<li><code>@chatContainer .selector</code> - Chat container, where to scan for sticker IDs (optional, can be omitted if already filled in the container field above).</li>
<li><code>@logic</code> - Start defining script logic, followed by one command per line:</li>
<ul style="margin-top: 4px; margin-left: 20px;">
<li><code>mount: .selector</code> - Where to insert the sticker button.</li>
<li><code>input: .selector</code> - Where to paste the sticker ID.</li>
<li><code>send: .selector</code> - (Optional) Specify send button. If empty, presses Enter after pasting.</li>
</ul>
</ul>
<div class="highlight-box" style="background: rgba(74, 144, 226, 0.08); border-color: rgba(74, 144, 226, 0.4);">
<p><strong>📝 Real Example (Rumble):</strong></p>
<p style="margin-top: 8px; font-size: 12px; color: #555;">You can directly paste the following complete configuration into the "Platform Config" text box:</p>
<ul style="margin-top: 8px; font-size: 12px; margin-left: 16px; list-style: none; font-family: 'Consolas', 'Monaco', monospace; background: rgba(0,0,0,0.05); padding: 12px; border-radius: 6px;">
<li style="color: #4a90e2;">@hostname rumble.com</li>
<li style="color: #4a90e2;">@chatContainer .chat-history</li>
<li style="color: #4a90e2;">@logic</li>
<li style="padding-left: 20px; color: #333;">mount: .chat-message-form-section</li>
<li style="padding-left: 20px; color: #333;">input: #chat-message-text-input</li>
<li style="padding-left: 20px; color: #333;">send: .chat--send</li>
</ul>
<p style="margin-top: 8px; font-size: 11px; color: #666;">💡 Tip: You can also fill them separately - enter domain and container in the fields above, and only enter @logic and its subsequent commands below.</p>
</div>
<div class="highlight-box" style="background: rgba(255, 212, 59, 0.08); border-color: rgba(255, 212, 59, 0.4);">
<p><strong>💡 How to get CSS Selectors?</strong></p>
<p style="margin-top: 8px; font-size: 12px;">
1. Press <code>F12</code> on the target site to open DevTools.<br>
2. Use the picker tool ↖️ to click on web elements.<br>
3. Find the element's <code>class</code> (starts with <code>.</code>) or <code>id</code> (starts with
<code>#</code>).
</p>
</div>
</div>
<div class="content-section">
<h2>🎨 Sticker Formats</h2>
<h3>🌐 GSS Universal Image Links</h3>
<p>Format: <code>GSS-[image_link]</code></p>
<ul>
<li>Supported formats: .jpg, .jpeg, .png, .gif, .webp, .bmp, .svg, .mp4</li>
<li>Supports direct links or relative links</li>
<li>Example: <code>GSS-https://example.com/image.jpg</code></li>
<li>Example: <code>GSS-cdn.discordapp.com/attachments/.../image.png</code></li>
</ul>
<div class="highlight-box">
<p><strong>🔍 How to get links:</strong></p>
<p style="margin-top: 8px; font-size: 12px;">
1. Find an image you like online<br>
2. Right-click and copy image link<br>
3. Add <code>GSS-</code> prefix to use<br>
<span style="color: rgba(255,255,255,0.6); font-size: 11px;">※ Supports Discord, Imgur, or any other image
links</span>
</p>
</div>
<h3>CatBox Images/Videos</h3>
<p>Format: <code>CB-xxx.ext</code></p>
<p>Supported formats: <code>.gif</code>, <code>.png</code></p>
<p>Example: <code>CB-z8dta6.gif</code></p>
<div class="highlight-box">
<p><strong>🔍 How to get CatBox ID:</strong></p>
<p style="margin-top: 8px; font-size: 12px;">
Example URL: <code>https://files.catbox.moe/z8dta6.gif</code>
</p>
<p style="margin-top: 8px;">
The last part <code>z8dta6.gif</code> is the ID
</p>
</div>
<h3>Imgur Images/Videos</h3>
<p>Format: <code>IM-xxx.ext</code></p>
<ul>
<li>Supported: .gif, .png, .jpg, .mp4</li>
<li>Examples: <code>IM-ha3eTC7.gif</code>, <code>IM-abc1234.mp4</code></li>
</ul>
<div class="highlight-box">
<p><strong>🔍 How to get Imgur ID:</strong></p>
<p style="margin-top: 8px; font-size: 12px;">
Example URL: <code>https://i.imgur.com/ha3eTC7.gif</code> or <code>https://imgur.com/ha3eTC7</code>
</p>
<p style="margin-top: 8px;">
The last part <code>ha3eTC7</code> is the ID<br>
Add <code>IM-</code> prefix and extension (e.g., .gif/.mp4): <code>IM-ha3eTC7.gif</code><br>
<span style="color: rgba(255,255,255,0.6); font-size: 11px;">※ If unsure of extension, try .gif or
.mp4</span>
</p>
</div>
<h3>meee.com.tw Images/Videos</h3>
<p>Format: <code>ME-xxx.ext</code></p>
<ul>
<li>Supported: .gif, .png (other formats to be confirmed)</li>
<li>Examples: <code>ME-LXEcxGi.gif</code>, <code>ME-HUi2Bs0.png</code></li>
</ul>
<div class="highlight-box">
<p><strong>🔍 How to get meee ID:</strong></p>
<p style="margin-top: 8px; font-size: 12px;">
Example URL: <code>https://meee.com.tw/LXEcxGi</code>
</p>
<p style="margin-top: 8px;">
The last part <code>LXEcxGi</code> is the ID<br>
Add <code>ME-</code> prefix and extension (e.g., .gif/.png): <code>ME-LXEcxGi.gif</code><br>
<span style="color: rgba(255,255,255,0.6); font-size: 11px;">※ If unsure of extension, try .gif or
.png</span>
</p>
</div>
<h3>🎬 YouTube Videos</h3>
<p>Unified Format: <code>YT-xxx</code> (Auto-detects video type)</p>
<p style="margin-top: 8px; font-size: 12px;">
<code>https://www.youtube.com/watch?v=xxxx</code><br>
<code>https://www.youtube.com/shorts/xxxx</code>
</p>
<div class="highlight-box" style="background: rgba(40, 167, 69, 0.08); border-color: rgba(40, 167, 69, 0.4);">
<p><strong>🤖 Smart Mode:</strong></p>
<ul style="margin-top: 8px; font-size: 12px; margin-left: 16px;">
<li><strong>Shorts</strong> (9:16 ratio) → Auto-plays muted in loop, clickable to play</li>
<li><strong>Regular videos</strong> (16:9 ratio) → Thumbnail, click to play</li>
<li>System auto-detects video type</li>
</ul>
</div>
<ul>
<li>Enter in chat to auto-display thumbnail, click to open built-in player</li>
<li>Example: <code>YT-tGXZNHNhI0I</code></li>
</ul>
<div class="highlight-box">
<p><strong>🔍 How to get ID:</strong></p>
<p style="margin-top: 8px; font-size: 12px;">
<code>youtube.com/watch?v=xxx</code> → ID is <code>xxx</code> → Use <code>YT-xxx</code><br>
<code>youtu.be/xxx</code> → ID is <code>xxx</code> → Use <code>YT-xxx</code><br>
<code>youtube.com/shorts/xxx</code> → ID is <code>xxx</code> → Use <code>YT-xxx</code>
</p>
</div>
<div class="highlight-box">
<p><strong>📋 Platform Support:</strong></p>
<p style="margin-top: 8px; font-size: 12px;">
<strong>Twitch / KICK:</strong> Full thumbnail and player support<br>
<strong>Vaughn Live:</strong> YT- shows thumbnail, but full YouTube URLs are not converted (to avoid
platform interception)
</p>
</div>
</div>
<div class="content-section">
<h2>🏷️ Tags</h2>
<p>Each sticker can have up to <strong>4 tags</strong> for easy categorization and filtering.</p>
<p>Format: <code>CB-xxx #meme #reaction</code></p>
<ul>
<li>Tags start with <code>#</code></li>
<li>Max 16 characters per tag</li>
<li>No spaces or <code>#</code> allowed in tag names</li>
</ul>
<div class="highlight-box">
<p>💡 <strong>Tip:</strong> Right-click on any sticker (on channel or in panel) to quickly add/remove tags</p>
</div>
</div>
<div class="content-section">
<h2>⭐ Shortcuts</h2>
<ul>
<li><strong>★ Favorite:</strong> Click the ★ button to mark a sticker as favorite. Favorites appear at the
top.</li>
<li><strong>✕ Delete:</strong> Click the ✕ button to remove a sticker from your list</li>
<li><strong>Right-click Tags:</strong> Right-click a sticker to add or remove tags</li>
</ul>
</div>
<div class="content-section">
<h2>🧹 Clean Elements</h2>
<p>Clean Elements allows you to hide distracting elements on web pages, making streaming interfaces cleaner. Unlike uBlock, GSS provides a clear list of hidden elements, so you can see exactly what's hidden on each domain.</p>
<h3>📌 Location</h3>
<p>Click the 【Clean】 tab in the extension panel to access the Clean Elements feature.</p>
<h3>🎯 Method 1: Picker Mode (Recommended, Easiest)</h3>
<div class="highlight-box">
<p><strong>Steps:</strong></p>
<ol style="margin-left: 20px; margin-top: 8px;">
<li>Click the 【🎯 Start Picker】 button in the 【Clean】 page</li>
<li>The popup will close automatically, and "🎯 Picker Mode | Click element to hide | Press Esc to exit" will appear in the center of the screen</li>
<li>Move your mouse to the element you want to hide (it will show a blue border)</li>
<li>Click the element, and the system will automatically generate a selector and hide it immediately</li>
<li>You can click multiple elements continuously to hide them</li>
<li>Press <code>Esc</code> to exit picker mode when done</li>
</ol>
</div>
<h3>⌨️ Method 2: Manual Selector Addition (Advanced)</h3>
<p>If you know CSS selectors, you can add them manually. Here are the detailed steps:</p>
<div class="highlight-box">
<p><strong>Step 1: Get CSS Selector</strong></p>
<ol style="margin-left: 20px; margin-top: 8px; font-size: 13px;">
<li>Press <code>F12</code> on the target webpage to open Developer Tools</li>
<li>Click the "Select Element" button in the top-left of Developer Tools (icon: ◇ or ↖️)</li>
<li>Click the element you want to hide on the webpage</li>
<li>In the "Elements" panel of Developer Tools, find the HTML code for that element</li>
<li>Check the element's <code>class</code> or <code>id</code> attribute</li>
</ol>
<p style="margin-top: 12px; font-size: 12px; color: #868e96;">
<strong>Selector Format:</strong><br>
• If <code>id="sidebar"</code> → Selector is <code>#sidebar</code><br>
• If <code>class="advertisement"</code> → Selector is <code>.advertisement</code><br>
• If multiple classes → Selector is <code>.class1.class2</code><br>
• If nested elements → Selector is <code>.parent .child</code>
</p>
</div>
<div class="highlight-box">
<p><strong>Step 2: Add Selector</strong></p>
<ol style="margin-left: 20px; margin-top: 8px; font-size: 13px;">
<li>In the "Manual CSS Selector" input box in the 【Clean】 page, enter the selector you obtained</li>
<li>Click the 【Add】 button on the right</li>
<li>The system will immediately apply the rule and display it in the rule list below</li>
</ol>
<p style="margin-top: 12px; font-size: 12px; color: #868e96;">
<strong>Examples:</strong><br>
• Enter <code>.sidebar</code> to hide sidebar<br>
• Enter <code>#ads</code> to hide ad block<br>
• Enter <code>.header .banner</code> to hide header banner
</p>
</div>
<h3>📋 Managing Hidden Rules</h3>
<p>All hidden rules are displayed in the table below:</p>
<ul>
<li><strong>View Rules:</strong> The table shows each rule's platform, selector, element type, and text content</li>
<li><strong>Delete Rule:</strong> Click the 【Delete】 button on the right of the rule to remove it</li>
<li><strong>Clear All:</strong> Click the 【Clear All】 button above the table to delete all rules at once</li>
<li><strong>Grouped by Domain:</strong> Rules are automatically saved by domain, so rules for different websites don't interfere with each other</li>
</ul>
<h3>⚠️ Important Notes</h3>
<div class="highlight-box" style="background: rgba(255, 212, 59, 0.08); border-color: rgba(255, 212, 59, 0.4);">
<p><strong>Selector Stability Warning:</strong></p>
<p style="margin-top: 8px; font-size: 12px;">
• When you see "⚠️ Selector may be unstable, try reselecting", it means the system thinks the selector might be unstable<br>
• Unstable selectors may contain <code>nth-child</code> or <code>nth-of-type</code>, which depend on element position<br>
• After page reload, element positions may change, causing the selector to fail<br>
• It's recommended to select elements with fixed <code>id</code> or multiple stable <code>class</code> attributes
</p>
</div>
<div class="highlight-box">
<p><strong>FAQ:</strong></p>
<ul style="margin-top: 8px; font-size: 12px; margin-left: 16px;">
<li><strong>Q: Why do some elements reappear after refresh?</strong><br>
A: Possibly because the selector is unstable. Try reselecting the element's parent container, choosing elements with fixed id or class.</li>
<li><strong>Q: Are rules permanently saved?</strong><br>
A: Yes. Rules are automatically saved by domain to the browser and remain effective after page reload.</li>
<li><strong>Q: How to test if a selector is correct?</strong><br>
A: In Developer Tools Console, enter <code>document.querySelectorAll('your selector')</code> to see if it finds elements.</li>
<li><strong>Q: Can I hide any element on the page?</strong><br>
A: Except for <code>html</code> and <code>body</code> elements, all other elements can be hidden.</li>
</ul>
</div>
</div>
<div class="content-section">
<h2>🧶 TexoStreamCore (TSC) Streamer Management</h2>
<p>TSC is GSS's streamer management platform, allowing you to quickly switch between different streamers'
channels and use the <strong>Shared Chat</strong> feature.</p>
<h3>📋 Configuration Format</h3>
<p>Enter in the <strong>【Weave】</strong> tab of the management panel:</p>
<div class="highlight-box">
<pre style="margin:0; font-size:11px;"><code>>Elfin
!https://www.twitch.tv/elfinl
#https://www.twitch.tv/elfinl
#https://kick.com/elfinl
#https://vaughn.live/elfinl
#https://www.youtube.com/@Elfin-Lee</code></pre>
<p style="margin-top:8px; font-size:11px; color:#868e96;">
<span style="color:#ffaa66;">></span> Streamer name<br>
<span style="color:#ffaa66;">#</span> Platform URL<br>
<span style="color:#ffaa66;">!</span> Shared chat (Twitch / KICK supported)
</p>
</div>
<h3>🎯 Core Features</h3>
<ul>
<li><strong>Multiple Streamers:</strong> Track multiple streamers' live status simultaneously</li>
<li><strong>Real-time Status:</strong> 🟢 Online / 🔴 Offline / ⚫ Unknown</li>
<li><strong>Panel Control:</strong> Click the ▼ arrow next to the site logo to expand/collapse the TSC panel,
then click platform badges to navigate</li>
<li><strong>Shared Chat:</strong> For example, embed Twitch / KICK chat on Vaughn pages, fully
supports GSS stickers (Note: Twitch chat cannot be embedded on KICK pages due to security policy;
KICK chat can only be viewed but not interacted with on third-party pages due to CSRF protection (waiting
for KICK to release embed API); Vaughn Live status shows ⚫ Unknown as no reliable detection method is
currently available)</li>
<li><strong>Auto-Detection:</strong> Place <code>#GSS-TexoStreamCore</code> tag on your page and the extension
will automatically read the data below</li>
</ul>
<h3>🤖 Auto-Detection Setup</h3>
<p>Add the following format anywhere on your stream page or description, TSC will automatically detect and
import:</p>
<div class="highlight-box">
<pre style="margin:0; font-size:11px;"><code>#GSS-TexoStreamCore
>Elfin
!https://www.twitch.tv/elfinl
#https://www.twitch.tv/elfinl
#https://kick.com/elfinl
#https://vaughn.live/elfinl
#https://www.youtube.com/@Elfin-Lee</code></pre>
<p style="margin-top:8px; font-size:11px; color:#868e96;">
<span style="color:#ffaa66;">></span> Streamer name<br>
<span style="color:#ffaa66;">#</span> Platform URL (supports Twitch / KICK / Vaughn / YouTube)<br>
<span style="color:#ffaa66;">!</span> Shared chat (Twitch / KICK supported)
</p>
</div>
<h3>🌐 Supported Platforms</h3>
<p><strong>Sticker Sending:</strong> Twitch, KICK, YouTube, Vaughn Live</p>
<p><strong>Live Status Detection:</strong> Twitch, KICK, YouTube, Vaughn Live (⚫ Not yet supported)</p>
</div>
</div>
<!-- 简中內容 -->
<div id="content-zh-CN" class="hidden">
<div class="content-section">
<h2>📋 快速开始</h2>
<div class="highlight-box">
<p><strong>使用步骤:</strong></p>
<ol style="margin-left: 20px; margin-top: 8px;">
<li>在 Twitch、YouTube、Vaughn Live、beamstream、w.tv 或 KICK 登录并进入频道页面</li>
<li>开启插件,输入贴纸 ID 清单</li>
<li>点击聊天室旁的 GSS 图标开启贴纸面板</li>
<li>点击贴图快速发送(例如 Twitch/KICK 全自动,其他平台自动填入)</li>
</ol>
</div>
</div>
<div class="content-section">
<h2>🌐 自定义平台</h2>
<p style="font-size: 13px; color: #666; margin-top: -4px; margin-bottom: 12px;">📍 <strong>功能位置:</strong>
<code>主面板</code> ➔ <code>设置页</code> ➔ <code>自定义平台设置</code>
</p>
<div class="highlight-box"
style="background: rgba(40, 167, 69, 0.08); border-color: rgba(40, 167, 69, 0.4); margin-bottom: 16px;">
<p style="color: #28a745; font-weight: bold;">✅ 内置原生支持平台,无需重复添加:</p>
<p style="margin-top: 4px; font-size: 12px; line-height: 1.5; color: #555;">
GSS 已在底层内置了 <strong>Twitch、YouTube、Kick、VaughnLive、BeamStream、W.tv</strong> 的原生表情管理功能。<br>
除非这些官方网站的底层结构发生重大改变、导致原生功能失效,否则<strong>请勿</strong>将上述域名重复添加到下方的自定义平台中,以免发生脚本执行冲突。
</p>
</div>
<p>GSS 支持通过“自定义脚本”来扩展对任何直播网站的支持。即使是目前未列出的平台,您也可以通过简单的设置來启用贴纸功能。</p>
<div class="highlight-box">
<p><strong>设置三个关键参数:</strong></p>
<ul style="margin-top: 8px; font-size: 13px; margin-left: 16px;">
<li><strong>发动网域:</strong> 决定插件在哪个网站启动(例如:<code>rumble.com</code>)。</li>
<li><strong>聊天室容器:</strong> 决定插件要"扫描哪里"来找出别人的贴图 ID(CSS 选择器)。</li>
<li><strong>平台设定:</strong> 使用 <code>@</code> 指令格式定义按钮位置与发送行为。</li>
</ul>
</div>
<h3>📜 平台设定语法</h3>
<p>在「平台设定」大文本框中,使用以下 <code>@</code> 指令格式:</p>
<ul style="margin-bottom: 12px;">
<li><code>@hostname domain.com</code> - 发动网域(可选填)。</li>
<li><code>@chatContainer .selector</code> - 聊天室容器(可选填)。</li>
<li><code>@logic</code> - 开始定义脚本逻辑,之后每行输入一个指令:</li>
<ul style="margin-top: 8px; margin-left: 20px;">
<li><code>mount: .selector</code> - 决定贴图按钮要插在哪个元素旁边。</li>
<li><code>input: .selector</code> - 决定贴图 ID 要自动贴入哪个输入框。</li>
<li><code>send: .selector</code> - (选填) 指定发送按钮。若未填写,则在输入后按 Enter。</li>
</ul>
</ul>
<div class="highlight-box" style="background: rgba(74, 144, 226, 0.08); border-color: rgba(74, 144, 226, 0.4);">
<p><strong>📝 实战范例 (以 Rumble 为例):</strong></p>
<ul style="margin-top: 8px; font-size: 12px; margin-left: 16px; list-style: none;">
<li>🌐 <strong>网域:</strong> <code>rumble.com</code></li>
<li>🏠 <strong>容器:</strong> <code>.chat-history</code></li>
<li>📜 <strong>平台设定:</strong><br>
<span style="font-family: 'Consolas', 'Monaco', monospace; font-size: 11px; color: #4a90e2;">@hostname</span> <code>rumble.com</code><br>
<span style="font-family: 'Consolas', 'Monaco', monospace; font-size: 11px; color: #4a90e2;">@chatContainer</span> <code>.chat-history</code><br>
<span style="font-family: 'Consolas', 'Monaco', monospace; font-size: 11px; color: #4a90e2;">@logic</code><br>
<code>mount: .chat-message-form-section</code><br>
<code>input: #chat-message-text-input</code><br>
<code>send: .chat--send</code>
</li>
</ul>
</div>
<div class="highlight-box" style="background: rgba(255, 212, 59, 0.08); border-color: rgba(255, 212, 59, 0.4);">
<p><strong>💡 提示:</strong></p>
<p style="margin-top: 8px; font-size: 12px;">
您可以分开填写这三个参数,也可以一次性贴上完整的 @ 指令配置。<br>
系统会自动识别并解析所有指令。
</p>
</div>
<div class="highlight-box" style="background: rgba(255, 212, 59, 0.08); border-color: rgba(255, 212, 59, 0.4);">
<p><strong>💡 如何取得 CSS 选择器?</strong></p>
<p style="margin-top: 8px; font-size: 12px;">
1. 在目标网站按下 <code>F12</code> 开启开发者工具。<br>
2. 使用选择工具 ↖️ 点击网页元素。<br>
3. 查看该元素的 <code>class</code> (用 <code>.</code> 开头) 或 <code>id</code> (用 <code>#</code> 开头)。
</p>
</div>
</div>
<div class="content-section">
<h2>🎨 贴纸格式</h2>
<h3>🌐 GSS 通用图片链接</h3>
<p>格式:<code>GSS-[图片链接]</code></p>
<ul>
<li>支持格式:.jpg, .jpeg, .png, .gif, .webp, .bmp, .svg, .mp4</li>
<li>支持直接链接或相对链接</li>
<li>示例:<code>GSS-https://example.com/image.jpg</code></li>
<li>示例:<code>GSS-cdn.discordapp.com/attachments/.../image.png</code></li>
</ul>
<div class="highlight-box">
<p><strong>🔍 链接获取方式:</strong></p>
<p style="margin-top: 8px; font-size: 12px;">
1. 在网络上看到喜欢的图片<br>
2. 右键复制图片链接<br>
3. 加上 <code>GSS-</code> 前缀即可使用<br>
<span style="color: rgba(255,255,255,0.6); font-size: 11px;">※ 支持 Discord、Imgur、或其他任何图片链接</span>
</p>
</div>
<h3>CatBox 图片/视频</h3>
<p>格式:<code>CB-xxx.ext</code></p>