Skip to content

Commit d368fbf

Browse files
ADSR1042ADSR1042
committed
update:更新插件选项等
1 parent b7186ee commit d368fbf

12 files changed

+577
-88
lines changed

‎background.html ‎html/background.html

File renamed without changes.

‎newtab.html ‎html/newtab.html

File renamed without changes.

‎html/options.html

+234
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
<html>
2+
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Lazuli 设置</title>
6+
<meta name="viewport" content="width=device-width,initial-scale=1">
7+
<style>
8+
.radio {
9+
position: relative;
10+
width: 20.8px;
11+
height: 20.8px;
12+
background-clip: border-box;
13+
-webkit-appearance: none;
14+
-moz-appearance: none;
15+
appearance: none;
16+
margin: -.15px .6px 0 0;
17+
vertical-align: text-bottom;
18+
border-radius: 50%;
19+
background-color: #fff;
20+
border: 1.3px solid #d7d7d7
21+
}
22+
23+
.radio:before {
24+
content: '';
25+
display: block;
26+
height: 0;
27+
width: 0;
28+
-webkit-transition: width .25s, height .25s;
29+
transition: width .25s, height .25s
30+
}
31+
32+
.radio:disabled {
33+
opacity: .65
34+
}
35+
36+
.radio:checked {
37+
border: 1.3px solid #4a8cf7;
38+
background-color: #fff
39+
}
40+
41+
.radio:checked:before {
42+
height: 10.4px;
43+
width: 10.4px;
44+
border-radius: 50%;
45+
margin: 3.9px 0 0 3.9px;
46+
background-color: #4a8cf7
47+
}
48+
49+
.radio:focus {
50+
outline: none;
51+
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.075), 0 0 2px #38a7ff
52+
}
53+
54+
55+
56+
.switch {
57+
-webkit-appearance: none;
58+
-moz-appearance: none;
59+
appearance: none;
60+
position: relative;
61+
width: 41px;
62+
height: 24px;
63+
border: 1px solid #dfdfdf;
64+
outline: 0;
65+
border-radius: 16px;
66+
box-sizing: border-box;
67+
background: #dfdfdf
68+
}
69+
70+
.switch:before,
71+
.switch:after {
72+
content: " ";
73+
position: absolute;
74+
top: 0;
75+
left: 0;
76+
border-radius: 15px;
77+
-webkit-transition: -webkit-transform .3s;
78+
transition: -webkit-transform .3s;
79+
transition: transform .3s;
80+
transition: transform .3s, -webkit-transform .3s
81+
}
82+
83+
.switch:before {
84+
width: 39px;
85+
height: 22px;
86+
background-color: #d3d3d3
87+
}
88+
89+
.switch:after {
90+
width: 22px;
91+
height: 22px;
92+
background-color: #fff;
93+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
94+
}
95+
96+
.switch:checked {
97+
border-color: #4a8cf7;
98+
background-color: #4a8cf7
99+
}
100+
101+
.switch:checked:before {
102+
-webkit-transform: scale(0);
103+
transform: scale(0)
104+
}
105+
106+
.switch:checked:after {
107+
-webkit-transform: translateX(17px);
108+
transform: translateX(17px)
109+
}
110+
111+
.switch:checked:focus {
112+
outline: 0
113+
}
114+
115+
.switch:disabled {
116+
opacity: .65
117+
}
118+
119+
html,
120+
body {
121+
width: 100%;
122+
padding: 0;
123+
margin: 0;
124+
background-color: #eee
125+
}
126+
127+
#option {
128+
padding: 0 10%;
129+
margin: auto;
130+
max-width: 840px;
131+
margin: 0 auto;
132+
box-shadow: 0 0 50px #c8c8c8;
133+
background-color: #fff
134+
}
135+
136+
header {
137+
width: 100%;
138+
height: 25%;
139+
padding: 5% 0;
140+
font-size: 64px;
141+
font-weight: bold;
142+
color: #4a8cf7;
143+
display: flex;
144+
align-items: center
145+
}
146+
147+
.row {
148+
display: flex;
149+
align-items: center;
150+
justify-content: space-between;
151+
line-height: 4em;
152+
margin: 3% 5%;
153+
flex: 1 1
154+
}
155+
156+
.column {
157+
display: flex;
158+
align-items: center;
159+
min-width: 30%;
160+
max-width: 70%
161+
}
162+
163+
.setting-title {
164+
font-size: large;
165+
font-weight: bold
166+
}
167+
168+
.space {
169+
display: inline-block;
170+
width: 5px
171+
}
172+
173+
footer {
174+
padding: 5% 0;
175+
text-align: center;
176+
font-size: medium
177+
}
178+
</style>
179+
</head>
180+
181+
<body>
182+
<div id="option">
183+
<header>
184+
<img src="../icon.png">
185+
<span class="space"></span>
186+
<span class="space"></span>
187+
Lazuli 设置
188+
</header>
189+
<div class="content">
190+
<label for="general-settings" class="setting-title" >通用设置</label>
191+
<div id="other-settings">
192+
<div class="row">
193+
<div class="column">
194+
<input type="checkbox"
195+
class="switch" id="enable-data-expiration-reminders">
196+
<span class="space"></span>
197+
<label for="select-translate" class="checked-label">启用查老师数据过期更新提醒</label>
198+
</div>
199+
</div>
200+
<!-- <div class="row">
201+
<div class="column">
202+
<input type="checkbox"
203+
class="switch" id="enable-lesson-list-auto-scroll">
204+
<span class="space"></span>
205+
<label for="select-translate" class="checked-label">启用课程列表自动翻页</label>
206+
</div>
207+
</div> -->
208+
<!-- <div class="row">
209+
<div class="column">
210+
<input type="checkbox" setting-type="switch" setting-path="OtherSettings UsePDFjs"
211+
class="switch" id="use-pdf-js">
212+
<span class="space"></span>
213+
<label for="use-pdf-js" class="checked-label">使用内置的pdf查看器</label>
214+
</div>
215+
</div> -->
216+
</div>
217+
</div>
218+
<footer>
219+
©2024
220+
<a href="" target="_blank">
221+
Lazuli
222+
</a>
223+
<span class="space"></span>
224+
By
225+
<a href="https://blog.adsr.me" target="_blank"> ADSR </a>
226+
</footer>
227+
</div>
228+
229+
230+
<script src="../js/options.js"></script>
231+
232+
</body>
233+
234+
</html>

‎html/popup.html

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>插件Popup页面</title>
8+
<style>
9+
body {
10+
font-family: Arial, sans-serif;
11+
background-color: #f4f4f4;
12+
margin: 0;
13+
padding: 20px;
14+
}
15+
16+
.container {
17+
min-width: 300px;
18+
margin: 0 auto;
19+
background-color: #fff;
20+
border-radius: 8px;
21+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
22+
padding: 20px;
23+
}
24+
25+
h1 {
26+
text-align: center;
27+
margin-bottom: 20px;
28+
}
29+
30+
.update-time {
31+
text-align: center;
32+
margin-bottom: 20px;
33+
}
34+
35+
.last-update-link {
36+
text-align: center;
37+
margin-bottom: 20px;
38+
}
39+
40+
/* .setting-link {
41+
display: block;
42+
text-align: center;
43+
color: #007bff;
44+
text-decoration: none;
45+
margin-top: 10px;
46+
} */
47+
48+
.setting-link {
49+
display: block;
50+
text-align: center;
51+
color: #fff;
52+
background-color: #007bff;
53+
text-decoration: none;
54+
margin-top: 10px;
55+
padding: 10px 20px;
56+
border-radius: 5px;
57+
transition: background-color 0.3s ease;
58+
}
59+
60+
.setting-link:hover {
61+
background-color: #0056b3;
62+
}
63+
64+
.footer-links {
65+
margin-top: 30px;
66+
text-align: center;
67+
display: flex;
68+
display: flex;
69+
justify-content: space-evenly;
70+
}
71+
72+
.footer-links a {
73+
display: block;
74+
margin-bottom: 10px;
75+
color: #007bff;
76+
text-decoration: none;
77+
}
78+
</style>
79+
</head>
80+
81+
<body>
82+
<div class="container">
83+
<h1>Lazuli</h1>
84+
<p class="update-time">查老师数据更新时间：2024-02-17 12:00 PM</p>
85+
<p class="last-update-link"><a href="https://chalaoshi.de" target="_blank">点此访问查老师以更新数据</a></p>
86+
<a id="popup-setting" href="" class="setting-link">进入设置</a>
87+
<div class="footer-links">
88+
<a href="#">关于项目</a>
89+
<a href="#">意见反馈</a>
90+
<a href="#">使用帮助</a>
91+
</div>
92+
</div>
93+
</body>
94+
<script type="text/javascript" src="../js/popup.js"></script>
95+
96+
</html>

‎icon.png

-5.48 KB
Loading

‎js/background.js

+19-6
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,42 @@
1-
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
2-
{
1+
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
32
let data = request.data;
4-
showDataOnPage(data.title,data.message,data.closeTime);
3+
showDataOnPage(data.title, data.message, data.closeTime, data.url);
54
sendResponse('已执行弹窗');
65

76
});
87

98

109
//将data数据以桌面通知的方式显示给用户
11-
function showDataOnPage(title,data,closeTime=3000) {
10+
function showDataOnPage(title, data, closeTime = 3000, url = "") {
1211

1312

1413
//显示一个桌面通知
1514
if (chrome.notifications) {
16-
var opt = {
15+
let opt = {
1716
type: 'basic',
1817
title: title,
1918
message: data,
2019
iconUrl: chrome.runtime.getURL('icon.png'),
2120
}
2221
chrome.notifications.create('', opt, function (id) {
22+
23+
//点击通知后的回调
24+
chrome.notifications.onClicked.addListener(function (id) {
25+
console.log("click notification", url);
26+
if (url !== '' && url !== null && url !== undefined) {
27+
console.log("open url", url);
28+
chrome.tabs.create({ url: url });
29+
}
30+
//卸载listener
31+
chrome.notifications.onClicked.removeListener();
32+
chrome.notifications.clear(id, function () { });
33+
});
34+
2335
setTimeout(function () {
2436
chrome.notifications.clear(id, function () { });
2537
}, closeTime);
26-
});
38+
}
39+
);
2740

2841
} else {
2942
console.error("chrome.notifications is not available");

0 commit comments

Comments
 (0)