-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathpopup.html
More file actions
188 lines (168 loc) · 8.96 KB
/
popup.html
File metadata and controls
188 lines (168 loc) · 8.96 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Request Sender</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<!-- Added new meta tags for better performance -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Chrome extension to create, manage and send requests easily">
</head>
<body>
<div class="container">
<div class="header">
<h1 data-i18n="appName">Request Sender</h1>
</div>
<div class="tabs">
<button class="tab-btn active" id="requests-tab" data-i18n="myRequests">My Requests</button>
<button class="tab-btn" id="create-tab" data-i18n="createRequest">Create Request</button>
<button class="tab-btn" id="logs-tab" data-i18n="requestLogs">Request Logs</button>
</div>
<div class="tab-content">
<!-- Requests Tab -->
<div class="tab-pane active" id="requests-content">
<div class="requests-list" id="requests-list">
<!-- Requests will be added dynamically via JS -->
<div class="empty-state" id="empty-requests" data-i18n="noRequests">
No requests yet, please click "Create Request" button to add
</div>
</div>
</div>
<!-- Create Request Tab -->
<div class="tab-pane" id="create-content">
<h2 id="form-title" data-i18n="createRequest">Create Request</h2>
<form id="request-form">
<div class="form-group">
<label for="request-name" data-i18n="name">Name</label>
<input type="text" id="request-name" data-i18n-placeholder="name"
placeholder="Enter request name" required>
</div>
<div class="form-group">
<label for="request-url" data-i18n="url">URL</label>
<input type="url" id="request-url" placeholder="https://example.com/request" required>
</div>
<div class="form-group">
<label for="request-method" data-i18n="method">HTTP Method</label>
<select id="request-method">
<option value="GET">GET</option>
<option value="POST" selected>POST</option>
<option value="PUT">PUT</option>
<option value="DELETE">DELETE</option>
<option value="PATCH">PATCH</option>
</select>
</div>
<div class="form-group">
<label for="request-content-type" data-i18n="contentType">Content Type</label>
<select id="request-content-type">
<option value="application/json" selected>JSON</option>
<option value="application/x-www-form-urlencoded">Form URL Encoded</option>
<option value="text/plain">Text</option>
</select>
<div class="field-help content-type-help">
<p id="auto-header-info" class="auto-header-notice"></p>
</div>
</div>
<div class="form-group">
<label for="request-headers" data-i18n="headers">Headers (JSON format)</label>
<textarea id="request-headers" placeholder='{"Authorization": "Bearer token"}'></textarea>
<div class="field-help">
<p data-i18n="headersExample">Please use valid JSON format, e.g.: {"key": "value", "key2":
"value2"}</p>
</div>
</div>
<div class="form-group">
<label for="request-body" data-i18n="body">Request Body</label>
<textarea id="request-body" placeholder='{"key": "value"}'></textarea>
<div class="field-help">
<p data-i18n="bodyJsonHelp">When content type is JSON, please ensure using valid JSON format
</p>
<p data-i18n="bodyExample">Example: {"user": {"name": "John", "age": 30}}</p>
</div>
</div>
<!-- Dynamic Fields Section -->
<div class="form-group">
<label data-i18n="dynamicFields">Dynamic Fields</label>
<div class="dynamic-fields-info">
<p>
<span class="highlight" data-i18n="dynamicFieldsTitle">The system automatically detects placeholders in the following format:</span>
<code>{{fieldName}}</code>
</p>
<p data-i18n="dynamicFieldsDesc">
These placeholders can appear in URL, headers, or request body. You will be prompted to fill in specific values when sending.
</p>
<p data-i18n="dynamicFieldsExampleTitle">Examples:</p>
<code class="example">{"user_id": "{{user_id}}"}</code>
<code class="example">https://api.example.com/users/{{user_id}}</code>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn primary" data-i18n="save">Save</button>
<button type="button" class="btn" id="test-request" data-i18n="test">Test</button>
</div>
</form>
</div>
<!-- Request Logs Tab -->
<div class="tab-pane" id="logs-content">
<div class="log-actions">
<button type="button" class="btn small" id="clear-logs" data-i18n="clearLogs">Clear Logs</button>
</div>
<div class="logs-list" id="logs-list">
<div class="empty-state" id="empty-logs" data-i18n="noLogs">
No request logs yet
</div>
</div>
</div>
</div>
</div>
<!-- Send Request Modal -->
<div class="modal" id="send-modal">
<div class="modal-content">
<span class="close-btn" id="close-modal">×</span>
<h2 data-i18n="fillParameters">Fill Parameter Values</h2>
<p class="modal-description" data-i18n="paramDescription">This request contains parameters that need to be
filled. Please provide values for the following parameters:</p>
<form id="dynamic-form">
<!-- Dynamic fields will be displayed here -->
</form>
<div class="form-actions">
<button type="button" class="btn primary" id="send-with-values" data-i18n="send">Send</button>
<button type="button" class="btn" id="cancel-send" data-i18n="cancel">Cancel</button>
</div>
</div>
</div>
<div class="modal" id="delete-modal">
<div class="modal-content">
<span class="close-btn" id="close-delete-modal">×</span>
<h3 data-i18n="confirmDelete">Are you sure you want to delete this request?</h3>
<div class="modal-actions">
<button type="button" class="btn btn-secondary" id="cancel-delete-btn"
data-i18n="cancel">Cancel</button>
<button type="button" class="btn btn-danger" id="confirm-delete-btn" data-i18n="delete">Delete</button>
</div>
</div>
</div>
<div class="modal" id="clear-logs-modal">
<div class="modal-content">
<span class="close-btn" id="close-clear-logs-modal">×</span>
<h3 data-i18n="confirmClearLogs">Are you sure you want to clear all request logs?</h3>
<div class="modal-actions">
<button type="button" class="btn btn-secondary" id="cancel-clear-logs-btn"
data-i18n="cancel">Cancel</button>
<button type="button" class="btn btn-danger" id="confirm-clear-logs-btn" data-i18n="clearLogs">Clear
Logs</button>
</div>
</div>
</div>
<!-- Modular script loading -->
<!-- I18n modules first -->
<script src="js/modules/i18n.js"></script>
<!-- Core UI modules -->
<script src="js/modules/ui.js"></script>
<script src="js/modules/requestForm.js"></script>
<script src="js/modules/request.js"></script>
<script src="js/modules/logs.js"></script>
<!-- Main application entry point -->
<script src="js/main.js"></script>
</body>
</html>