32 |
33 |
41 |
42 |
43 | );
44 | }
45 |
--------------------------------------------------------------------------------
/source/hooks/use_list_state.ts:
--------------------------------------------------------------------------------
1 | import { useCallback, useEffect, useState } from 'preact/hooks';
2 |
3 | export interface ListState
24 | {contents.map((listItem: Favicon, index: number) => (
25 | {
33 | deleteItem(index);
34 | const firstInput = listRef?.current?.querySelector('input');
35 | if (firstInput) firstInput.focus();
36 | }}
37 | />
38 | )).concat(
39 |
47 | );
48 | }
49 |
--------------------------------------------------------------------------------
/source/utilities/favicon_selector.ts:
--------------------------------------------------------------------------------
1 | import type { Favicon } from '../models/favicon.ts';
2 | import type { Settings } from '../models/settings.ts';
3 | import type Autoselector from './favicon_autoselector.ts';
4 | import { parseRegExp } from './regex_utils.ts';
5 |
6 | /**
7 | * Override Priority
8 | *
9 | * 1. Ignore list (always ignore if ignore list enabled)
10 | * 2. Site list (if matched in site list, user manually added)
11 | * 3. Autofill (if autofill is enabled)
12 | * 4. Ignore (autofill NOT enabled, user hasn't added to sitelist)
13 | */
14 | export default function selectFavicon(
15 | url: string,
16 | settings: Settings,
17 | autoselector?: Autoselector,
18 | ): [Favicon | void, boolean] {
19 | const { ignoreList, siteList, features } = settings;
20 | if (features.enableSiteIgnore && ignoreList.some(listItemMatchesURL(url))) {
21 | return [undefined, false];
22 | }
23 |
24 | const firstMatchingFavicon = siteList.filter(listItemMatchesURL(url))?.[0];
25 | if (firstMatchingFavicon) return [firstMatchingFavicon, true];
26 |
27 | return autoselector && features.enableFaviconAutofill
28 | ? [autoselector.selectFavicon(url), Boolean(features.enableOverrideAll)]
29 | : [undefined, false];
30 | }
31 |
32 | function listItemMatchesURL(url: string): (favicon: Favicon) => boolean {
33 | return (favicon: Favicon): boolean => {
34 | if (!url || !favicon?.matcher) return false;
35 |
36 | const regex = parseRegExp(favicon.matcher);
37 | if (regex) {
38 | return regex.test(url);
39 | }
40 |
41 | return url.toLocaleLowerCase().includes(
42 | favicon.matcher.toLocaleLowerCase(),
43 | );
44 | };
45 | }
46 |
--------------------------------------------------------------------------------
/source/models/settings.ts:
--------------------------------------------------------------------------------
1 | import type { BrowserStorage } from '../hooks/use_browser_storage.ts';
2 | import type { AutoselectorVersion } from '../utilities/favicon_autoselector.ts';
3 |
4 | import { createContext } from 'preact';
5 |
6 | import manifest from '../manifest.json' assert { type: 'json' };
7 | import { AUTOSELECTOR_VERSION } from '../utilities/favicon_autoselector.ts';
8 | import { Favicon } from './favicon.ts';
9 |
10 | export const SETTINGS_KEY = 'settings';
11 |
12 | export interface Settings {
13 | version: string;
14 | autoselectorVersion: AutoselectorVersion;
15 |
16 | siteList: Favicon[];
17 | ignoreList: Favicon[];
18 | frequentlyUsed: Favicon[];
19 | customEmojiIds: string[];
20 |
21 | features: {
22 | enableAutoselectorIncludeCountryFlags: boolean;
23 | enableFaviconAutofill: boolean;
24 | enableSiteIgnore: boolean;
25 | enableOverrideAll: boolean;
26 | enableOverrideIndicator: boolean;
27 | };
28 | }
29 |
30 | export const DEFAULT_SETTINGS: Settings = {
31 | version: manifest.version,
32 | autoselectorVersion: AUTOSELECTOR_VERSION.UNICODE_12,
33 |
34 | siteList: [],
35 | ignoreList: [],
36 | customEmojiIds: [],
37 | frequentlyUsed: [],
38 |
39 | features: {
40 | enableAutoselectorIncludeCountryFlags: false,
41 | enableFaviconAutofill: true,
42 | enableSiteIgnore: false,
43 | enableOverrideAll: false,
44 | enableOverrideIndicator: false,
45 | },
46 | };
47 |
48 | export const SettingsContext = createContext
36 |
49 |
37 |
38 |
47 |
48 | {status}
50 |
27 |
62 | );
63 | }
64 |
--------------------------------------------------------------------------------
/source/models/storage_legacy.ts:
--------------------------------------------------------------------------------
1 | import type { Favicon } from './favicon.ts';
2 | import type { Settings } from './settings.ts';
3 |
4 | import { AUTOSELECTOR_VERSION } from '../utilities/favicon_autoselector.ts';
5 | import { emoji } from './emoji.ts';
6 | import { createFavicon } from './favicon.ts';
7 | import { DEFAULT_SETTINGS } from './settings.ts';
8 |
9 | /**
10 | * Storage from Favioli V1
11 | * Includes tools for migration
12 | */
13 | export interface SettingsV1 {
14 | flagReplaced: boolean;
15 | overrideAll: boolean;
16 | overrides: EmojiV1[];
17 | skips: string[];
18 | }
19 |
20 | export interface EmojiV1 {
21 | emoji: string | {
22 | colons: string;
23 | emoticons: string[];
24 | id: string;
25 | name: string;
26 | native: string;
27 | short_names: string[];
28 | skin: null;
29 | unified: string;
30 | };
31 | filter: string;
32 | }
33 |
34 | export const LEGACY_STORAGE_KEYS = [
35 | 'flagReplaced',
36 | 'overrideAll',
37 | 'overrides',
38 | 'skips',
39 | ];
40 |
41 | export function isSettingsV1(settings: unknown): settings is SettingsV1 {
42 | if (typeof settings !== 'object' || settings == null) return false;
43 | return (
44 | 'flagReplaced' in settings ||
45 | 'overrideAll' in settings ||
46 | 'overrides' in settings ||
47 | 'skips' in settings
48 | );
49 | }
50 |
51 | export function migrateStorageFromV1(legacySettings: SettingsV1): Settings {
52 | const settings = { ...DEFAULT_SETTINGS };
53 |
54 | settings.features = {
55 | enableAutoselectorIncludeCountryFlags: false,
56 | enableFaviconAutofill: true,
57 | enableOverrideAll: legacySettings.overrideAll,
58 | enableOverrideIndicator: legacySettings.flagReplaced,
59 | enableSiteIgnore: Boolean(legacySettings?.skips?.length),
60 | };
61 |
62 | settings.siteList = (legacySettings?.overrides || [])
63 | .map((legacyFavicon): Favicon => {
64 | const emojiInput = typeof legacyFavicon.emoji === 'string'
65 | ? emoji.infoByCode(legacyFavicon.emoji)
66 | : emoji.infoByCode(legacyFavicon.emoji.native);
67 | return createFavicon(legacyFavicon.filter, emojiInput);
68 | });
69 |
70 | settings.ignoreList = (legacySettings?.skips || [])
71 | .map((skip) => createFavicon(skip));
72 |
73 | settings.autoselectorVersion = AUTOSELECTOR_VERSION.FAVIOLI_LEGACY;
74 |
75 | return settings;
76 | }
77 |
--------------------------------------------------------------------------------
/source/hooks/use_selected_favicon.ts:
--------------------------------------------------------------------------------
1 | import type { Emoji } from '../models/emoji.ts';
2 | import type { Favicon } from '../models/favicon.ts';
3 | import type { Settings } from '../models/settings.ts';
4 |
5 | import { useEffect, useMemo, useState } from 'preact/hooks';
6 |
7 | import { getEmoji } from '../models/emoji.ts';
8 | import Autoselector from '../utilities/favicon_autoselector.ts';
9 | import selectFavicon from '../utilities/favicon_selector.ts';
10 | import { createFaviconURLFromChar } from '../utilities/image_helpers.ts';
11 |
12 | /**
13 | * Get the favicon, emoji, and displayed favicon url for a specific location.
14 | * Treat as if we are autofilling, and not ignoring sites.
15 | */
16 | export default function useSelectedFavicon(
17 | url: string,
18 | settings: Settings,
19 | ): {
20 | selectedFavicon: Favicon | null;
21 | selectedEmoji: Emoji | null;
22 | selectedImageURL: string;
23 | } {
24 | const { autoselectorVersion, features } = settings;
25 | const includeFlags = Boolean(features?.enableAutoselectorIncludeCountryFlags);
26 |
27 | const [selectedFavicon, setFavicon] = useState
28 | {Object.keys(customEmojis)
29 | .map((name) => {
30 | return (
31 | {
34 | try {
35 | if (confirm(`Delete ${name}?`)) {
36 | await deleteEmoji(customEmojis[name]);
37 | await saveToStorageBypassCache({
38 | ...cache,
39 | customEmojiIds: cache.customEmojiIds
40 | .filter((desc: string) =>
41 | desc !== customEmojis[name].description
42 | ),
43 | });
44 | setRoute(ROUTE.DEFAULT);
45 | }
46 | } catch (e) {
47 | confirm(e);
48 | }
49 | }}
50 | emoji={customEmojis[name]}
51 | />
52 | );
53 | })}
54 |
55 |
61 | About Favioli
17 |Version {cache.version}
19 |What is Favioli?
22 |23 | Favioli is a tool for modifying website favicons (icons that represent 24 | websites in tabs, your browsing history, and your bookmarks). 25 |
26 | 27 |Privacy Policy
28 |29 | Favioli does not track you, does not transmit any data outside of your 30 | computer, and does not modify anything on websites outside of favicons. 31 |
32 |33 | The only links to external sites/etc are informational links on this 34 | about page. 35 |
36 |37 | I am actively trying to respect your privacy. The source code is freely 38 | available for inspection and/or to build from source: 39 |
40 | 41 | https://github.com/ivebencrazy/favioli 42 | 43 | 44 |Permissions
45 |46 | To replace favicons, Favioli runs code on websites that you are 47 | browsing. If you are very nervous about that, some browsers now allow 48 | you to restrict extensions to only run on specific websites. As features 49 | are added, I will try to keep permissions as granular as possible. 50 |
51 | 52 |Something is broken!
53 |54 | Please report any bugs you find on{' '} 55 | 56 | Github Issues 57 | ! Since Favioli does not collect any automated feedback, any kind of 58 | feedback is very useful! 59 |
60 |61 | In the future, I will add a form to{' '} 62 | favioli.com/contact{' '} 63 | so that sending feedback will be easier. 64 |
65 | 66 |Thanks for using Favioli!
67 |68 | – Ben 69 |
70 | 71 |
46 | onSelected(emoji)}
51 | emoji={emoji}
52 | />
53 | ))}
54 |
55 | ));
56 |
57 | // If groupFilter, still show group, just for the title
58 | const shouldNotShowGroups = !groupFilter && !emojiGroupComponents.length;
59 |
60 | return (
61 | {emojiGroup.name}
47 | {emojiGroup.emojis.map((emoji) => ( 48 |
6 | 
9 |
53 |
73 | );
74 | }
75 |
--------------------------------------------------------------------------------
/source/components/list_input.tsx:
--------------------------------------------------------------------------------
1 | /* @jsx h */
2 | import type { Emoji } from '../models/emoji.ts';
3 | import type { Favicon } from '../models/favicon.ts';
4 |
5 | import { h } from 'preact';
6 | import { useCallback, useMemo } from 'preact/hooks';
7 |
8 | import { DEFAULT_EMOJI } from '../models/emoji.ts';
9 | import { isRegexString } from '../utilities/regex_utils.ts';
10 | import EmojiSelector from './emoji_selector/mod.tsx';
11 | import Only from './only.tsx';
12 |
13 | const IGNORE = 'IGNORE';
14 | const FAVICON = 'FAVICON';
15 | export type ListType = typeof IGNORE | typeof FAVICON;
16 | export const LIST_TYPE: { [name: string]: ListType } = { IGNORE, FAVICON };
17 |
18 | interface ListInputProps {
19 | autoFocus?: boolean;
20 | canDelete?: boolean;
21 | type: ListType;
22 | index: number;
23 | value?: Favicon;
24 | placeholder?: string;
25 | deleteItem?: (index: number) => void;
26 | addItem?: (listitem: Favicon) => void;
27 | updateItem?: (index: number, listItem: Favicon) => void;
28 | }
29 |
30 | const choices = [
31 | 'favioli.com',
32 | 'https://favioli.com',
33 | 'favioli',
34 | '/favioli.com$/i',
35 | '/http:\\/\\//',
36 | ];
37 |
38 | export default function ListInput({
39 | autoFocus = false,
40 | addItem,
41 | deleteItem,
42 | updateItem = () => {},
43 | type,
44 | value,
45 | index,
46 | }: ListInputProps) {
47 | const onChangeMatcher = useCallback((e: Event) => {
48 | if (e.target instanceof HTMLInputElement) {
49 | const next = {
50 | emojiId: value?.emojiId || DEFAULT_EMOJI.description,
51 | matcher: e.target.value,
52 | };
53 | addItem ? addItem(next) : updateItem(index, next);
54 | }
55 | }, [index, value, updateItem, addItem]);
56 |
57 | const onChangeEmoji = useCallback((selectedEmoji: Emoji) => {
58 | const next = {
59 | emojiId: selectedEmoji.description,
60 | matcher: value?.matcher || '',
61 | };
62 | addItem ? addItem(next) : updateItem(index, next);
63 | }, [index, value, updateItem, addItem]);
64 |
65 | const onClickDelete = useCallback(() => {
66 | if (deleteItem) deleteItem(index);
67 | }, [index, deleteItem]);
68 |
69 | const color = isRegexString(value?.matcher || '') ? 'green' : 'black';
70 | const placeholder = useMemo(() => {
71 | return choices[Math.floor(Math.random() * choices.length)];
72 | }, []);
73 |
74 | return (
75 | Upload Custom Favicon
54 |
55 |
56 |
57 |
58 | 
59 |
60 |
61 |
62 |
69 |
70 |
71 |
72 |
76 |
85 |
86 |
87 |
89 |
90 |
91 |
98 |
99 |
100 | );
101 | }
102 |
--------------------------------------------------------------------------------
/source/content_script.ts:
--------------------------------------------------------------------------------
1 | ///
48 |
89 | );
90 | };
91 |
92 | const mountPoint = document.getElementById('mount');
93 | if (mountPoint) render(
49 |
68 |
50 | Current Favicon:
51 | 
57 |
58 |
59 | Favioli Favicon:
60 | 
66 |
67 |
69 | Is a Favioli Favicon?{' '}
70 |
71 | {selectedImageURL === favIconUrl ? 'Yes!' : 'No!'}
72 |
73 |
74 |
82 |
87 | {status}
88 |
52 |
54 | );
55 | }
56 |
57 | if (route === ROUTE.DELETE_CUSTOM) {
58 | return (
59 |
60 |
65 | );
66 | }
67 |
68 | return (
69 |
70 |
105 | );
106 | }
107 |
108 | function useFilterState(initialValue: string): [string, (e: Event) => void] {
109 | const [filter, setFilter] = useState(initialValue);
110 |
111 | const updateFilter = useCallback((e: Event) => {
112 | if (e.target instanceof HTMLInputElement) {
113 | setFilter(e.target?.value || '');
114 | }
115 | }, [setFilter]);
116 |
117 | return [filter, updateFilter];
118 | }
119 |
--------------------------------------------------------------------------------
/source/hooks/use_browser_storage.ts:
--------------------------------------------------------------------------------
1 | import { useCallback, useEffect, useState } from 'preact/hooks';
2 | import browserAPI from 'browser';
3 |
4 | const { storage, runtime } = browserAPI;
5 |
6 | export interface BrowserStorage
71 |
97 |
72 | {emojiGroupsArray
73 | .map((emojiGroup: EmojiGroup) => {
74 | const { name, representativeEmoji } = emojiGroup;
75 | const isSelected = name === groupFilter;
76 | const isSelectedClass = isSelected ? 'selected' : '';
77 | return (
78 |
87 |
96 | setGroupFilter(isSelected ? '' : name)}
81 | >
82 | {representativeEmoji}
83 |
84 | );
85 | })}
86 |