Emoji favicons for the web
sync settings with chrome storage
+45
-39
-5
bundler.ts
-5
bundler.ts
···
27
27
color: '\x1b[91m',
28
28
overrides: {
29
29
manifest_version: 2,
30
-
// @todo this is not elegant
31
-
background: {
32
-
scripts: ['background.js'],
33
-
},
34
30
},
35
31
omits: ['options_page'],
36
32
},
···
71
67
console.log(`Initializing ${colorizedBrowserName} build...`);
72
68
73
69
await Promise.all([
74
-
loadFile(browserId, 'background.ts'),
75
70
loadFile(browserId, 'options.tsx'),
76
71
loadFile(browserId, 'contentScript.ts'),
77
72
loadFile(browserId, 'popup.tsx'),
-9
source/background.ts
-9
source/background.ts
+2
-3
source/components/Checkbox.tsx
+2
-3
source/components/Checkbox.tsx
···
4
4
import { useCallback, useState } from 'preact/hooks';
5
5
6
6
export type Target = { [name: string]: boolean };
7
+
export type CheckboxOnChange = (target: Target) => void;
7
8
8
9
export interface CheckboxProps {
9
10
name: string;
10
11
checked?: boolean;
11
12
label: string;
12
-
13
-
// deno-lint-ignore no-explicit-any
14
-
onChange?: (...args: any[]) => void;
13
+
onChange?: CheckboxOnChange;
15
14
}
16
15
17
16
export default function Checkbox({
+1
source/hooks/useBrowserStorage.ts
+1
source/hooks/useBrowserStorage.ts
-3
source/manifest.json
-3
source/manifest.json
+7
-3
source/options.tsx
+7
-3
source/options.tsx
···
20
20
21
21
const App = () => {
22
22
const route = useRoute();
23
-
const storage = useBrowserStorage<Settings>(['siteList', 'ignoreList']);
23
+
const storage = useBrowserStorage<Settings>([
24
+
'siteList',
25
+
'ignoreList',
26
+
'features',
27
+
]);
24
28
const { error = '', loading, saveCacheToStorage } = storage;
25
29
const { status, saveSettings } = useStatus(error || '', saveCacheToStorage);
26
30
···
29
33
saveSettings();
30
34
}, [saveSettings]);
31
35
32
-
if (loading) return <div />;
36
+
if (loading || !storage) return <div />;
33
37
34
38
return (
35
39
<Fragment>
···
39
43
value={route}
40
44
defaultCase={<FaviconsPage save={save} storage={storage} />}
41
45
cases={{
42
-
'#settings': <SettingsPage storage={storage} />,
46
+
'#settings': <SettingsPage save={save} storage={storage} />,
43
47
'#about': <AboutPage />,
44
48
}}
45
49
/>
+2
-1
source/pages/favicons_page.tsx
+2
-1
source/pages/favicons_page.tsx
···
21
21
const {
22
22
siteList = [],
23
23
ignoreList = [],
24
-
enableSiteIgnore,
24
+
features = {},
25
25
} = storage?.cache || defaultSettings;
26
+
const { enableSiteIgnore } = features;
26
27
const siteListState = useListState(siteList);
27
28
const ignoreListState = useListState(ignoreList);
28
29
+22
-8
source/pages/settings_page.tsx
+22
-8
source/pages/settings_page.tsx
···
2
2
import type { BrowserStorage } from '../hooks/useBrowserStorage.ts';
3
3
4
4
import { Fragment, h } from 'preact';
5
+
import { useCallback } from 'preact/hooks';
5
6
6
7
import { defaultSettings, Settings } from '../types.ts';
7
-
import Checkbox from '../components/Checkbox.tsx';
8
+
import Checkbox, { Target } from '../components/Checkbox.tsx';
8
9
import { t } from '../utilities/i18n.ts';
9
10
10
11
export interface SettingsProps {
11
12
default?: boolean;
12
13
path?: string;
14
+
save?: (e: Event) => void;
13
15
storage?: BrowserStorage<Settings>;
14
16
}
15
17
16
-
const SettingsPage = ({ storage }: SettingsProps) => {
18
+
const SettingsPage = ({ save, storage }: SettingsProps) => {
17
19
const { cache = defaultSettings, setCache } = storage || {};
18
20
const {
19
21
enableFaviconActiveFlag,
20
22
enableFaviconAutofill,
21
23
enableSiteIgnore,
22
-
} = cache;
24
+
} = cache.features || {};
25
+
26
+
const setFeature = useCallback((feature: Target) => {
27
+
if (storage) {
28
+
storage.setCache({
29
+
features: {
30
+
...cache.features,
31
+
...feature,
32
+
},
33
+
});
34
+
}
35
+
}, [cache.features]);
23
36
24
37
return (
25
-
<Fragment>
38
+
<form onSubmit={save}>
26
39
<h1>Settings</h1>
27
40
<Checkbox
28
41
name='enableFaviconActiveFlag'
29
42
label={t('enableFaviconActiveFlagLabel')}
30
43
checked={enableFaviconActiveFlag}
31
-
onChange={setCache}
44
+
onChange={setFeature}
32
45
/>
33
46
<Checkbox
34
47
name='enableSiteIgnore'
35
48
label={t('enableSiteIgnoreLabel')}
36
49
checked={enableSiteIgnore}
37
-
onChange={setCache}
50
+
onChange={setFeature}
38
51
/>
39
52
<Checkbox
40
53
name='enableAutofillFavicon'
41
54
label={t('enableAutofillFaviconLabel')}
42
55
checked={enableFaviconAutofill}
43
-
onChange={setCache}
56
+
onChange={setFeature}
44
57
/>
45
-
</Fragment>
58
+
<button type='submit' children={t('saveLabel')} className='save' />
59
+
</form>
46
60
);
47
61
};
48
62
+10
-6
source/types.ts
+10
-6
source/types.ts
···
6
6
siteList: UrlFaviconPair[];
7
7
ignoreList: IgnoreItem[];
8
8
9
-
enableFaviconActiveFlag: boolean;
10
-
enableFaviconAutofill: boolean;
11
-
enableSiteIgnore: boolean;
9
+
features: {
10
+
enableFaviconActiveFlag?: boolean;
11
+
enableFaviconAutofill?: boolean;
12
+
enableSiteIgnore?: boolean;
13
+
};
12
14
}
13
15
14
16
export const defaultSettings: Settings = {
15
17
siteList: [],
16
18
ignoreList: [],
17
19
18
-
enableFaviconActiveFlag: false,
19
-
enableFaviconAutofill: false,
20
-
enableSiteIgnore: false,
20
+
features: {
21
+
enableFaviconActiveFlag: false,
22
+
enableFaviconAutofill: false,
23
+
enableSiteIgnore: false,
24
+
},
21
25
};
+1
-1
source/utilities/i18n.ts
+1
-1
source/utilities/i18n.ts
···
14
14
enableFaviconActiveFlagLabel: 'Enable Icon Replacement',
15
15
enableAutofillFaviconDesc:
16
16
'If a website doesn\'t have a favicon, Favioli will automatically create one for it using an emoji.',
17
-
enableAutofillFaviconLabel: 'Enable Favicon Autofill',
17
+
enableAutofillFaviconLabel: 'Enable Autofill',
18
18
enableAutofillFaviconPopup: broadPermissionsWarning,
19
19
enableSiteIgnoreDesc: 'Select sites that autofill should ignore',
20
20
enableSiteIgnoreLabel: 'Enable Ignore List',