sfw/popup.html at main · opJay/sfw · 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
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SFW Settings</title>
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>SFW (Safe For Works)</h1>
      <div class="header-actions">
        <button id="exportBtn" class="btn btn-icon-header" title="설정 내보내기">💾</button>
        <button id="importBtn" class="btn btn-icon-header" title="설정 가져오기">📥</button>
      </div>
    </div>
    <input type="file" id="importFileInput" accept=".json" style="display: none;">

    <!-- 현재 사이트 정보 -->
    <div class="site-info">
      <strong>URL:</strong>
      <div id="currentSite" class="current-site">-</div>
    </div>

    <!-- 탭 네비게이션 -->
    <div class="tabs">
      <button class="tab-btn active" data-tab="network">네트워크 차단</button>
      <button class="tab-btn" data-tab="dom">요소 제거</button>
      <button class="tab-btn" data-tab="style">스타일</button>
    </div>

    <!-- 네트워크 차단 탭 -->
    <div id="networkTab" class="tab-content active">
      <!-- 규칙 추가 폼 -->
      <div class="add-rule-section">
        <div class="form-group">
          <label>URL 패턴:</label>
          <div class="input-group">
            <input type="text" id="urlPatternInput" placeholder="예: *://ads.example.com/*">
            <button id="networkPickerBtn" class="btn btn-picker" title="요소에서 URL 추출">🎯</button>
          </div>
          <small class="hint">와일드카드 사용 가능: * (모든 문자), || (도메인 시작)</small>
        </div>

        <div class="form-group">
          <label>리소스 타입:</label>
          <div class="checkbox-group">
            <label><input type="checkbox" value="image" checked> 이미지</label>
            <label><input type="checkbox" value="script" checked> 스크립트</label>
            <label><input type="checkbox" value="stylesheet" checked> CSS</label>
            <label><input type="checkbox" value="xmlhttprequest" checked> XHR</label>
            <label><input type="checkbox" value="sub_frame" checked> iframe</label>
          </div>
        </div>

        <button id="addNetworkBtn" class="btn btn-primary">추가</button>
      </div>

      <!-- 저장된 규칙 목록 -->
      <div class="rules-section">
        <h2>Network Rules</h2>
        <div id="networkRulesList" class="rules-list">
          <p class="empty-message">저장된 규칙이 없습니다.</p>
        </div>
      </div>
    </div>

    <!-- 요소 제거 탭 -->
    <div id="domTab" class="tab-content">
      <!-- 규칙 추가 폼 -->
      <div class="add-rule-section">
        <div class="form-group">
          <label>셀렉터 타입:</label>
          <select id="selectorType">
            <option value="css">CSS Selector</option>
            <option value="xpath">XPath</option>
          </select>
        </div>

        <div class="form-group">
          <label>셀렉터:</label>
          <div class="input-group">
            <input type="text" id="selectorInput" placeholder="예: #logo 또는 //*[@id='logo']">
            <button id="pickerBtn" class="btn btn-picker" title="요소 선택하기">🎯</button>
          </div>
        </div>

        <div class="form-group">
          <label>주입 방식:</label>
          <select id="domInjectionType">
            <option value="pre">사전주입 (깜빡임 없음)</option>
            <option value="dynamic">동적주입 (동적 콘텐츠 대응)</option>
          </select>
        </div>

        <button id="addBtn" class="btn btn-primary">추가</button>
      </div>

      <!-- 저장된 규칙 목록 -->
      <div class="rules-section">
        <h2>DOM Rules</h2>
        <div id="rulesList" class="rules-list">
          <p class="empty-message">저장된 규칙이 없습니다.</p>
        </div>
      </div>
    </div>

    <!-- 스타일 탭 -->
    <div id="styleTab" class="tab-content">
      <!-- 규칙 추가 폼 -->
      <div class="add-rule-section">
        <div class="form-group">
          <label>셀렉터 타입:</label>
          <select id="styleSelectorType">
            <option value="css">CSS Selector</option>
            <option value="xpath">XPath</option>
          </select>
        </div>

        <div class="form-group">
          <label>셀렉터:</label>
          <div class="input-group">
            <input type="text" id="styleSelectorInput" placeholder="예: #logo 또는 //*[@id='logo']">
            <button id="stylePickerBtn" class="btn btn-picker" title="요소 선택하기">🎯</button>
          </div>
        </div>

        <div class="form-group">
          <label>스타일:</label>
          <input type="text" id="styleInput" placeholder="예: opacity: 0.5; filter: blur(3px);"/>
          <small class="hint">인라인 스타일을 입력하세요 (CSS 속성:값; 형식)</small>
        </div>

        <div class="form-group">
          <label>주입 방식:</label>
          <select id="styleInjectionType">
            <option value="pre">사전주입 (깜빡임 없음)</option>
            <option value="dynamic">동적주입 (동적 콘텐츠 대응)</option>
          </select>
        </div>

        <button id="addStyleBtn" class="btn btn-primary">추가</button>
      </div>

      <!-- 저장된 규칙 목록 -->
      <div class="rules-section">
        <h2>Style Rules</h2>
        <div id="styleRulesList" class="rules-list">
          <p class="empty-message">저장된 규칙이 없습니다.</p>
        </div>
      </div>
    </div>
  </div>
  <script src="popup.js"></script>
</body>
</html>