99 |
100 |
{
104 | toggleShouldShowComments();
105 | e.stopPropagation();
106 | }}
107 | />
108 |
109 |
Top Comments
110 | {comments.map((comment: Comment, index) => {
111 | const commentContent = stripHtml(comment.text).result;
112 |
113 | const onClickCommentTitle = (
114 | e: React.MouseEvent
115 | ) => {
116 | logForumCommentEvent(
117 | EventType.CLICK_SIDEBAR_FORUM_COMMENT_TITLE,
118 | comment,
119 | isIncognitoMode
120 | );
121 | e.stopPropagation();
122 | };
123 |
124 | return (
125 |
149 | );
150 | })}
151 |
152 |
153 |
154 | );
155 | };
156 |
157 | export default ResultCardComments;
158 |
--------------------------------------------------------------------------------
/src/containers/ResultFeedSettingsPanel.tsx:
--------------------------------------------------------------------------------
1 | import { QuestionMarkCircleIcon } from "@heroicons/react/outline";
2 | import _ from "lodash";
3 | import React, { useState } from "react";
4 | import ReactTooltip from "react-tooltip";
5 |
6 | import {
7 | DEFAULT_RESULT_FEED_FILTER_BY_MIN_COMMENTS,
8 | DEFAULT_RESULT_FEED_FILTER_BY_MIN_DATE,
9 | DEFAULT_RESULT_FEED_FILTER_BY_MIN_LIKES,
10 | DEFAULT_RESULT_FEED_SORT_EXACT_URL_FIRST,
11 | DEFAULT_RESULT_FEED_SORT_OPTION,
12 | KEY_INCOGNITO_MODE,
13 | KEY_RESULT_FEED_FILTER_BY_MIN_COMMENTS,
14 | KEY_RESULT_FEED_FILTER_BY_MIN_DATE,
15 | KEY_RESULT_FEED_FILTER_BY_MIN_LIKES,
16 | KEY_RESULT_FEED_SORT_EXACT_URL_FIRST,
17 | KEY_RESULT_FEED_SORT_OPTION,
18 | SETTINGS_DEBOUNCE_TIME,
19 | } from "../shared/constants";
20 | import { EventType, sendEventsToServerViaWorker } from "../shared/events";
21 | import {
22 | RESULT_FEED_FILTER_BY_MIN_DATE_OPTIONS,
23 | RESULT_FEED_SORT_OPTIONS,
24 | } from "../shared/options";
25 | import { useSettingsStore } from "../shared/settings";
26 | import { classNames } from "../utils/classNames";
27 | import { log } from "../utils/log";
28 | import SelectMenu from "./SelectMenu";
29 | import Slider from "./Slider";
30 | import Toggle from "./Toggle";
31 |
32 | interface Props {
33 | scrollable?: boolean;
34 | }
35 |
36 | export const ResultFeedSettingsPanel = (props: Props) => {
37 | log.debug("Settings Panel rerender");
38 |
39 | const { scrollable } = props;
40 | const [
41 | settings,
42 | setValueAll,
43 | setKeyValue,
44 | isPersistent,
45 | error,
46 | isLoadingStore,
47 | ] = useSettingsStore();
48 |
49 | const isIncognitoMode = settings[KEY_INCOGNITO_MODE];
50 | const resultFeedSortExactUrlFirst =
51 | settings[KEY_RESULT_FEED_SORT_EXACT_URL_FIRST];
52 | const resultFeedSortOption = settings[KEY_RESULT_FEED_SORT_OPTION];
53 | const resultFeedFilterByMinComments =
54 | settings[KEY_RESULT_FEED_FILTER_BY_MIN_COMMENTS];
55 | const resultFeedFilterByMinLikes =
56 | settings[KEY_RESULT_FEED_FILTER_BY_MIN_LIKES];
57 | const resultFeedFilterByMinDate =
58 | settings[KEY_RESULT_FEED_FILTER_BY_MIN_DATE];
59 |
60 | const setKeyValueWithEvents = (key: string, value: any) => {
61 | setKeyValue(key, value);
62 | sendEventsToServerViaWorker(
63 | {
64 | eventType: EventType.CHANGE_SETTING,
65 | settingKey: key,
66 | settingValue: value,
67 | },
68 | isIncognitoMode
69 | );
70 | };
71 |
72 | const setResultFeedSortOption = (state: any) =>
73 | setKeyValueWithEvents(KEY_RESULT_FEED_SORT_OPTION, state);
74 | const setResultFeedSortExactUrlFirst = (state: boolean) =>
75 | setKeyValueWithEvents(KEY_RESULT_FEED_SORT_EXACT_URL_FIRST, state);
76 |
77 | const setResultFeedFilterByMinComments = (state: number) =>
78 | setKeyValueWithEvents(KEY_RESULT_FEED_FILTER_BY_MIN_COMMENTS, state);
79 | const setResultFeedFilterByMinLikes = (state: number) =>
80 | setKeyValueWithEvents(KEY_RESULT_FEED_FILTER_BY_MIN_LIKES, state);
81 | const setResultFeedFilterByMinDate = (state: any) =>
82 | setKeyValueWithEvents(KEY_RESULT_FEED_FILTER_BY_MIN_DATE, state);
83 |
84 | const setResultFeedFilterByMinCommentsDebounced = _.debounce((value: any) => {
85 | setResultFeedFilterByMinComments(value);
86 | }, SETTINGS_DEBOUNCE_TIME);
87 | const setResultFeedFilterByMinLikesDebounced = _.debounce((value: any) => {
88 | setResultFeedFilterByMinLikes(value);
89 | }, SETTINGS_DEBOUNCE_TIME);
90 |
91 | const resetSettingsToDefault = () => {
92 | setValueAll((prevState: any) => {
93 | return {
94 | ...prevState,
95 | [KEY_RESULT_FEED_SORT_OPTION]: DEFAULT_RESULT_FEED_SORT_OPTION,
96 | [KEY_RESULT_FEED_SORT_EXACT_URL_FIRST]:
97 | DEFAULT_RESULT_FEED_SORT_EXACT_URL_FIRST,
98 | [KEY_RESULT_FEED_FILTER_BY_MIN_COMMENTS]:
99 | DEFAULT_RESULT_FEED_FILTER_BY_MIN_COMMENTS,
100 | [KEY_RESULT_FEED_FILTER_BY_MIN_LIKES]:
101 | DEFAULT_RESULT_FEED_FILTER_BY_MIN_LIKES,
102 | [KEY_RESULT_FEED_FILTER_BY_MIN_DATE]:
103 | DEFAULT_RESULT_FEED_FILTER_BY_MIN_DATE,
104 | };
105 | });
106 | };
107 |
108 | if (isLoadingStore) return null;
109 | return (
110 |
111 |
117 |
118 |
Customise your Results
119 |
123 | Reset to default
124 |
125 |
126 |
127 |
Sorting
128 |
129 |
Sort Results by
130 |
135 |
136 |
140 |
141 |
142 | Sort Results with Exact URL Match first
143 |
144 |
145 |
146 |
147 |
151 |
152 |
Filtering
153 |
154 |
Filter by Date
155 |
160 |
161 |
162 |
163 |
Minimum Comment Counts
164 |
165 |
166 | {resultFeedFilterByMinComments}
167 |
168 |
169 |
176 |
177 |
178 |
179 |
Minimum Like Counts
180 |
181 |
182 | {resultFeedFilterByMinLikes}
183 |
184 |
185 |
192 |
193 |
194 |
195 |
196 |
197 | );
198 | };
199 |
--------------------------------------------------------------------------------
/src/containers/ResultsContainer.stories.tsx:
--------------------------------------------------------------------------------
1 | import { ComponentMeta, ComponentStory } from "@storybook/react";
2 | import React from "react";
3 |
4 | import {
5 | createMockOnFetchComments,
6 | mockComments,
7 | mockResults,
8 | mockUseSettingsStore,
9 | } from "../tests/mocks";
10 | import ResultsContainer from "./ResultsContainer";
11 |
12 | export default {
13 | title: "ResultCard/ResultsContainer",
14 | component: ResultsContainer,
15 | argTypes: {
16 | backgroundColor: { control: "color" },
17 | },
18 | } as ComponentMeta
;
19 |
20 | const Template: ComponentStory = (args) => (
21 | (false);
27 |
28 | const partialResults = shouldShowMore
29 | ? results
30 | : results.slice(0, numResults);
31 | const numberMoreToShow = results.length - partialResults.length;
32 |
33 | return (
34 |
35 | {partialResults.map((result, index) => (
36 |
43 | ))}
44 | {numberMoreToShow > 0 && (
45 |
46 |
47 | setShouldShowMore(true)}
50 | >
51 | Show {numberMoreToShow} More{" "}
52 |
53 | setShouldShowMore(true)}
56 | />
57 |
58 |
59 | )}
60 |
(defaultOption);
22 |
23 | useEffect(() => {
24 | setSelected(defaultOption);
25 | }, [defaultOption]);
26 |
27 | return (
28 | {
31 | setSelected(_selected);
32 | onSelected(_selected);
33 | }}
34 | >
35 | {({ open }) => (
36 | <>
37 | {label && (
38 |
39 | {label}
40 |
41 | )}
42 |
43 |
44 |
45 | {selected.value}
46 |
47 |
48 |
53 |
54 |
55 |
62 |
63 | {options.map((option) => (
64 |
67 | classNames(
68 | active ? "bg-indigo-600 text-white" : "text-gray-900",
69 | "relative cursor-default select-none py-2 pl-3 pr-9"
70 | )
71 | }
72 | value={option}
73 | >
74 | {({ selected, active }) => (
75 | <>
76 |
82 | {option.value}
83 |
84 |
85 | {selected ? (
86 |
92 |
94 | ) : null}
95 |
96 | )}
97 |
98 | ))}
99 |
100 |
101 |
102 |
103 | )}
104 |
105 | );
106 | };
107 |
108 | export default SelectMenu;
109 |
--------------------------------------------------------------------------------
/src/containers/SettingsPanel.tsx:
--------------------------------------------------------------------------------
1 | import { QuestionMarkCircleIcon } from "@heroicons/react/outline";
2 | import _ from "lodash";
3 | import React from "react";
4 | import ReactTooltip from "react-tooltip";
5 |
6 | import {
7 | DEFAULT_CONTENT_BUTTON_PLACEMENT_TRANSLATION,
8 | KEY_BOLD_INITIAL_CHARS_OF_WORDS,
9 | KEY_CONTENT_BUTTON_BACKGROUND,
10 | KEY_CONTENT_BUTTON_PLACEMENT,
11 | KEY_CONTENT_BUTTON_PLACEMENT_TRANSLATION,
12 | KEY_FONT_SIZES,
13 | KEY_HIDE_CONTENT_BUTTON,
14 | KEY_HOTKEYS_TOGGLE_SIDEBAR,
15 | KEY_INCOGNITO_MODE,
16 | KEY_SHOULD_COLOR_FOR_SUBMITTED_BY,
17 | KEY_SHOULD_SHOW_SIDEBAR_ONLY_ON_EXACT_RESULTS,
18 | KEY_SHOULD_SHOW_SIDEBAR_ON_RESULTS,
19 | KEY_SHOULD_USE_OLD_REDDIT_LINK,
20 | KEY_SIDEBAR_OPACITY,
21 | KEY_SIDEBAR_SQUEEZES_PAGE,
22 | KEY_SIDEBAR_WIDTH,
23 | SETTINGS_DEBOUNCE_TIME,
24 | } from "../shared/constants";
25 | import { EventType, sendEventsToServerViaWorker } from "../shared/events";
26 | import {
27 | CONTENT_BUTTON_PLACEMENT_OPTIONS,
28 | FONT_SIZE_OPTIONS,
29 | } from "../shared/options";
30 | import { useSettingsStore } from "../shared/settings";
31 | import { classNames } from "../utils/classNames";
32 | import { log } from "../utils/log";
33 | import HotkeysListenerButton from "./HotkeysListenerButton";
34 | import SelectMenu from "./SelectMenu";
35 | import Slider from "./Slider";
36 | import Toggle from "./Toggle";
37 |
38 | interface Props {
39 | scrollable?: boolean;
40 | }
41 |
42 | export const SettingsPanel = (props: Props) => {
43 | log.debug("Settings Panel rerender");
44 |
45 | const { scrollable } = props;
46 | const [
47 | settings,
48 | setValueAll,
49 | setKeyValue,
50 | isPersistent,
51 | error,
52 | isLoadingStore,
53 | ] = useSettingsStore();
54 |
55 | const sideBarWidth = settings[KEY_SIDEBAR_WIDTH];
56 | const sideBarOpacity = settings[KEY_SIDEBAR_OPACITY];
57 | const hideContentButton = settings[KEY_HIDE_CONTENT_BUTTON];
58 | const contentButtonBackground = settings[KEY_CONTENT_BUTTON_BACKGROUND];
59 | const contentButtonPlacement = settings[KEY_CONTENT_BUTTON_PLACEMENT];
60 | const shouldUseOldRedditLink = settings[KEY_SHOULD_USE_OLD_REDDIT_LINK];
61 | const shouldBoldInitialCharsOfWords =
62 | settings[KEY_BOLD_INITIAL_CHARS_OF_WORDS];
63 | const shouldColorForSubmittedBy = settings[KEY_SHOULD_COLOR_FOR_SUBMITTED_BY];
64 | const shouldSidebarSqueezePage = settings[KEY_SIDEBAR_SQUEEZES_PAGE];
65 | const shouldShowSidebarOnResults =
66 | settings[KEY_SHOULD_SHOW_SIDEBAR_ON_RESULTS];
67 | const shouldShowSidebarOnlyOnExactResults =
68 | settings[KEY_SHOULD_SHOW_SIDEBAR_ONLY_ON_EXACT_RESULTS];
69 | const isIncognitoMode = settings[KEY_INCOGNITO_MODE];
70 |
71 | const setKeyValueWithEvents = (key: string, value: any) => {
72 | setKeyValue(key, value);
73 | sendEventsToServerViaWorker(
74 | {
75 | eventType: EventType.CHANGE_SETTING,
76 | settingKey: key,
77 | settingValue: value,
78 | },
79 | isIncognitoMode
80 | );
81 | };
82 |
83 | const setSideBarWidth = (state: number) =>
84 | setKeyValueWithEvents(KEY_SIDEBAR_WIDTH, state);
85 | const setSideBarOpacity = (state: number) =>
86 | setKeyValueWithEvents(KEY_SIDEBAR_OPACITY, state);
87 | const setHideContentButton = (state: boolean) =>
88 | setKeyValueWithEvents(KEY_HIDE_CONTENT_BUTTON, state);
89 | const setContentButtonBackground = (state: boolean) =>
90 | setKeyValueWithEvents(KEY_CONTENT_BUTTON_BACKGROUND, state);
91 | const setContentButtonPlacement = (state: any) => {
92 | // NOTE: we had to do this because setting them separately led to the button translation not being registered.
93 | setValueAll((prevState: any) => {
94 | return {
95 | ...prevState,
96 | [KEY_CONTENT_BUTTON_PLACEMENT_TRANSLATION]:
97 | DEFAULT_CONTENT_BUTTON_PLACEMENT_TRANSLATION,
98 | [KEY_CONTENT_BUTTON_PLACEMENT]: state,
99 | };
100 | });
101 | };
102 | const resetContentButtonPlacement = (state: any) => {
103 | setKeyValueWithEvents(
104 | KEY_CONTENT_BUTTON_PLACEMENT_TRANSLATION,
105 | DEFAULT_CONTENT_BUTTON_PLACEMENT_TRANSLATION
106 | );
107 | };
108 | const handleSidebarSqueezePage = (state: boolean) =>
109 | setKeyValueWithEvents(KEY_SIDEBAR_SQUEEZES_PAGE, state);
110 | const handleFontSizeChange = (state: Record) =>
111 | setKeyValueWithEvents(KEY_FONT_SIZES, state);
112 | const handleIncogChange = (state: boolean) =>
113 | setKeyValueWithEvents(KEY_INCOGNITO_MODE, state);
114 | const handleShouldUseOldRedditLink = (state: boolean) =>
115 | setKeyValueWithEvents(KEY_SHOULD_USE_OLD_REDDIT_LINK, state);
116 | const handleShouldBoldInitialCharsOfWords = (state: boolean) =>
117 | setKeyValueWithEvents(KEY_BOLD_INITIAL_CHARS_OF_WORDS, state);
118 | const handleShouldColorForSubmittedBy = (state: boolean) =>
119 | setKeyValueWithEvents(KEY_SHOULD_COLOR_FOR_SUBMITTED_BY, state);
120 | const handleShouldShowSidebarOnResults = (state: boolean) =>
121 | setKeyValueWithEvents(KEY_SHOULD_SHOW_SIDEBAR_ON_RESULTS, state);
122 | const handleShouldShowSidebarOnlyOnExactResults = (state: boolean) =>
123 | setKeyValueWithEvents(KEY_SHOULD_SHOW_SIDEBAR_ONLY_ON_EXACT_RESULTS, state);
124 |
125 | const setSideBarWidthDebounced = _.debounce((value: any) => {
126 | setSideBarWidth(value);
127 | }, SETTINGS_DEBOUNCE_TIME);
128 | const setSideBarOpacityDebounced = _.debounce((value: any) => {
129 | // Set to 99.99 because a value of 100 seems to have problems re-rendering
130 | if (value == 100) value = 99.99;
131 | setSideBarOpacity(value);
132 | }, SETTINGS_DEBOUNCE_TIME);
133 |
134 | if (isLoadingStore) return null;
135 | return (
136 |
137 |
143 |
Change settings
144 |
Sidebar
145 |
146 |
Sidebar Width
147 |
154 |
155 |
156 |
Sidebar Opacity
157 |
164 |
165 |
169 |
170 |
171 | Sidebar Tries To Squeeze Page When Opened
172 |
173 |
174 |
175 |
176 |
180 |
181 |
185 |
186 |
Sidebar Opens When Results Found
187 |
188 |
189 |
190 |
194 |
195 |
199 |
200 |
201 | Sidebar Only Opens When Exact Results Found
202 |
203 |
204 |
205 |
206 |
210 |
211 |
212 |
Keyboard Shortcuts
213 |
214 | Click on the keyboard shortcuts on the right to change them. When
215 | "Enter hotkey" is shown, press a combination of two keys, e.g.,
216 | "Control" and "G", to set the new hotkey combination.
217 |
218 |
219 |
Toggle Sidebar
220 |
221 |
222 |
223 |
224 |
225 |
General
226 |
227 |
Font Size
228 |
233 |
234 |
238 |
239 |
Bionic Reading
240 |
241 |
242 |
243 |
247 |
248 |
252 |
253 |
254 | Use old.reddit.com instead of reddit.com
255 |
256 |
257 |
258 |
259 |
263 |
264 |
268 |
269 |
Color Author Names
270 |
271 |
272 |
273 |
277 |
278 |
282 |
283 |
Incognito Mode
284 |
285 |
286 |
287 |
288 |
289 |
290 |
Extension Button
291 |
292 |
Extension Button Placement
293 |
298 |
299 |
300 |
301 |
Reset Extension Button Position
302 |
303 |
310 | Reset
311 |
312 |
313 |
314 |
318 |
319 |
Hide Extension Button
320 |
321 |
322 |
323 |
324 |
325 |
329 |
330 |
Extension Button Background
331 |
332 |
333 |
334 |
338 |
339 |
340 |
341 |
342 |
;
11 | defaultValue?: Array;
12 | onValueChange?(value: any): void;
13 | }
14 |
15 | const Slider = (props: SliderProps) => {
16 | const { min, max, step, choices, defaultValue, onValueChange, className } =
17 | props;
18 |
19 | // When choices are provided, we should treat the slider as choosing from the choices
20 | const _onValueChange =
21 | choices && onValueChange
22 | ? (sizeIds: number[]) => onValueChange(choices[sizeIds[0]])
23 | : onValueChange;
24 | const _defaultValue =
25 | choices && defaultValue
26 | ? [indexOfObjectArr(choices, defaultValue[0])]
27 | : defaultValue;
28 | const _min = choices ? 0 : min;
29 | const _max = choices ? choices.length - 1 : max;
30 | const _step = choices ? 1 : step;
31 |
32 | return (
33 |
44 |
45 |
47 |
49 | );
50 | };
51 |
52 | export default Slider;
53 |
--------------------------------------------------------------------------------
/src/containers/Toggle.tsx:
--------------------------------------------------------------------------------
1 | import { Switch } from "@headlessui/react";
2 | import React, { useEffect, useState } from "react";
3 |
4 | import { classNames } from "../utils/classNames";
5 | import { log } from "../utils/log";
6 |
7 | export interface Props {
8 | checked: boolean;
9 | onCheck: (checked: boolean) => void;
10 | }
11 |
12 | const Toggle = (props: Props) => {
13 | const { checked, onCheck } = props;
14 | const [enabled, setEnabled] = useState(checked);
15 |
16 | useEffect(() => {
17 | setEnabled(checked);
18 | }, [checked]);
19 |
20 | log.debug("Toggle rerender", checked, enabled);
21 |
22 | return (
23 | {
26 | setEnabled(check);
27 | onCheck(check);
28 | }}
29 | className={classNames(
30 | enabled ? "bg-indigo-600" : "bg-gray-200 dark:bg-gray-700",
31 | "relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none"
32 | )}
33 | >
34 | Use setting
35 |
43 | );
44 | };
45 |
46 | export default Toggle;
47 |
--------------------------------------------------------------------------------
/src/containers/ToggleGroup.tsx:
--------------------------------------------------------------------------------
1 | import { Switch } from "@headlessui/react";
2 | import React from "react";
3 |
4 | import Toggle, { Props as ToggleProps } from "./Toggle";
5 |
6 | interface Props extends ToggleProps {
7 | label?: string;
8 | description?: string;
9 | }
10 |
11 | export const ToggleGroup = (props: Props) => {
12 | const { label, description, checked, onCheck } = props;
13 | return (
14 |
15 |
16 | {label && (
17 |
22 | {label}
23 |
24 | )}
25 | {description && (
26 |
27 | {description}
28 |
29 | )}
30 |
31 |
33 | );
34 | };
35 |
--------------------------------------------------------------------------------
/src/d.ts:
--------------------------------------------------------------------------------
1 | declare module "*.png" {
2 | const value: any;
3 | export = value;
4 | }
5 |
--------------------------------------------------------------------------------
/src/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "manifest_version": 3,
3 | "name": "CrowdWise",
4 | "description": "CrowdWise shows you discussions (from HN/Reddit) about the page you're browsing. What do other people think?",
5 | "permissions": ["storage", "tabs", "alarms", "identity", "identity.email"],
6 | "options_page": "options.html",
7 | "background": { "service_worker": "background.bundle.js" },
8 | "action": {},
9 | "icons": {
10 | "128": "icon-128.png"
11 | },
12 | "content_scripts": [
13 | {
14 | "matches": ["http://*/*", "https://*/*"],
15 | "js": ["contentScript.bundle.js"],
16 | "css": ["content.styles.css"]
17 | }
18 | ],
19 | "web_accessible_resources": [
20 | {
21 | "resources": [
22 | "chrome-extension://*/*.bundle.js.map",
23 | "sidebar.html",
24 | "content.styles.css",
25 | "*.png",
26 | "*.svg"
27 | ],
28 | "matches": ["http://*/*", "https://*/*"]
29 | }
30 | ]
31 | }
32 |
--------------------------------------------------------------------------------
/src/pages/Background/index.js:
--------------------------------------------------------------------------------
1 | import {
2 | fetchCommentsFromProvider,
3 | fetchDataFromProviders,
4 | } from "../../providers/providers";
5 | import {
6 | CACHE_CLEAR_TABID_ALARM_INTERVAL_MIN,
7 | CACHE_CLEAR_TABID_ALARM_NAME,
8 | CACHE_CLEAR_URL_ALARM_INTERVAL_MIN,
9 | CACHE_CLEAR_URL_ALARM_NAME,
10 | KEY_SIDEBAR_OPEN_TAB_STATE,
11 | } from "../../shared/constants";
12 | import { sendEventsToServer } from "../../shared/events";
13 | import { isExpiredCacheEntry } from "../../utils/cache";
14 | import { log } from "../../utils/log";
15 | import { sendMessageToActiveTab } from "../../utils/tabs";
16 |
17 | /**
18 | * BACKGROUND SCRIPT.
19 | *
20 | * A single instance of this script runs when the browser is active.
21 | * Receives messages from content scripts and actually makes the requests to provider APIs.
22 | *
23 | * Background script is the bottleneck because it doesn't have to deal with CORS issues.
24 | * See: https://www.chromium.org/Home/chromium-security/extension-content-script-fetches
25 | * */
26 |
27 | // Add cache clearing alarm
28 | chrome.runtime.onInstalled.addListener(() => {
29 | log.debug("background script onInstalled...");
30 | // create alarm after extension is installed / upgraded
31 | chrome.alarms.create(CACHE_CLEAR_URL_ALARM_NAME, {
32 | delayInMinutes: 1,
33 | periodInMinutes: CACHE_CLEAR_URL_ALARM_INTERVAL_MIN,
34 | });
35 | chrome.alarms.create(CACHE_CLEAR_TABID_ALARM_NAME, {
36 | delayInMinutes: 2, // offset a little to make logs easier to read
37 | periodInMinutes: CACHE_CLEAR_TABID_ALARM_INTERVAL_MIN,
38 | });
39 | });
40 |
41 | chrome.alarms.onAlarm.addListener((alarm) => {
42 | if (alarm.name === CACHE_CLEAR_URL_ALARM_NAME) {
43 | // Remove data from URL fetches that we cached
44 | removeExpiredCacheEntries();
45 | } else if (alarm.name === CACHE_CLEAR_TABID_ALARM_NAME) {
46 | // Remove tabId preference information (open/closed)
47 | // Many of these tabs will not exist.
48 | // TODO bit of a callback hell at the moment
49 | log.debug("Running tab id cache clearning alarm.");
50 | chrome.tabs.query({}, function (tabs) {
51 | log.debug("Got all active tabs..");
52 | log.debug(tabs);
53 | const tabIdKeyStrings = tabs.map(
54 | (t) => `${KEY_SIDEBAR_OPEN_TAB_STATE}${t.id}`
55 | );
56 | log.debug(`TabID key strings: ${tabIdKeyStrings}`);
57 | // Get all keys in local storage and remove invalid tab states
58 | chrome.storage.local.get(null, (items) => {
59 | log.debug("Local storage items:");
60 | log.debug(items);
61 | const invalidKeys = Object.keys(items).filter(
62 | (key) =>
63 | key.startsWith(KEY_SIDEBAR_OPEN_TAB_STATE) &&
64 | tabIdKeyStrings.indexOf(key) < 0
65 | );
66 | chrome.storage.local.remove(invalidKeys, () => {
67 | log.debug(
68 | `Removed ${invalidKeys.length} invalid tabId states from cache!`
69 | );
70 | log.debug(invalidKeys);
71 | });
72 | });
73 | });
74 | }
75 | });
76 |
77 | // Allow clicking on icon in toolbar to trigger sidebar open
78 | chrome.action.onClicked.addListener(() =>
79 | sendMessageToActiveTab({ toggleSideBar: true })
80 | );
81 |
82 | // Clear all expired cache entries
83 | function removeExpiredCacheEntries() {
84 | log.warn("Clearing cache of expired entries.");
85 | chrome.storage.local.get(null, (results) => {
86 | let keysToRemove = [];
87 | Object.keys(results).forEach((key) => {
88 | const localStorageVal = results[key];
89 | // log.debug("Local storage value:");
90 | // log.debug(localStorageVal);
91 | // Check for expiry and add it to the list of keys to remove if so
92 | if (localStorageVal.cachedTime) {
93 | if (isExpiredCacheEntry(localStorageVal)) keysToRemove.push(key);
94 | }
95 | });
96 | log.debug(`Initiating removal of ${keysToRemove.length} entries...`);
97 | chrome.storage.local.remove(keysToRemove, () => {
98 | log.debug("Removed all expired entries!");
99 | });
100 | });
101 | }
102 |
103 | /**
104 | * Respond every time a tab is updated in some way.
105 | * Specifically used to tell content scripts that the URL has changed without a full page reload occuring.
106 | * For instance, routing within a single-page app.
107 | * */
108 | chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
109 | // If a tab's URL is updated, send a message to that tab so the content script can update.
110 | if (changeInfo.url) {
111 | log.debug(
112 | `Background script: Url updated: tabId: ${tabId}, changeInfo: ${JSON.stringify(
113 | changeInfo
114 | )}, tab: ${JSON.stringify(tab)}`
115 | );
116 | chrome.tabs.sendMessage(tabId, {
117 | changedUrl: changeInfo.url,
118 | });
119 | }
120 | if (changeInfo.title) {
121 | log.debug(
122 | `Background script: Url title changed: tabId: ${tabId}, changeInfo: ${JSON.stringify(
123 | changeInfo
124 | )}, tab: ${JSON.stringify(tab)}`
125 | );
126 | chrome.tabs.sendMessage(tabId, {
127 | changedTitle: changeInfo.title,
128 | });
129 | }
130 | });
131 |
132 | /**
133 | * Handle provider data request from content script.
134 | * Passes information to handleOnMessage
135 | * */
136 | chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
137 | handleOnMessage(request, sender).then((data) => {
138 | log.debug("Sending response data to content script: ");
139 | log.debug(data);
140 | sendResponse(data);
141 | });
142 | return true;
143 | });
144 |
145 | async function handleOnMessage(request, sender) {
146 | log.debug("Background script received message...");
147 | log.debug(
148 | sender.tab
149 | ? "from a content script at tab URL:" + sender.tab.url
150 | : "NOT from a tab"
151 | );
152 | // Received from a tab (content script)
153 | if (sender.tab) {
154 | if (request.getProviderData) {
155 | // Ask providers for any relevant posts/comments
156 | const data = await fetchDataFromProviders(
157 | sender.tab.url,
158 | sender.tab.title
159 | );
160 | log.debug("Background script: printing provider data...");
161 | log.debug(data);
162 | return data;
163 | } else if (request.getTabId) {
164 | // Tab wants to know if it should be open or closed (last open/close action by the user in this tab)
165 | return sender.tab.id;
166 | } else if (request.eventPayload) {
167 | try {
168 | chrome.identity.getProfileUserInfo((userInfo) => {
169 | if (userInfo.id) {
170 | // Add additional details
171 | const guestId = `chrome_${userInfo.id}`;
172 | const appVersion = chrome.runtime.getManifest().version;
173 | const eventPayload = {
174 | ...request.eventPayload,
175 | guestId,
176 | appVersion,
177 | };
178 | sendEventsToServer(eventPayload);
179 | } else {
180 | log.error(`There's no user id: ${userInfo}`);
181 | }
182 | });
183 | } catch (e) {
184 | log.debug(e.message);
185 | }
186 | } else if (request.getComments) {
187 | log.debug("BG: Received request for comments.");
188 | // Tab is asking for comments
189 | const comments = await fetchCommentsFromProvider(
190 | request.providerType,
191 | request.commentsUrl
192 | );
193 | log.debug("BG: Fetched comments:");
194 | log.debug(comments);
195 | return comments;
196 | }
197 | }
198 | return {};
199 | }
200 |
201 | // After all listeners are registered
202 | log.debug("Background script initialized!");
203 |
--------------------------------------------------------------------------------
/src/pages/Content/content.styles.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/UseCrowdWise/crowdwise/f88841e7a6eec1aa91016504d0323e8263a938e6/src/pages/Content/content.styles.css
--------------------------------------------------------------------------------
/src/pages/Content/index.css:
--------------------------------------------------------------------------------
1 | .all-unset {
2 | all: unset;
3 | }
4 |
5 | .reset-spacing {
6 | margin: 0;
7 | padding: 0;
8 | }
9 |
10 | .__react_component_tooltip {
11 | margin: 0;
12 | width: auto;
13 | }
14 |
15 | .__react_component_tooltip .place-left {
16 | margin: 0 5px 0 0;
17 | }
18 |
19 | .badge {
20 | position: absolute;
21 | right: 0;
22 | text-align: center;
23 | font-size: 12px;
24 | min-width: 8px;
25 | border-radius: 16px;
26 | padding: 1px 5px;
27 | }
28 |
29 | .badge-red {
30 | /*text-gray-500*/
31 | background-color: #ef4444;
32 | /*text-zinc-200*/
33 | color: #e4e4e7;
34 | }
35 |
36 | .badge-grey {
37 | /*text-gray-200*/
38 | background-color: #e2e8f0;
39 | /*text-gray-500*/
40 | color: #64748b;
41 | }
42 |
--------------------------------------------------------------------------------
/src/pages/Content/index.js:
--------------------------------------------------------------------------------
1 | import "animate.css";
2 | import React, { useEffect, useState } from "react";
3 | import ReactDOM from "react-dom";
4 | import Draggable from "react-draggable";
5 | import { useHotkeys } from "react-hotkeys-hook";
6 | import DotLoader from "react-spinners/DotLoader";
7 | import ReactTooltip from "react-tooltip";
8 | import { zoomLevel } from "zoom-level";
9 |
10 | import {
11 | DEFAULT_CONTENT_BUTTON_PLACEMENT_OFFSET,
12 | DEFAULT_HOTKEYS_CLOSE_SIDEBAR,
13 | DEFAULT_SIDEBAR_OPEN_TAB_STATE,
14 | KEY_CONTENT_BUTTON_BACKGROUND,
15 | KEY_CONTENT_BUTTON_PLACEMENT,
16 | KEY_CONTENT_BUTTON_PLACEMENT_TRANSLATION,
17 | KEY_HIDE_CONTENT_BUTTON,
18 | KEY_HOTKEYS_TOGGLE_SIDEBAR,
19 | KEY_SHOULD_SHOW_SIDEBAR_ONLY_ON_EXACT_RESULTS,
20 | KEY_SHOULD_SHOW_SIDEBAR_ON_RESULTS,
21 | KEY_SIDEBAR_OPACITY,
22 | KEY_SIDEBAR_OPEN_TAB_STATE,
23 | KEY_SIDEBAR_SQUEEZES_PAGE,
24 | KEY_SIDEBAR_WIDTH,
25 | } from "../../shared/constants";
26 | import { useSettingsStore } from "../../shared/settings";
27 | import { log } from "../../utils/log";
28 | import "./index.css";
29 |
30 | log.debug("Content script works!");
31 | log.debug("Must reload extension for modifications to take effect.");
32 |
33 | let sidebarRoot = document.createElement("div");
34 | sidebarRoot.classList.add("all-unset");
35 | sidebarRoot.style["height"] = "100vh";
36 | sidebarRoot.style["top"] = 0;
37 | sidebarRoot.style["right"] = 0;
38 | sidebarRoot.style["position"] = "fixed";
39 | sidebarRoot.style["zIndex"] = 999999999;
40 |
41 | const originalMarginRight = window.getComputedStyle(document.body).marginRight;
42 |
43 | document.body.appendChild(sidebarRoot);
44 | sidebarRoot.setAttribute("id", "vt-sidebar-root");
45 |
46 | // First react component that is rendered onto vt-sidebar-root
47 | // This had to be a class so we can mount and unmount chrome listeners
48 | const App = () => {
49 | log.debug("App re-render");
50 |
51 | const [tabId, setTabId] = useState(undefined);
52 |
53 | const [isLoadingResults, setIsLoadingResults] = useState(null);
54 | const [numResults, setNumResults] = useState(null);
55 | const [numExactResults, setNumExactResults] = useState(null);
56 | const [userOpenedSideBar, setUserOpenedSideBar] = useState(
57 | DEFAULT_SIDEBAR_OPEN_TAB_STATE
58 | );
59 | const [
60 | userClosedSidebarSinceLatestResults,
61 | setUserClosedSidebarSinceLatestResults,
62 | ] = useState(false);
63 |
64 | const [isFullscreen, setIsFullscreen] = useState(false);
65 |
66 | const [isDragging, setIsDragging] = useState(false);
67 |
68 | const [
69 | settings,
70 | setSettings,
71 | setKeyValue,
72 | isPersistent,
73 | error,
74 | isLoadingStore,
75 | ] = useSettingsStore();
76 |
77 | // Don't load the button if we're still loading settings (need to know icon placement!)
78 | // if (isLoadingStore) return null;
79 |
80 | const sideBarWidth = settings[KEY_SIDEBAR_WIDTH];
81 | const sideBarOpacity = settings[KEY_SIDEBAR_OPACITY];
82 | const hotkeysToggleSidebar = settings[KEY_HOTKEYS_TOGGLE_SIDEBAR];
83 | const hideContentButton = settings[KEY_HIDE_CONTENT_BUTTON];
84 | const contentButtonBackground = settings[KEY_CONTENT_BUTTON_BACKGROUND];
85 | const contentButtonPlacement = settings[KEY_CONTENT_BUTTON_PLACEMENT];
86 | const buttonTranslation = settings[KEY_CONTENT_BUTTON_PLACEMENT_TRANSLATION];
87 | const sidebarSqueezePage = settings[KEY_SIDEBAR_SQUEEZES_PAGE];
88 | const showSidebarOnResults = settings[KEY_SHOULD_SHOW_SIDEBAR_ON_RESULTS];
89 | const showSidebarOnlyOnExactResults =
90 | settings[KEY_SHOULD_SHOW_SIDEBAR_ONLY_ON_EXACT_RESULTS];
91 |
92 | // These indicate whether we dragged or clicked
93 | const [lastPosX, setLastPosX] = useState(0);
94 | const [lastPosY, setLastPosY] = useState(0);
95 | // These directly control the position of the icon
96 | const [posX, setPosX] = useState(0);
97 | const [posY, setPosY] = useState(0);
98 | // Zoom level for scaling
99 | const [curZoom, setCurZoom] = useState(zoomLevel());
100 |
101 | // Keep our translation accurate even when zoom level changes in the tab
102 | const handleZoomChange = () => setCurZoom(zoomLevel());
103 | useEffect(() => {
104 | window.addEventListener("resize", handleZoomChange);
105 | // cleanup this component
106 | return () => {
107 | window.removeEventListener("keydown", handleZoomChange);
108 | };
109 | }, []);
110 |
111 | // Update the button position if our button-pos-related settings change!
112 | useEffect(() => {
113 | let curButtonTranslation =
114 | settings[KEY_CONTENT_BUTTON_PLACEMENT_TRANSLATION];
115 | const scaleFactor = curZoom / curButtonTranslation.zoom;
116 | setLastPosX(curButtonTranslation.x / scaleFactor);
117 | setLastPosY(curButtonTranslation.y / scaleFactor);
118 | setPosX(curButtonTranslation.x / scaleFactor);
119 | setPosY(curButtonTranslation.y / scaleFactor);
120 | }, [
121 | settings[KEY_CONTENT_BUTTON_PLACEMENT_TRANSLATION],
122 | settings[KEY_CONTENT_BUTTON_PLACEMENT],
123 | curZoom,
124 | ]);
125 |
126 | const toggleSideBar = () => {
127 | if (!isDragging) {
128 | toggleUserOpenedSidebarStateWithStorage();
129 | }
130 | };
131 | const closeSideBar = () => setUserOpenedSidebarStateWithStorage(false);
132 |
133 | // Toggle the side bar based on incoming message from further down in the component (close arrow)
134 | const handleMessage = (request, sender, sendResponse) => {
135 | if (request.toggleSideBar === true) {
136 | toggleSideBar();
137 | }
138 | if (request.closeSideBar === true) {
139 | closeSideBar();
140 | }
141 | if (request.newProviderDataCount !== undefined) {
142 | // We can differentiate between having 0 results but the call completes (maybe to un-animate a loading icon)
143 | // and having > 0 results from the call
144 | setNumResults(request.newProviderDataCount);
145 | setNumExactResults(request.newProviderExactDataCount);
146 | // If we just got a new set of results, we reset the user's preference to close the auto-opening sidebar.
147 | if (request.newProviderDataCount > 0) {
148 | setUserClosedSidebarSinceLatestResults(false);
149 | }
150 | }
151 | if (request.loadingProviderData !== undefined) {
152 | setIsLoadingResults(request.loadingProviderData);
153 | }
154 | };
155 |
156 | // Toggle the sidebar activation button as necessary
157 | // i.e., don't show it on fullscreen
158 | const handleFullscreenChange = () => {
159 | if (document.fullscreenElement) {
160 | log.debug("Entering fullscreen and hiding button!");
161 | setIsFullscreen(true);
162 | } else {
163 | log.debug("Exiting fullscreen and showing button (if necessary)");
164 | setIsFullscreen(false);
165 | }
166 | };
167 |
168 | // Hotkeys to control the sidebar visibility.
169 | // Note: The SideBar also needs to implement the same hotkey shortcuts because it will be within an iFrame
170 | useHotkeys(hotkeysToggleSidebar.join(","), toggleSideBar);
171 | useHotkeys(DEFAULT_HOTKEYS_CLOSE_SIDEBAR.join(","), closeSideBar);
172 |
173 | // For listeners
174 | useEffect(() => {
175 | // Add listeners when component mounts
176 | if (!chrome.runtime.onMessage.hasListener(handleMessage)) {
177 | chrome.runtime.onMessage.addListener(handleMessage);
178 | }
179 | document.addEventListener("fullscreenchange", handleFullscreenChange);
180 |
181 | // Remove listeners when this component unmounts
182 | return () => {
183 | chrome.runtime.onMessage.removeListener(handleMessage);
184 | document.removeEventListener("fullscreenchange");
185 | };
186 | }, []);
187 |
188 | // For tab state from storage
189 | // "Expensive" computation of the sidebar state on first load
190 | // We get our tab ID from background script and then check local storage
191 | // for this tab's sidebar open/closed state.
192 | // Then, we update the state with setUserOpenedSidebar
193 | useEffect(() => {
194 | log.debug("Sending message to background script to tell us our tab ID");
195 | chrome.runtime.sendMessage({ getTabId: true }, (tabId) => {
196 | setTabId(tabId);
197 | log.debug(`Background script tells us our tab ID should be ${tabId}`);
198 | const tabOpenClosedStateStorageKey = `${KEY_SIDEBAR_OPEN_TAB_STATE}${tabId}`;
199 | // Now we check local storage for tab state, otherwise return default val
200 | chrome.storage.local.get([tabOpenClosedStateStorageKey], (result) => {
201 | const shouldTabBeOpen =
202 | result[tabOpenClosedStateStorageKey] ??
203 | DEFAULT_SIDEBAR_OPEN_TAB_STATE;
204 | log.debug(`Sidebar should be open? ${shouldTabBeOpen}`);
205 | setUserOpenedSideBar(shouldTabBeOpen);
206 | });
207 | });
208 | }, []);
209 |
210 | // UI should call this to update sidebar state if it's a boolean
211 | // The storage will update too.
212 | const setUserOpenedSidebarStateWithStorage = (show) => {
213 | setUserOpenedSideBar(show);
214 | updateStorageWithOpenClosedState(show);
215 | };
216 |
217 | // UI should call this to update sidebar state if it needs to be toggled somehow
218 | // The storage will update too.
219 | const toggleUserOpenedSidebarStateWithStorage = () => {
220 | // For auto-sidebar - if the sidebar is currently open, that means it will be false after this toggle.
221 | // Therefore, count it as user closing sidebar if current status is open.
222 | if (userOpenedSideBar === true) {
223 | setUserClosedSidebarSinceLatestResults(true);
224 | }
225 | setUserOpenedSideBar((show) => {
226 | updateStorageWithOpenClosedState(!show);
227 | return !show;
228 | });
229 | };
230 |
231 | // Actually updates storage about the open-closed state
232 | // We once again ask the background script for our tab ID (storing this as state didn't work)
233 | // Then, we update storage with the key based on our tab ID
234 | const updateStorageWithOpenClosedState = (show) => {
235 | // For auto-sidebar
236 | if (show === false) {
237 | setUserClosedSidebarSinceLatestResults(true);
238 | }
239 | log.debug("Sending message to background script to tell us our tab ID");
240 | chrome.runtime.sendMessage({ getTabId: true }, (tabId) => {
241 | log.debug(`Background script tells us our tab ID should be ${tabId}`);
242 | const tabOpenClosedStateStorageKey = `${KEY_SIDEBAR_OPEN_TAB_STATE}${tabId}`;
243 | log.debug(
244 | `Setting open/closed state in storage for key ${tabOpenClosedStateStorageKey} to ${show}`
245 | );
246 | chrome.storage.local.set({ [tabOpenClosedStateStorageKey]: show }, () => {
247 | log.debug(
248 | `Set open/closed state in storage for key ${tabOpenClosedStateStorageKey} to ${show}`
249 | );
250 | });
251 | });
252 | };
253 |
254 | // NOTE: Do not do things such as this as it will force a re-render
255 | // if (isFullscreen) return null;
256 |
257 | // We should only auto-open the sidebar if the user hasn't interacted with the sidebar
258 | // since the last set of provider results has come in (i.e., respect the button click)
259 | const shouldAutoOpenSideBar =
260 | showSidebarOnResults &&
261 | !isLoadingResults &&
262 | numResults > 0 &&
263 | (numExactResults > 0 || !showSidebarOnlyOnExactResults) &&
264 | !userClosedSidebarSinceLatestResults;
265 | const shouldShowSideBar =
266 | !isFullscreen && (userOpenedSideBar || shouldAutoOpenSideBar);
267 | const shouldShowContentButton =
268 | !isFullscreen && !shouldShowSideBar && !hideContentButton;
269 |
270 | const finalSideBarWidth = shouldShowSideBar ? `${sideBarWidth}px` : "0px";
271 | const contentButtonTooltip =
272 | hotkeysToggleSidebar.join(", ").replaceAll("+", " + ") +
273 | " (Hide button in the settings)";
274 |
275 | if (sidebarSqueezePage) {
276 | document.body.style.marginRight = `calc(${originalMarginRight} + ${finalSideBarWidth})`;
277 | } else {
278 | document.body.style.marginRight = originalMarginRight;
279 | }
280 |
281 | // Hide content button when we have not fetched its position. If we gave
282 | // a default placement (e.g. bottom-right), then there will be "flashing"
283 | // problems if the user has already specified a different placement
284 | // (e.g. top-left) where the button appears briefly at the bottom-right
285 | // and then goes to the top-left.
286 | const contentButtonPlacementCss =
287 | contentButtonPlacement === null
288 | ? { display: "none" }
289 | : {
290 | "top-left": {
291 | top: DEFAULT_CONTENT_BUTTON_PLACEMENT_OFFSET,
292 | left: DEFAULT_CONTENT_BUTTON_PLACEMENT_OFFSET,
293 | },
294 | "top-right": {
295 | top: DEFAULT_CONTENT_BUTTON_PLACEMENT_OFFSET,
296 | right: DEFAULT_CONTENT_BUTTON_PLACEMENT_OFFSET,
297 | },
298 | "bottom-left": {
299 | bottom: DEFAULT_CONTENT_BUTTON_PLACEMENT_OFFSET,
300 | left: DEFAULT_CONTENT_BUTTON_PLACEMENT_OFFSET,
301 | },
302 | "bottom-right": {
303 | bottom: DEFAULT_CONTENT_BUTTON_PLACEMENT_OFFSET,
304 | right: DEFAULT_CONTENT_BUTTON_PLACEMENT_OFFSET,
305 | },
306 | }[contentButtonPlacement.key];
307 |
308 | // Initial position of the button before dragging
309 | const handleOnDragStart = (event, data) => {
310 | setLastPosX(data.x);
311 | setLastPosY(data.y);
312 | };
313 |
314 | const handleOnDragStop = (event, data) => {
315 | // event.stopPropagation();
316 | if (data.x === lastPosX && data.y === lastPosY) {
317 | // drag did not change anything. Consider this to be a click
318 | toggleSideBar();
319 | } else {
320 | // We dragged the sidebar to a new position, so update our settings
321 | setKeyValue(KEY_CONTENT_BUTTON_PLACEMENT_TRANSLATION, {
322 | x: data.x,
323 | y: data.y,
324 | zoom: curZoom,
325 | });
326 | }
327 | log.debug(`X/Y: ${data.x}, ${data.y}`);
328 | setPosX(data.x);
329 | setPosY(data.y);
330 | };
331 |
332 | return (
333 |
334 | {/*IMPORTANT: Reduce re-rendering of iframe because it will be laggy*/}
335 |
6 |
7 | 
22 |
23 |