Skip to content

Commit ab764fa

Browse files
greycodeegreycodee
committed
可选择主题
1 parent 34c367f commit ab764fa

File tree

5 files changed

+80
-51
lines changed

5 files changed

+80
-51
lines changed

‎manifest.json‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,7 @@
2020

2121
"128": "images/flomo128.png"
2222
},
23-
"content_scripts": [
24-
{
25-
"matches": ["https://v.flomoapp.com/*","https://flomoapp.com/*"],
26-
"js": ["content.js","include/highlight.min.js"]
2723

28-
}
29-
],
3024
"web_accessible_resources": [
3125
{
3226
"resources": ["images/*"],

‎popup/popup.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@
77
<style></style>
88
</head>
99
<body>
10-
<h1>Popup</h1>
10+
<h3>Choose Theme</h3>
1111

12-
<label for="lang">Theme</label>
13-
<select name="languages" id="lang">
14-
<option value="stackoverflow-light">stackoverflow-light</option>
15-
<option value="stackoverflow-dark">stackoverflow-dark</option>
12+
<label for="theme">Theme</label>
13+
<select name="themes" id="theme">
14+
<option value="stackoverflow-light.css">stackoverflow-light</option>
15+
<option value="stackoverflow-dark.css">stackoverflow-dark</option>
1616
</select>
1717

1818
<script src="popup.js"></script>

‎popup/popup.js‎

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,18 @@
1-
// 获取选择的语言
2-
const lang = document.querySelector('#lang');
3-
// 保存选择的语言
4-
lang.addEventListener('change', (e) => {
5-
console.log(e.target.value);
6-
// 获取选择的语言
7-
const language = e.target.value;
8-
// 保存选择的语言
9-
chrome.storage.sync.set({language}, () => {
10-
console.log('保存成功');
11-
// chrome.scripting.insertCSS({
12-
// files: ['include/theme/stackoverflow-light.css']
13-
// });
14-
});
15-
});
1+
// 获取选择的语言
2+
const theme = document.querySelector("#theme");
3+
// 保存选择的语言
4+
theme.addEventListener("change", (e) => {
5+
console.log(e.target.value);
6+
// 获取选择的语言
7+
const chooseTheme = e.target.value;
8+
// 保存选择的语言
9+
chrome.storage.sync.set({ chooseTheme }, () => {
10+
console.log("保存成功");
11+
});
12+
});
1613

17-
// 获取保存的语言
18-
chrome.storage.sync.get(['language'], (result) => {
19-
// 设置选择的语言
20-
lang.value = result.language;
21-
});
14+
// 获取保存的语言
15+
chrome.storage.sync.get(["chooseTheme"], (result) => {
16+
// 设置选择的语言
17+
theme.value = result.chooseTheme;
18+
});

content.js renamed to scripts/content.js

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ window.onload = function () {
1717
hljsbtn.style.color = "#fff";
1818
hljsbtn.style.cursor = "pointer";
1919
hljsbtn.style.position = "fixed";
20-
hljsbtn.style.bottom = "60px";
20+
hljsbtn.style.bottom = "80px";
2121
hljsbtn.style.right = "30px";
2222
hljsbtn.style.zIndex = "9999";
2323
hljsbtn.style.display = "flex";
@@ -72,14 +72,5 @@ window.onload = function () {
7272
});
7373
document.body.appendChild(hljsbtn);
7474

75-
chrome.scripting.insertCSS({
76-
target: {
77-
tabId: tab.id,
78-
},
79-
files: ['include/theme/stackoverflow-light.css']
80-
}).then(()=>{
81-
console.log("insert css success");
82-
}).catch((err)=>{
83-
console.log("insert css error",err);
84-
});
75+
8576
};

‎service-worker.js‎

Lines changed: 56 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,58 @@
1-
chrome.storage.onChanged.addListener((changes,areaName) => {
2-
console.log("storage change",changes,areaName);
3-
}
4-
)
1+
chrome.storage.onChanged.addListener((changes, areaName) => {
2+
if (changes.chooseTheme.oldValue) {
3+
chrome.scripting.unregisterContentScripts({
4+
ids: [changes.chooseTheme.oldValue],
5+
});
6+
}
7+
8+
if (changes.chooseTheme.newValue) {
9+
const new_flomo_theme = {
10+
id: changes.chooseTheme.newValue,
11+
matches: ["https://v.flomoapp.com/*", "https://flomoapp.com/*"],
12+
css: ["include/theme/" + changes.chooseTheme.newValue],
13+
runAt: "document_end",
14+
};
15+
chrome.scripting.registerContentScripts([new_flomo_theme]);
16+
17+
// 使新的css生效
18+
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
19+
// 注入新的内容脚本,如果当前页面是chrome:// 则不注入
20+
if (tabs[0].url.indexOf("chrome://") > -1) {
21+
return;
22+
}
23+
console.log("注入新的css" + tabs[0].id);
24+
chrome.scripting.insertCSS({
25+
target: {
26+
tabId: tabs[0].id,
27+
},
28+
files: ["include/theme/" + changes.chooseTheme.newValue],
29+
});
30+
});
31+
}
32+
});
533

6-
chrome.tabs.onCreated.addListener(
7-
(tab)=>{
8-
console.log("tab created",tab);
9-
34+
const DEFAULT_THEME = "stackoverflow-dark.css";
35+
chrome.runtime.onInstalled.addListener(() => {
36+
chrome.storage.sync.set({ chooseTheme: DEFAULT_THEME }, () => {
37+
console.log("保存成功");
38+
});
39+
});
40+
41+
function getTheme() {
42+
// 获取当前主题
43+
chrome.storage.sync.get("chooseTheme", (result) => {
44+
if (result.chooseTheme) {
45+
console.log("当前主题为", result.chooseTheme);
46+
DEFAULT_THEME = result.chooseTheme;
1047
}
11-
)
48+
});
49+
return DEFAULT_THEME;
50+
}
51+
52+
const flomo_content_script = {
53+
id: "flomo_content_script",
54+
matches: ["https://v.flomoapp.com/*", "https://flomoapp.com/*"],
55+
js: ["scripts/content.js", "include/highlight.min.js"],
56+
runAt: "document_end",
57+
};
58+
chrome.scripting.registerContentScripts([flomo_content_script]);

0 commit comments

Comments
 (0)