Skip to content

Commit 81bbe31

Browse files
ZhUyU1997ZhUyU1997
committed
v1.2.0
1 parent 5fddaff commit 81bbe31

File tree

13 files changed

+582
-215
lines changed

13 files changed

+582
-215
lines changed

‎entrypoints/background.ts

Lines changed: 70 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,10 @@ import {
55
SiteModeStorage,
66
onMessage,
77
} from "./common/messaging";
8-
import { LemmaData } from "./common/define";
98
import { logger } from "./common/logger";
109
import { IsSupported } from "./common/utils";
10+
import { safeStorage } from "./common/storage";
11+
import { DEFAULT_HIGHLIGHT_STYLE } from "./common/style";
1112

1213
async function loadJsonFile(path: PublicPath) {
1314
const file_path = browser.runtime.getURL(path);
@@ -62,33 +63,36 @@ class BGHelper {
6263
}
6364
}
6465
static loadSiteMode() {
65-
return storage.getItem<SiteModeStorage>("local:site-mode").then((data) => {
66-
if (!data) storage.setItem<SiteModeStorage>("local:site-mode", {});
66+
return safeStorage.getItem("local:site-mode").then((data) => {
67+
if (!data) safeStorage.setItem("local:site-mode", {});
6768
BGHelper.siteModeRecord = data ?? {};
6869
});
6970
}
7071

7172
static async loadMode() {
72-
const mode = await storage.getItem<GlobalMode>("local:mode");
73-
if (!mode) storage.setItem<GlobalMode>("local:mode", "enable");
73+
const mode = await safeStorage.getItem("local:mode");
74+
if (!mode) safeStorage.setItem("local:mode", "enable");
7475

75-
storage.watch<GlobalMode>("local:mode", (newValue) => {
76+
safeStorage.watch("local:mode", (newValue) => {
7677
BGHelper.mode = newValue ?? "enable";
7778
});
7879
BGHelper.mode = mode ?? "enable";
7980
}
8081
static syncSiteModeToStorage() {
81-
return storage.setItem<SiteModeStorage>(
82-
"local:site-mode",
83-
BGHelper.siteModeRecord
84-
);
82+
return safeStorage.setItem("local:site-mode", BGHelper.siteModeRecord);
8583
}
8684

8785
static async load() {
88-
const precent = await storage.getItem<number>("local:percent");
89-
if (!precent) storage.setItem<number>("local:percent", 30);
90-
const ignore = storage.getItem<string[]>("local:ignore-word");
91-
if (!ignore) storage.setItem<string[]>("local:ignore-word", []);
86+
const precent = await safeStorage.getItem("local:percent");
87+
if (!precent) safeStorage.setItem("local:percent", 30);
88+
const ignore = await safeStorage.getItem("local:ignore-word");
89+
if (!ignore) safeStorage.setItem("local:ignore-word", []);
90+
91+
const preference = await safeStorage.getItem("local:preference");
92+
if (!preference)
93+
safeStorage.setItem("local:preference", {
94+
highlight: DEFAULT_HIGHLIGHT_STYLE,
95+
});
9296

9397
await BGHelper.loadSiteMode();
9498
await BGHelper.loadMode();
@@ -100,10 +104,10 @@ export default defineBackground(async () => {
100104
logger.log("Hello background!", { id: browser.runtime.id });
101105
browser.runtime.onInstalled.addListener(() => {
102106
loadRankFile().then((data) => {
103-
storage.setItem<string[]>("local:rank", data);
107+
safeStorage.setItem("local:rank", data);
104108
});
105109
loadLemmaFile().then((data) => {
106-
storage.setItem<LemmaData>("local:lemma", data);
110+
safeStorage.setItem("local:lemma", data);
107111
});
108112
});
109113

@@ -134,4 +138,54 @@ export default defineBackground(async () => {
134138
const mode = BGHelper.mode;
135139
return IsSupported(mode, siteMode);
136140
});
141+
onMessage("replaceCSS", async (message) => {
142+
const { old, css } = message.data;
143+
logger.log("injectCSS", css);
144+
const tabId = message.sender?.tab?.id;
145+
146+
if (tabId) {
147+
await browser.scripting.removeCSS({
148+
css: old,
149+
target: {
150+
allFrames: true,
151+
tabId,
152+
},
153+
});
154+
browser.scripting.insertCSS({
155+
css,
156+
target: {
157+
allFrames: true,
158+
tabId,
159+
},
160+
});
161+
}
162+
});
163+
onMessage("injectCSS", (message) => {
164+
const { css } = message.data;
165+
logger.log("injectCSS", css);
166+
const tabId = message.sender?.tab?.id;
167+
168+
if (tabId)
169+
browser.scripting.insertCSS({
170+
css,
171+
target: {
172+
allFrames: true,
173+
tabId,
174+
},
175+
});
176+
});
177+
onMessage("removeCSS", (message) => {
178+
const { css } = message.data;
179+
logger.log("removeCSS", css);
180+
const tabId = message.sender?.tab?.id;
181+
182+
if (tabId)
183+
browser.scripting.removeCSS({
184+
css,
185+
target: {
186+
allFrames: true,
187+
tabId,
188+
},
189+
});
190+
});
137191
});

‎entrypoints/common/messaging.ts

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,22 @@ export type GlobalMode = "enable" | "disable" | "forbidden";
44

55
export type SitMode = "follow" | "exclude" | "include";
66

7-
export type SiteModeStorage = Record<string, SitMode>
7+
export type SiteModeStorage = Record<string, SitMode>;
88
interface ProtocolMap {
9-
changeSetting({ enable }: { enable: boolean }): void;
10-
notifyBackground({ url, hidden }: { url: string; hidden: boolean }): void;
11-
translation({ words }: { words: string[] }): Record<string, string>;
9+
changeSetting(data: { enable: boolean }): void;
10+
notifyBackground(data: { url: string; hidden: boolean }): void;
11+
translation(data: { words: string[] }): Record<string, string>;
1212
getGlobalMode(): GlobalMode;
1313
// setGlobalMode(mode: GlobalMode): void;
1414
getSiteMode(hostName: string): SitMode;
15-
setSiteMode({ hostName, mode }: { hostName: string; mode: SitMode }): void;
16-
notifySiteModeChanged(mode: SitMode) : void
15+
setSiteMode(data: { hostName: string; mode: SitMode }): void;
16+
notifySiteModeChanged(mode: SitMode): void;
1717

1818
isSupported(hostName: string): boolean;
19+
replaceCSS(data: { old:string, css: string }): void;
20+
21+
injectCSS(data: { css: string }): void;
22+
removeCSS(data: { css: string }): void;
1923
}
2024

2125
export const { sendMessage, onMessage } =

‎entrypoints/common/storage.ts

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { GetItemOptions, Unwatch, WatchCallback } from "wxt/storage";
2+
import { LemmaData } from "./define";
3+
import { GlobalMode, SitMode } from "./messaging";
4+
5+
export interface Preference {
6+
highlight: string;
7+
}
8+
9+
interface StorageMap {
10+
"local:percent": number;
11+
"local:rank": string[];
12+
"local:lemma": LemmaData;
13+
"local:ignore-word": string[];
14+
"local:site-mode": Record<string, SitMode>;
15+
"local:mode": GlobalMode;
16+
"local:preference": Preference;
17+
}
18+
19+
export interface GenericStorage<TStorageMap extends Record<string, any>> {
20+
getItem<K extends Extract<keyof TStorageMap, string>>(
21+
key: K,
22+
opts?: GetItemOptions<TStorageMap[K]>
23+
): Promise<TStorageMap[K] | null>;
24+
setItem<K extends Extract<keyof TStorageMap, string>>(
25+
key: K,
26+
value: TStorageMap[K] | null
27+
): Promise<void>;
28+
watch<K extends Extract<keyof TStorageMap, string>>(
29+
key: K,
30+
cb: WatchCallback<TStorageMap[K] | null>
31+
): Unwatch;
32+
unwatch(): void;
33+
}
34+
35+
declare type ExtensionMessenger<TStorageMap extends Record<string, any>> =
36+
GenericStorage<TStorageMap>;
37+
38+
function defineExtensionStorage<
39+
TStorageMap extends Record<string, any> = Record<string, any>
40+
>(): ExtensionMessenger<TStorageMap> {
41+
return storage;
42+
}
43+
44+
export const safeStorage = defineExtensionStorage<StorageMap>();

‎entrypoints/common/style.ts

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
const Template = (css: string) =>
2+
`.insight-word-enable insight-word.insight-word-highlight {
3+
/* 修改下面样式 */
4+
${css
5+
.split("\n")
6+
.filter((i) => i.trim() !== "")
7+
.map((i) => " " + i.trim())
8+
.join("\n")}
9+
/* 结束 */
10+
}`;
11+
12+
export const PRESET_HIGHLIGHT_STYLE = [
13+
Template(`
14+
text-shadow: 0 0 5px #ade30b, 0 0 5px #ade30b
15+
`),
16+
Template(`
17+
text-decoration: rgba(10, 163, 205, 0.491) wavy underline;
18+
`),
19+
Template(`
20+
background-color: rgba(10, 163, 205, 0.491);
21+
`),
22+
Template(`
23+
filter: drop-shadow(0 0 3px #ade30b) drop-shadow(0 0 3px #ade30b);
24+
`),
25+
];
26+
export const DEFAULT_HIGHLIGHT_STYLE = PRESET_HIGHLIGHT_STYLE[0];

‎entrypoints/content.ts

Lines changed: 35 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,24 @@
11
import "./index.less";
2-
import { GlobalMode, SitMode, onMessage } from "./common/messaging";
2+
import {
3+
GlobalMode,
4+
SitMode,
5+
onMessage,
6+
sendMessage,
7+
} from "./common/messaging";
38
import { Unwatch, WatchCallback } from "wxt/storage";
49
import { logger } from "./common/logger";
510
import Render from "./page/render";
611
import { Helper } from "./page/helper";
712
import { Setting } from "./page/setting";
813
import { Highlight } from "./page/highlight";
14+
import { Preference, safeStorage } from "./common/storage";
915

1016
export default defineContentScript({
1117
matches: ["*://*/*"],
1218
allFrames: true,
1319
runAt: "document_idle",
1420

15-
async main(ctx) {
21+
async main(ctx: any) {
1622
logger.log("Hello content.");
1723
const support = await Setting.isSupported();
1824
if (!support) {
@@ -22,7 +28,7 @@ export default defineContentScript({
2228

2329
await Setting.load();
2430
const mode = Setting.mode;
25-
const percent = await storage.getItem<number>("local:percent");
31+
const percent = await safeStorage.getItem("local:percent");
2632
logger.log("local:mode", mode);
2733
logger.log("local:percent", percent);
2834

@@ -75,11 +81,24 @@ export default defineContentScript({
7581
if (newValue) Helper.updataIgnore(newValue);
7682
Highlight.updateStyleByIgnore();
7783
};
84+
85+
const watchCbPreference: WatchCallback<Preference | null> = (
86+
newValue,
87+
oldValue
88+
) => {
89+
logger.log("watch local:preference", newValue);
90+
if (newValue) {
91+
const old = Setting.preference.highlight;
92+
Setting.preference = newValue;
93+
sendMessage("replaceCSS", { old, css: Setting.preference.highlight });
94+
}
95+
};
7896
const syncSetting = async () => {
7997
const siteMode = await Setting.getSiteModeFromBG();
80-
const mode = await storage.getItem<GlobalMode>("local:mode");
81-
const percent = await storage.getItem<number>("local:percent");
82-
const ignoreWord = await storage.getItem<string[]>("local:ignore-word");
98+
const mode = await safeStorage.getItem("local:mode");
99+
const percent = await safeStorage.getItem("local:percent");
100+
const ignoreWord = await safeStorage.getItem("local:ignore-word");
101+
const preference = await safeStorage.getItem("local:preference");
83102

84103
if (siteMode !== Setting.siteMode) {
85104
watchCbSiteMode(siteMode, Setting.siteMode);
@@ -95,6 +114,10 @@ export default defineContentScript({
95114
if (ignoreWord?.length !== Helper.ignoreSet.size) {
96115
watchCbIgnoreWord(ignoreWord, []);
97116
}
117+
118+
if (preference?.highlight !== Setting.preference.highlight) {
119+
watchCbPreference(preference, Setting.preference);
120+
}
98121
};
99122

100123
let unwatchList: Unwatch[] = [];
@@ -115,10 +138,13 @@ export default defineContentScript({
115138
watchCbSiteMode(siteMode, Setting.siteMode);
116139
})
117140
);
118-
unwatchList.push(storage.watch<GlobalMode>("local:mode", watchCbMode));
119-
unwatchList.push(storage.watch<number>("local:percent", watchCbFilter));
141+
unwatchList.push(safeStorage.watch("local:mode", watchCbMode));
142+
unwatchList.push(safeStorage.watch("local:percent", watchCbFilter));
143+
unwatchList.push(
144+
safeStorage.watch("local:ignore-word", watchCbIgnoreWord)
145+
);
120146
unwatchList.push(
121-
storage.watch<string[]>("local:ignore-word", watchCbIgnoreWord)
147+
safeStorage.watch("local:preference", watchCbPreference)
122148
);
123149
};
124150

‎entrypoints/index.less

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,7 @@
11
.insight-word-enable {
2-
insight-word.insight-word-highlight {
3-
display: inline;
4-
position: relative;
5-
text-decoration: rgba(10, 163, 205, 0.491) wavy underline;
6-
}
7-
8-
code insight-word.insight-word-highlight {
9-
text-decoration: inherit;
10-
}
11-
12-
pre insight-word.insight-word-highlight {
13-
text-decoration: inherit;
14-
}
15-
2+
code insight-word.insight-word-highlight,
3+
pre insight-word.insight-word-highlight,
164
insight-word.insight-word-ignore {
17-
text-decoration: inherit;
5+
all: inherit;
186
}
197
}

‎entrypoints/page/setting.ts

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
import { logger } from "../common/logger";
22
import { GlobalMode, SitMode, sendMessage } from "../common/messaging";
3+
import { Preference, safeStorage } from "../common/storage";
4+
import { DEFAULT_HIGHLIGHT_STYLE } from "../common/style";
35
import { IsSupported } from "../common/utils";
46

57
export class Setting {
68
static mode: GlobalMode = "enable";
79
static siteMode: SitMode = "follow";
810
static enable = true;
9-
1011
static filterPercent = 30;
12+
static preference: Preference = {
13+
highlight: DEFAULT_HIGHLIGHT_STYLE,
14+
};
1115
static setEnable(value: GlobalMode) {
1216
Setting.mode = value;
1317
}
@@ -44,10 +48,16 @@ export class Setting {
4448
}
4549

4650
static async load() {
47-
const mode = await storage.getItem<GlobalMode>("local:mode");
48-
Setting.mode = mode ?? "enable";
51+
const mode = await safeStorage.getItem("local:mode");
52+
Setting.mode = mode ?? Setting.mode;
4953
const siteMode = await Setting.getSiteModeFromBG();
50-
Setting.siteMode = siteMode ?? "follow";
51-
await Setting.checkEnable();
54+
Setting.siteMode = siteMode ?? Setting.siteMode;
55+
const preference = await safeStorage.getItem("local:preference");
56+
Setting.preference = preference ?? Setting.preference;
57+
if (await Setting.checkEnable()) {
58+
sendMessage("injectCSS", {
59+
css: Setting.preference.highlight,
60+
});
61+
}
5262
}
5363
}

‎entrypoints/popup/App.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
#root {
2-
min-width: 300px;
2+
min-width: 320px;
33
max-width: 1280px;
4+
max-height: 600px;
45
margin: 0 auto;
5-
padding: 1rem;
66
text-align: center;
77
}
88

0 commit comments

Comments
 (0)