676 |
677 | Num of results
678 |
679 | 5
680 | 10
681 | 15
682 | 20
683 | 30
684 |
685 |
686 |
687 | Date
688 |
689 | Past week
690 | Past month
691 | Past year
692 | All time
693 | Custom
694 |
695 |
696 |
706 |
707 | Search type
708 |
719 |
720 |
721 | `;
722 |
723 | function updateData(key, value) {
724 | searchQuery[key] = value;
725 |
726 | if (searchQuery.mode === 'auto') {
727 | updateResults();
728 | }
729 | }
730 |
731 | function installSection() {
732 | // Submissions and Comments share the same page URL
733 | // Abort if we are not on a submission page
734 | if (!document.querySelector('.fatitem .titleline')) {
735 | return;
736 | }
737 |
738 | const hnBody = document.querySelector('#hnmain > tbody');
739 | let NavbarIndex = 0;
740 | const rows = hnBody.querySelectorAll("tr");
741 |
742 | // handle special case if death banner is present
743 | if (rows[0].querySelector('td img[src="s.gif"]')) {
744 | rows[0].querySelector("td").setAttribute("colspan", "2");
745 | NavbarIndex = 1;
746 | }
747 |
748 | // Since we add a new column to the table for the sidebar, we need to make navbar span all columns
749 | const hnNavBar = hnBody.children[NavbarIndex];
750 | hnNavBar.children[0].setAttribute('colspan', '2');
751 |
752 | const hnContent = hnBody.children[NavbarIndex + 2];
753 | searchQuery.rawQuery = hnBody.querySelector('.fatitem .titleline > a').textContent;
754 |
755 | // Make sure all table data elements are aligned to the top
756 | // (they're centered vertically by default which causes problem when coupled with long sidebar)
757 | hnBody.querySelectorAll(':scope > tr > td').forEach(td => td.style.verticalAlign = 'top');
758 |
759 | if (window.innerWidth < 1200) {
760 | const tr = document.createElement('tr');
761 | const td = document.createElement('td');
762 | td.innerHTML = relevantContent;
763 | td.style = 'padding-top: 1rem;';
764 | tr.innerHTML = '}\n * A Proxy object for the given method, which invokes the given wrapper\n * method in its place.\n */\n const wrapMethod = (target, method, wrapper) => {\n return new Proxy(method, {\n apply(targetMethod, thisObj, args) {\n return wrapper.call(thisObj, target, ...args);\n },\n });\n };\n\n let hasOwnProperty = Function.call.bind(Object.prototype.hasOwnProperty);\n\n /**\n * Wraps an object in a Proxy which intercepts and wraps certain methods\n * based on the given `wrappers` and `metadata` objects.\n *\n * @param {object} target\n * The target object to wrap.\n *\n * @param {object} [wrappers = {}]\n * An object tree containing wrapper functions for special cases. Any\n * function present in this object tree is called in place of the\n * method in the same location in the `target` object tree. These\n * wrapper methods are invoked as described in {@see wrapMethod}.\n *\n * @param {object} [metadata = {}]\n * An object tree containing metadata used to automatically generate\n * Promise-based wrapper functions for asynchronous. Any function in\n * the `target` object tree which has a corresponding metadata object\n * in the same location in the `metadata` tree is replaced with an\n * automatically-generated wrapper function, as described in\n * {@see wrapAsyncFunction}\n *\n * @returns {Proxy}\n */\n const wrapObject = (target, wrappers = {}, metadata = {}) => {\n let cache = Object.create(null);\n let handlers = {\n has(proxyTarget, prop) {\n return prop in target || prop in cache;\n },\n\n get(proxyTarget, prop, receiver) {\n if (prop in cache) {\n return cache[prop];\n }\n\n if (!(prop in target)) {\n return undefined;\n }\n\n let value = target[prop];\n\n if (typeof value === \"function\") {\n // This is a method on the underlying object. Check if we need to do\n // any wrapping.\n\n if (typeof wrappers[prop] === \"function\") {\n // We have a special-case wrapper for this method.\n value = wrapMethod(target, target[prop], wrappers[prop]);\n } else if (hasOwnProperty(metadata, prop)) {\n // This is an async method that we have metadata for. Create a\n // Promise wrapper for it.\n let wrapper = wrapAsyncFunction(prop, metadata[prop]);\n value = wrapMethod(target, target[prop], wrapper);\n } else {\n // This is a method that we don't know or care about. Return the\n // original method, bound to the underlying object.\n value = value.bind(target);\n }\n } else if (typeof value === \"object\" && value !== null &&\n (hasOwnProperty(wrappers, prop) ||\n hasOwnProperty(metadata, prop))) {\n // This is an object that we need to do some wrapping for the children\n // of. Create a sub-object wrapper for it with the appropriate child\n // metadata.\n value = wrapObject(value, wrappers[prop], metadata[prop]);\n } else if (hasOwnProperty(metadata, \"*\")) {\n // Wrap all properties in * namespace.\n value = wrapObject(value, wrappers[prop], metadata[\"*\"]);\n } else {\n // We don't need to do any wrapping for this property,\n // so just forward all access to the underlying object.\n Object.defineProperty(cache, prop, {\n configurable: true,\n enumerable: true,\n get() {\n return target[prop];\n },\n set(value) {\n target[prop] = value;\n },\n });\n\n return value;\n }\n\n cache[prop] = value;\n return value;\n },\n\n set(proxyTarget, prop, value, receiver) {\n if (prop in cache) {\n cache[prop] = value;\n } else {\n target[prop] = value;\n }\n return true;\n },\n\n defineProperty(proxyTarget, prop, desc) {\n return Reflect.defineProperty(cache, prop, desc);\n },\n\n deleteProperty(proxyTarget, prop) {\n return Reflect.deleteProperty(cache, prop);\n },\n };\n\n // Per contract of the Proxy API, the \"get\" proxy handler must return the\n // original value of the target if that value is declared read-only and\n // non-configurable. For this reason, we create an object with the\n // prototype set to `target` instead of using `target` directly.\n // Otherwise we cannot return a custom object for APIs that\n // are declared read-only and non-configurable, such as `chrome.devtools`.\n //\n // The proxy handlers themselves will still use the original `target`\n // instead of the `proxyTarget`, so that the methods and properties are\n // dereferenced via the original targets.\n let proxyTarget = Object.create(target);\n return new Proxy(proxyTarget, handlers);\n };\n\n /**\n * Creates a set of wrapper functions for an event object, which handles\n * wrapping of listener functions that those messages are passed.\n *\n * A single wrapper is created for each listener function, and stored in a\n * map. Subsequent calls to `addListener`, `hasListener`, or `removeListener`\n * retrieve the original wrapper, so that attempts to remove a\n * previously-added listener work as expected.\n *\n * @param {DefaultWeakMap} wrapperMap\n * A DefaultWeakMap object which will create the appropriate wrapper\n * for a given listener function when one does not exist, and retrieve\n * an existing one when it does.\n *\n * @returns {object}\n */\n const wrapEvent = wrapperMap => ({\n addListener(target, listener, ...args) {\n target.addListener(wrapperMap.get(listener), ...args);\n },\n\n hasListener(target, listener) {\n return target.hasListener(wrapperMap.get(listener));\n },\n\n removeListener(target, listener) {\n target.removeListener(wrapperMap.get(listener));\n },\n });\n\n const onRequestFinishedWrappers = new DefaultWeakMap(listener => {\n if (typeof listener !== \"function\") {\n return listener;\n }\n\n /**\n * Wraps an onRequestFinished listener function so that it will return a\n * `getContent()` property which returns a `Promise` rather than using a\n * callback API.\n *\n * @param {object} req\n * The HAR entry object representing the network request.\n */\n return function onRequestFinished(req) {\n const wrappedReq = wrapObject(req, {} /* wrappers */, {\n getContent: {\n minArgs: 0,\n maxArgs: 0,\n },\n });\n listener(wrappedReq);\n };\n });\n\n const onMessageWrappers = new DefaultWeakMap(listener => {\n if (typeof listener !== \"function\") {\n return listener;\n }\n\n /**\n * Wraps a message listener function so that it may send responses based on\n * its return value, rather than by returning a sentinel value and calling a\n * callback. If the listener function returns a Promise, the response is\n * sent when the promise either resolves or rejects.\n *\n * @param {*} message\n * The message sent by the other end of the channel.\n * @param {object} sender\n * Details about the sender of the message.\n * @param {function(*)} sendResponse\n * A callback which, when called with an arbitrary argument, sends\n * that value as a response.\n * @returns {boolean}\n * True if the wrapped listener returned a Promise, which will later\n * yield a response. False otherwise.\n */\n return function onMessage(message, sender, sendResponse) {\n let didCallSendResponse = false;\n\n let wrappedSendResponse;\n let sendResponsePromise = new Promise(resolve => {\n wrappedSendResponse = function(response) {\n didCallSendResponse = true;\n resolve(response);\n };\n });\n\n let result;\n try {\n result = listener(message, sender, wrappedSendResponse);\n } catch (err) {\n result = Promise.reject(err);\n }\n\n const isResultThenable = result !== true && isThenable(result);\n\n // If the listener didn't returned true or a Promise, or called\n // wrappedSendResponse synchronously, we can exit earlier\n // because there will be no response sent from this listener.\n if (result !== true && !isResultThenable && !didCallSendResponse) {\n return false;\n }\n\n // A small helper to send the message if the promise resolves\n // and an error if the promise rejects (a wrapped sendMessage has\n // to translate the message into a resolved promise or a rejected\n // promise).\n const sendPromisedResult = (promise) => {\n promise.then(msg => {\n // send the message value.\n sendResponse(msg);\n }, error => {\n // Send a JSON representation of the error if the rejected value\n // is an instance of error, or the object itself otherwise.\n let message;\n if (error && (error instanceof Error ||\n typeof error.message === \"string\")) {\n message = error.message;\n } else {\n message = \"An unexpected error occurred\";\n }\n\n sendResponse({\n __mozWebExtensionPolyfillReject__: true,\n message,\n });\n }).catch(err => {\n // Print an error on the console if unable to send the response.\n console.error(\"Failed to send onMessage rejected reply\", err);\n });\n };\n\n // If the listener returned a Promise, send the resolved value as a\n // result, otherwise wait the promise related to the wrappedSendResponse\n // callback to resolve and send it as a response.\n if (isResultThenable) {\n sendPromisedResult(result);\n } else {\n sendPromisedResult(sendResponsePromise);\n }\n\n // Let Chrome know that the listener is replying.\n return true;\n };\n });\n\n const wrappedSendMessageCallback = ({reject, resolve}, reply) => {\n if (extensionAPIs.runtime.lastError) {\n // Detect when none of the listeners replied to the sendMessage call and resolve\n // the promise to undefined as in Firefox.\n // See https://github.com/mozilla/webextension-polyfill/issues/130\n if (extensionAPIs.runtime.lastError.message === CHROME_SEND_MESSAGE_CALLBACK_NO_RESPONSE_MESSAGE) {\n resolve();\n } else {\n reject(new Error(extensionAPIs.runtime.lastError.message));\n }\n } else if (reply && reply.__mozWebExtensionPolyfillReject__) {\n // Convert back the JSON representation of the error into\n // an Error instance.\n reject(new Error(reply.message));\n } else {\n resolve(reply);\n }\n };\n\n const wrappedSendMessage = (name, metadata, apiNamespaceObj, ...args) => {\n if (args.length < metadata.minArgs) {\n throw new Error(`Expected at least ${metadata.minArgs} ${pluralizeArguments(metadata.minArgs)} for ${name}(), got ${args.length}`);\n }\n\n if (args.length > metadata.maxArgs) {\n throw new Error(`Expected at most ${metadata.maxArgs} ${pluralizeArguments(metadata.maxArgs)} for ${name}(), got ${args.length}`);\n }\n\n return new Promise((resolve, reject) => {\n const wrappedCb = wrappedSendMessageCallback.bind(null, {resolve, reject});\n args.push(wrappedCb);\n apiNamespaceObj.sendMessage(...args);\n });\n };\n\n const staticWrappers = {\n devtools: {\n network: {\n onRequestFinished: wrapEvent(onRequestFinishedWrappers),\n },\n },\n runtime: {\n onMessage: wrapEvent(onMessageWrappers),\n onMessageExternal: wrapEvent(onMessageWrappers),\n sendMessage: wrappedSendMessage.bind(null, \"sendMessage\", {minArgs: 1, maxArgs: 3}),\n },\n tabs: {\n sendMessage: wrappedSendMessage.bind(null, \"sendMessage\", {minArgs: 2, maxArgs: 3}),\n },\n };\n const settingMetadata = {\n clear: {minArgs: 1, maxArgs: 1},\n get: {minArgs: 1, maxArgs: 1},\n set: {minArgs: 1, maxArgs: 1},\n };\n apiMetadata.privacy = {\n network: {\"*\": settingMetadata},\n services: {\"*\": settingMetadata},\n websites: {\"*\": settingMetadata},\n };\n\n return wrapObject(extensionAPIs, staticWrappers, apiMetadata);\n };\n\n // The build process adds a UMD wrapper around this file, which makes the\n // `module` variable available.\n module.exports = wrapAPIs(chrome);\n} else {\n module.exports = globalThis.browser;\n}\n"]}
--------------------------------------------------------------------------------
18 | - Ability to change defaults to your preference in the extension's popup menu
19 |
20 | ## Installation
21 |
32 |
33 | Available on:
34 | - **Chrome web store**: [HNRelevant](https://chromewebstore.google.com/detail/hnrelevant-related-storie/iajhnkeiioebplnbfkpnlnggkgblmoln)
35 | - **Firefox (Desktop & Android) add-on**: [HNRelevant](https://addons.mozilla.org/en-US/firefox/addon/hnrelevant/)
36 | - **Microsoft Edge add-ons**: [HNRelevant](https://microsoftedge.microsoft.com/addons/detail/lfmnjojalnklnkbfcikabochcjgllngc)
37 | - As a **Userscript**. This option also has the benefit of supporting further browsers:
38 | 1. Make sure to have one of the userscripts extensions installed e.g: Tampermonkey, Violentmonkey, or Greasemonkey.
39 | 2. The userscript file can be found here [HNRelevant.user.js](https://github.com/imdj/HNRelevant/raw/main/HNRelevant.user.js).
40 | 3. Load the script into the extension of your choice.
41 |
42 | ## How it works
43 | It's based on [HN algolia search API](https://hn.algolia.com/api) and uses the submission title as its initial query
44 |
45 | ## License
46 | Released under the [MIT License](http://www.opensource.org/licenses/MIT). See [LICENSE](LICENSE) file for details.
47 |
--------------------------------------------------------------------------------
/scripts/utils.js:
--------------------------------------------------------------------------------
1 | const DEFAULT_PREFERENCES = {
2 | mode: "auto", // "auto" or "manual"
3 | rawQuery: "",
4 | query: "",
5 | type: "similar", // "similar" or "verbatim"
6 | numOfResults: 15,
7 | hidePostswithLowComments: true,
8 | minComments: 3,
9 | date: {
10 | start: 0,
11 | end: Math.floor(new Date().getTime() / 1000)
12 | }
13 | };
14 |
15 | function getDefaultPreferences() {
16 | return {
17 | ...DEFAULT_PREFERENCES,
18 | date: {
19 | ...DEFAULT_PREFERENCES.date,
20 | end: Math.floor(new Date().getTime() / 1000)
21 | }
22 | };
23 | }
24 |
25 | async function loadPreferences() {
26 | const stored = await browser.storage.sync.get('hnrelevant');
27 | const storedPreferences = stored.hnrelevant;
28 |
29 | if (!storedPreferences) {
30 | return getDefaultPreferences();
31 | }
32 |
33 | const mergedPreferences = {
34 | ...getDefaultPreferences(),
35 | ...storedPreferences,
36 | date: {
37 | ...getDefaultPreferences().date,
38 | ...(storedPreferences.date || {})
39 | }
40 | };
41 |
42 | // Save the merged preferences back to ensure new fields are persisted
43 | savePreferences(mergedPreferences);
44 |
45 | return mergedPreferences;
46 | }
47 |
48 | function savePreferences(preferences) {
49 | browser.storage.sync.set({ hnrelevant: preferences });
50 | return preferences;
51 | }
52 |
53 | function optimizeSearchQuery() {
54 | const textAnalyzer = new TextAnalyzer();
55 | searchQuery.query = stripYearFromTitle(searchQuery.rawQuery);
56 |
57 | const title = document.querySelector('.fatitem .titleline > a').textContent;
58 | const topLevelComments = document.querySelectorAll('td.ind[indent="0"] + td + td .commtext');
59 | let keywords = [];
60 |
61 | // Use comments only showing results for the current discussion
62 | if (searchQuery.rawQuery === title) {
63 | keywords = textAnalyzer.extractKeywords(searchQuery.query, topLevelComments);
64 | searchQuery.query = keywords.join(' ');
65 | }
66 |
67 | return searchQuery.query;
68 | }
69 |
70 | // Get relative time from timestamp
71 | function timestampToRelativeTime(timestamp) {
72 | const now = new Date();
73 | const date = new Date(timestamp);
74 | const diff = now - date;
75 | let rtf = new Intl.RelativeTimeFormat('en', { numeric: 'always' });
76 |
77 | const units = {
78 | year: 365 * 24 * 60 * 60 * 1000,
79 | month: 30 * 24 * 60 * 60 * 1000,
80 | day: 24 * 60 * 60 * 1000,
81 | hour: 60 * 60 * 1000,
82 | minute: 60 * 1000
83 | };
84 |
85 | for (const unit in units) {
86 | if (diff > units[unit]) {
87 | const time = Math.round(diff / units[unit]);
88 | return rtf.format(-time, unit);
89 | }
90 | }
91 |
92 | return rtf.format(-Math.round(diff / 1000), 'second');
93 | }
94 |
95 | // i.e. "Title (2021)" -> "Title"
96 | function stripYearFromTitle(title) {
97 | return title.replace(/\s\(\d{4}\)$/, '');
98 | }
99 |
100 | // Render dom element for a search result
101 | function displayResult(object) {
102 | const element = document.createElement('li');
103 | element.className = 'result';
104 |
105 | const titleContainer = document.createElement('span');
106 | titleContainer.style.display = 'block';
107 | titleContainer.classList.add('titleline');
108 | const link = document.createElement('a');
109 | link.href = object.url ? object.url : 'item?id=' + object.objectID;
110 | link.textContent = object.title;
111 | link.rel = 'no-referrer';
112 |
113 | titleContainer.appendChild(link);
114 |
115 | if (object.url) {
116 | const domainContainer = document.createElement('span');
117 | domainContainer.classList.add('sitebit', 'comhead');
118 | const domain = document.createElement('a');
119 | domain.href = 'from?site=' + (new URL(object.url)).hostname.replace('www.', '');
120 | const domainChild = document.createElement('span');
121 | domainChild.classList.add('sitestr');
122 | domainChild.textContent = (new URL(object.url)).hostname.replace('www.', '');
123 |
124 | domain.appendChild(domainChild);
125 | domainContainer.appendChild(domain);
126 | domain.insertAdjacentText('beforebegin', ' (');
127 | domain.insertAdjacentText('afterend', ')');
128 | titleContainer.appendChild(domainContainer);
129 | }
130 | element.appendChild(titleContainer);
131 |
132 | const description = document.createElement('span');
133 | description.className = 'subtext';
134 | const author = document.createElement('a');
135 | author.href = 'user?id=' + object.author;
136 | author.textContent = object.author;
137 | const comments = document.createElement('a');
138 | comments.href = 'item?id=' + object.objectID;
139 | comments.textContent = object.num_comments + ' comments';
140 | description.insertAdjacentText('afterbegin',
141 | object.points + ' points '
142 | + 'by '
143 | );
144 | description.appendChild(author);
145 | description.insertAdjacentText('beforeend', ' | ');
146 |
147 | const timeurl = document.createElement('a');
148 | timeurl.href = 'item?id=' + object.objectID;
149 | timeurl.title = object.created_at;
150 |
151 | const time = document.createElement('time');
152 | time.dateTime = object.created_at;
153 | time.textContent = timestampToRelativeTime(object.created_at);
154 | timeurl.appendChild(time);
155 |
156 | description.appendChild(timeurl);
157 |
158 | description.insertAdjacentText('beforeend', ' | ');
159 | description.appendChild(comments);
160 | element.appendChild(description);
161 |
162 | return element;
163 | }
164 |
165 | function updateDateRange() {
166 | const dateRange = document.getElementById('dateRangeDropdown').value;
167 | const startDate = document.getElementById('startDate').value;
168 | const endDate = document.getElementById('endDate').value;
169 |
170 | searchQuery.date.end = Math.floor(new Date().getTime() / 1000);
171 |
172 | switch (dateRange) {
173 | case 'Past week':
174 | searchQuery.date.start = searchQuery.date.end - 604800;
175 | break;
176 | case 'Past month':
177 | searchQuery.date.start = searchQuery.date.end - 2592000;
178 | break;
179 | case 'Past year':
180 | searchQuery.date.start = searchQuery.date.end - 31536000;
181 | break;
182 | case 'Custom':
183 | searchQuery.date.start = Math.floor(new Date(startDate).getTime() / 1000) || 0;
184 | searchQuery.date.end = Math.floor(new Date(endDate).getTime() / 1000) || searchQuery.date.end;
185 | break;
186 | default:
187 | searchQuery.date.start = 0;
188 | }
189 | }
190 |
191 | // Update sidebar content
192 | function updateResults() {
193 | document.getElementById('hnrelevant-results').innerHTML = '';
194 | searchQuery.query = optimizeSearchQuery();
195 |
196 | browser.runtime.sendMessage({id: itemId, object: searchQuery}).then((result) => {
197 | const list = document.createElement('ul');
198 | list.id = 'hnrelevant-results-list';
199 |
200 | // if no results, display a message
201 | if (result.hits.length === 0) {
202 | const element = document.createElement('li');
203 | element.className = 'result';
204 | element.style = 'padding: 5px 0; text-align: center; white-space: pre-line;';
205 | element.textContent = searchQuery.type === 'verbatim' ? 'No matching results found.\r\nTry a different query or switch to \'Similar\' search.' : 'No results found. Try to customize the query.';
206 | list.appendChild(element);
207 | }
208 | else {
209 | result.hits.forEach(hit => {
210 | const element = displayResult(hit);
211 | list.appendChild(element);
212 | });
213 | }
214 | document.getElementById('hnrelevant-results').appendChild(list);
215 | });
216 | }
217 |
--------------------------------------------------------------------------------
/scripts/main.js:
--------------------------------------------------------------------------------
1 | let searchQuery = getDefaultPreferences();
2 |
3 | let itemId = (new URLSearchParams(document.location.search)).get("id");
4 |
5 | const relevantContent = `
6 | 
24 | 
27 | 
30 |