PrivacyProtection/popup.html at main · 0ghost0-dev/PrivacyProtection · 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
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body { width: 310px; font-family: sans-serif; }
    h2 { margin-top: 0; }
    h3 { margin-top: 15px; margin-bottom: 5px; }
    .collapsible-header { cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; }
    .toggle-icon { font-size: 12px; margin-right: 5px; }
    .collapsible-content { display: none; padding-left: 10px; border-left: 2px solid #eee; margin-left: 5px; }
    label { display: block; margin-bottom: 5px; }
    textarea { width: 95%; min-height: 60px; box-sizing: border-box; font-family: monospace; font-size: 12px; }
    button { margin-top: 15px; width: 100%; padding: 8px; font-size: 14px; }
    p { margin-top: 0; font-size: 12px; color: #555; }
    .note { font-size: 11px; color: #666; line-height: 1.3; }
    #warningBox {
      margin-top: 10px;
      background: #fff4f4;
      border: 1px solid #e6b4b4;
      color: #b40000;
      padding: 6px 8px;
      font-size: 11px;
      max-height: 140px;
      overflow-y: auto;
      display: none;
      white-space: pre-wrap;
    }
    .settings-group { margin-top: 10px; padding: 6px; background:#f7f7f7; border:1px solid #ddd; }
    .inline { display: inline-block; margin-right: 10px; }
  </style>
</head>
<body>
  <h2>개인정보 보호 설정</h2>

  <h3>활성화 여부</h3>
  <label><input type="radio" name="enable" value="on"> 활성화</label>
  <label><input type="radio" name="enable" value="off"> 비활성화</label>

  <h3>로딩 방식</h3>
  <label><input type="radio" name="loading" value="smooth"> 부드러운 로딩</label>
  <label><input type="radio" name="loading" value="instant"> 최대 노출 방지</label>

  <h3>제목(탭) 변환</h3>
  <label><input type="radio" name="titleTransform" value="on"> 활성화</label>
  <label><input type="radio" name="titleTransform" value="off"> 비활성화</label>

  <h3>가림 방식</h3>
  <label><input type="radio" name="masking" value="replaceText"> 텍스트 대치(별표)</label>
  <label><input type="radio" name="masking" value="replaceTextAndBlur"> 텍스트 대치 & 블러</label>

  <h3>적용 범위 설정</h3>
  <label><input type="radio" name="listMode" value="none"> 모든 사이트</label>
  <label><input type="radio" name="listMode" value="blacklist"> 블랙리스트 (목록 제외)</label>
  <label><input type="radio" name="listMode" value="whitelist"> 화이트리스트 (목록만)</label>

  <div class="settings-group">
    <strong>정규식 고급 설정</strong>
    <label class="inline"><input type="checkbox" id="autoGlobal"> 정규식 g 자동 부여</label>
    <label class="inline"><input type="checkbox" id="anchorPrefix"> prefix 정규식 ^ 자동 추가</label>
    <p class="note">위 옵션은 /패턴/플래그 형태에만 적용됩니다.</p>
  </div>

  <div class="collapsible-section">
    <h3 class="collapsible-header">변환 규칙 (단어/정규식)<span class="toggle-icon">▼</span></h3>
    <div class="collapsible-content">
      <p>형식: 문자열 또는 /정규식/플래그 -> 변환문구</p>
      <p class="note">
        예: 김민준 -> 홍길동<br>
        예: /\\d{4}-\\d{2}-\\d{2}/g -> [DATE]<br>
        예: /visa\\s*\\d{4}/i -> [카드번호]
      </p>
      <textarea id="rules"></textarea>
    </div>
  </div>

  <div class="collapsible-section">
    <h3 class="collapsible-header">시작 단어 매칭 (정규식 지원)<span class="toggle-icon">▼</span></h3>
    <div class="collapsible-content">
      <p>형식: 시작문자열 또는 /정규식/플래그 -> 변환문구</p>
      <p class="note">
        예: 계좌번호: -> [보안 정보]<br>
        예: /^User\\s+ID:/i -> [USER ID 숨김]<br>
        (옵션: ^ 자동 추가 켜짐)
      </p>
      <textarea id="prefixRules"></textarea>
    </div>
  </div>

  <div class="collapsible-section">
    <h3 class="collapsible-header">클래스/ID 매칭<span class="toggle-icon">▼</span></h3>
    <div class="collapsible-content">
      <p>형식: .class 또는 #id -> 변환문구</p>
      <textarea id="classoridRules"></textarea>
    </div>
  </div>

  <div class="collapsible-section">
    <h3 class="collapsible-header">사이트 목록<span class="toggle-icon">▼</span></h3>
    <div class="collapsible-content">
      <p>한 줄에 하나의 도메인 (예: example.com)</p>
      <textarea id="urlList"></textarea>
    </div>
  </div>

  <div id="warningBox"></div>

  <button id="save">저장 및 새로고침</button>
  <script src="popup.js"></script>
</body>
</html>