plibither8 / refined-hacker-news

✨ Hacker News, but refined — Interface tweaks and features to make the HN experience better

Refined Hacker News

✨ Browser extension that adds useful features and tweaks a few stuff on Hacker News to make the experience better... without changing the look and feel.

The minimalist design of Hacker News is best at offering news the way we like it. Yet there are a few small interface tweaks and additional features that can drastically improve our experience while browsing through items and comments which this extension implements.

Hopefully, in due course, a few of these tweaks can be implemented by Hacker News themselves. You can help too by emailing [email protected]!

Inspired by Sindre Sorhus's extension Refined GitHub.

Contents

• Contents
• Install
• Highlights - Added features - UI tweaks - More actions - More info at a glance - Miscellaneous - Keyboard bindings - On items and comments - On input fields - Site-wide navigation - Abandoned features
• Customization and Options
• Contribute
• Donate
• Extension Permissions
• License

Install

• Chrome extension
• Firefox add-on
• Opera extension: Use this Opera extension to install the Chrome version.

Highlights

Reply to comments without leaving page	Navigate through items and comments using your keyboard

Easily favorite items and comments	Hide and sort stories, and auto-refresh the page from the options bar

Show user or item information when hovering over the links	Highlight new, unread comments on subsequent visits

Added features

• reply-without-leaving-page Reply to a comment, edit and delete your comment just below the parent comment, without leaving the page.
• auto-refresh Options bar: Auto-refresh stories on the page periodically, after a fixed interval, without reloading the page.
• hide-read-stories Options bar: Hide/show stories already opened by you.
• sort-stories Options bar: Sort stories basis of their score, age, or by their default rank.
• fetch-submission-title-from-url When submitting an item, get the title of the page of the URL entered.
• list-hn-polls-separately Show HN Polls on a separate page (like Show HN, Ask HN, etc). Linked on topbar: https://news.ycombinator.com/#polls.
• prefill-submit-title Prefill submission title field with "Show HN: " or "Ask HN: " when 'Submit' link is accessed/clicked from Show HN or Ask HN pages.
• past-choose-date Choose a custom date in /front to go back to that date.

UI tweaks

• change-dead-comments-color If "showdead" is enabled in user settings, color of dead comments changes to light-red (#d89899) instead of the barely visible light-grey (#dddddd).
• comments-ui-tweaks Tweaks include:
  • Add border to indentation to make to show indent separation between comments.
  • Custom indent-width (default is 40px), which can be set using the extension popup.
  • Highlight item's original poster, displayed as [op] next to username.
  • Make <pre></pre> tags more visible.
• highlight-unread-comments Highlight new and unread comments after your second and subsequent visits to the comments page of an item. Data resets after three days.
• backticks-to-monospace Convert backticks-wrapped (`like this`) inline text to monospace (like this).
• linkify-user-about Linkify all links and emails IDs that are on the "about" of the user's profile.

More actions

• key-bindings-on-items Enable key bindings on items and comments to improve navigation and item/comment-related actions. Go to mappings.
• key-bindings-on-input-fields Enable key bindings/shortcuts on input fields. Go to mappings.
• site-navigation-key-bindings Universal, site-wide key bindings/shortcuts to quickly navigate to a page (eg. Home, Show HN, Threads etc.). Go to mappings.
• more-accessible-favorite Add a 'favorite' button next to items and comments to quickly favorite them. Go to https://news.ycombinator.com/favorites?id=<your-username> to view favorite-d items.
• more-accessible-flag Add a 'flag' button next to comments to quickly flag them.
• archive-submission Add "archive" button at the top of the comments page of a submission to view the archived version of the story's webpage or archive the webpage to the Wayback Machine.
• click-comment-indent-to-toggle Click indentation of the comment (on the left of it) to toggle (show/hide) that comment.
• click-rank-to-vote-unvote Increase hit-area of upvote button by clicking the rank number of the item to upvote it too.
• open-story-links-in-new-tab Open items in a new tab, instead of the same tab.
• preview-and-set-top-bar-color Quickly "test" topbar colors and set them on https://news.ycombinator.com/topcolors. Note: you must have 250+ karma to set a custom topcolor.
• toggle-all-comments-and-replies Clickable button to toggle all comments on the page, or all replies to a certain comment.

More info at a glance

• load-more-links-in-navbar Click "load more" on the topbar/nav bar to show more links.
• profile-links-dropdown Show profile-specific pages in a dropdown when clicking your username on the top-right of the page, instead of directly opening the the profile page.
• show-item-info-on-hover Hover over a Hacker News item link in the comments to quickly display the item's details.
• show-similar-submissions List all HN submissions that are duplicates/have been posted before with the same URL, at the bottom of the comments.
• show-top-leaders-karma Load and show karma of the top-ten leaders on HN's leaderboard (not shown by default).
• show-user-info-on-hover Hover over a Hacker News user link next to item or in the comments to quickly display the users's details.

Miscellaneous

• input-field-tweaks Tweaks include:
  • Show how many characters are left in the 'title' field when submitting an item.
  • Increase width of 'title' field dynamically.
  • Increase height of any textareas (even those that are dynamically created), dynamically.
• on-link-focus-comment Navigate to that specific comment when clicking the 'on: ' link.

---

Keyboard bindings

On items and comments

On items/stories:

Key-binding	Action
J	Next item (down)
K	Previous item (up)
Enter Ctrl/Cmd+Enter	Open link and focus tab Open link in the background
Esc	Un-highlight item
U	Upvote item
F	Favorite item
C Ctrl/Cmd+C	Open item's comments on same tab Open item's comments on new tab
Shift+X	Flag/unflag item
Shift+H	Hide item

On comments:

Key-binding	Action
J Shift+J	Next comment (down) Next direct sibling comment
K Shift+K	Previous comment (down) Previous direct sibling comment
Enter	Toggle comment
Esc	Un-highlight comment
U	Upvote/unvote comment
D	Downvote/undown comment
R	Reply to comment
F	Favorite comment
Shift+X	Flag/unflag comment
0 to 9	Open numbered/index reference link in the comment Eg: [1] https://mihir.ch ...

On input fields

Key-binding	Action
Ctrl/Cmd+Enter	Submit form
Ctrl/Cmd+I	Italicise selected portion (wrap selected text in asterisks)

Site-wide navigation

Key-binding	Action
Alt+H	Home
Alt+S	Submit
Alt+N	New
Alt+O	Show HN
Alt+A	Ask HN
Alt+P	Profile
Alt+T	Threads

---

Abandoned features

• blur-story-scores
• custom-font-face
• hide-bad-words
• load-more-stories
• scale-font-size
• show-karma-left

Customization and Options

Extension options can be found in the extension's popup. There, you can

• specify which features you want to disable by entering features' IDs (listed above), preferably listed on new lines
• specify custom CSS, which is useful to override CSS implemented by this extension, or any other UI tweaks you prefer.

Contribute

Issues and feature requests can be created on the issues page.

For development contribution, please refer to the contribution guide.

Donate

Refined Hacker News was made by me during my study-breaks and free time. If you like and have enjoyed it, please consider donating a small amount (any amount will be really appreciated!) to support and sustain its development. Thank you!

Extension Permissions

No data is ever uploaded to a remote server, or is sent anywhere else. All data that is used by this extension is stored locally.

storage Required to save extension options in sync storage area so that your options are synced across devices. Also used to save other data such as list of read comments (highlight-unread-comments) locally.

history Required for hide-read-stories feature. The feature needs to check whether the story has been visited by you in the past, that is, whether that story is in your history.

tabs Required to open a link in a new tab, but in the background. Also required to send and receive data between the extension popup, background scripts and the active Hacker News tabs.

*://news.ycombinator.com/* Required to fetch subpages, submit forms, inline replies, etc.

*://hacker-news.firebaseio.com/v0/* Hacker News API - required to fetch item and user details.

*://title.mihir.ch/* Required by the fetch-submission-title-from-url feature to fetch the title. Source: plibither8/url-title-api.

*://wayback.now.sh/ Required by archive-submission to view archived version of webpage or save the webpage to the Wayback Machine. Source: plibither8/wayback.

*://hn.algolia.com/* Required by show-simillar-submission and list-hn-polls-separately features to get filtered search results.

License

MIT

refined-hacker-news's Issues

Typing 'r' in inline reply textbox opens/collapses reply box for highlighted item

Issue

When using keyboard navigation, pressing r opens/closes the inline reply textbox. When typing in the expanded textbox, typing r collapses that textbox and deletes the comment.

If another item is highlighted, typing r opens that textbox and focuses it.

Aside: Other navigation still happens when typing, like j triggering next item.

Proposed fix

Disable keyboard shortcuts while typing in a reply textbox.

Aside: May be good to cache replies so that if the reply box is closed and reopened the reply is still there. Don't want people accidentally throwing away long replies.

OS / Browser

Windows 10, Chrome.

Extend Vertical Line on Parent Comments Thru Child Comments for Readability

The variable indent helps separate the parent-child hierarchy, but extending the left borders of the parents would help track threads even more clearly! If this is easy enough to implement, it would be a huge improvement to readability!

I mocked up an example in the attached image...

can't enter "i" in the reply box

when ever I enter "i" or "I" in the reply textbox the page redirects to https://news.ycombinator.com/undefined

Keep inline editing of comments on same page

When clicking edit for a comment the inline editing form shows (just like for creating a comment), but after clicking the Update button HN navigates to the comment editing page (https://news.ycombinator.com/edit?id=xxx) instead of staying on the original page. Acoording to the HN thread for this that's a backend issue, it's how Hacker News handles the forms after they have been submitted

Feature request: mute users

Hey Mihir / @plibither8

I hope you're doing great. I was wondering if you were open to the idea of adding the ability to mute users? When muting a user, his/her comments would be collapsed by default.

I recognize that it is not necessarily a good thing to have, but I'd be willing to develop it like I did collapse-root-comment. Ofc I'd prefer you telling me what you think before I start

Best,
jerome

Add small delay in opening "user info" card on hover

Preferably add a small delay (~200 millisecond) in opening the "user-info" div. When the cursor has been over the username for more than set threshold, then only display the card, otherwise abort.

Feature suggestion: Ability to hide HN advertising aka "job ads"

Hi,
HN is often full of YC companies' job ads since they get a free boost on the front page. And the only thing you can do is hide them.
I wish there was a way to hide them automatically. Can someone make it happen?
Thanks for an amazing extension ❤️ !

Safari?

Pass arguments (including user detection, login requirement etc.) into `add` method of feature via object

Don't allow key-bindings when textarea is active

Popup box border-color should match topcolor set by user

Add support for "command" key for macOS user

Add code comments on feature files detailing ID, purpose, active pages etc

Something like:

/*
 * ID: auto-refresh
 * Purpose: Auto-refreshes stories on the page every 'n' seconds
 *          as specified by the in the options bar
 * Pages: ...
 */

Feature request: configurable keybindings

This can be done similarly to https://github.com/infokiller/web-search-navigator by adding an options page and storing the options in browser.sync.

Happy to send a PR if you are open to merging.

Related HN comment: https://news.ycombinator.com/item?id=20189188

Thanks!

Highlighted comment text inserted as quoted text incorrectly

The add-on has the current behavior:

When a comment's text is highlighted, it will be included as quoted text with syntax

> *highlighted text is now italicized and the the > is only present on first line and does not appear again*

However, the more standard method of quoting a comment on HN is the following:

> Each block of text uses the > on the first line. There are no italics unless they were used in the quoted text.

> Additional blocks of text with > on the first line.

Can this be changed? It is very convenient to just highlight and click reply and it seems like it is already very close to being perfect.

Bug: Ctrl opens 'undefined' page

On Firefox 60.8.0esr with version 19.7.27.1549 of the extension, when I click on the Ctrl button, I'm redirected to https://news.ycombinator.com/undefined.

If I disable site-navigation-key-bindings.js in the settings, the problem disappears.

Features should not cause layout flap as they load

Just trying this now, and the fact that enhancements take time to load, but they modify the document layout, causing layout flap, makes it quite painful to use.

A couple that immediately stood out:

• .__rhn__comment-indent uses border-right: 1px solid #ccc which increases its width by one pixel, making the comment shift a pixel to the right (and consequently occasionally reflow the text as well). Use box-shadow: inset -1px 0 #ccc instead so that the border doesn’t affect the layout.

• “toggle all comments” causes a big vertical jump; maybe float it right on the “add comment” button or the .subtext, or disable it by default, or statically reserve the space in CSS that will be in the first contentful paint, and then be replaced by the actual button/link once it can be added.

There may be others. I’ve tried it for less than four minutes so far.

Firefox support for syncing/storing options

Currently, Firefox is not storing or syncing the extension options via webext-options-sync. This should be looked into, keeping in mind how Refined GitHub does it.

Feature Request - Navigation Keymaps

Hi, I'd love to have keymaps in order to easily navigate to HN sections, for example alt-h for home and alt-t for threads, maybe alt-s for submit and alt-p for profile

Bug: Profile Links Dropdown not working

A feature I really enjoy in HNES is that a logged-in user has a drop-down menu on-hover by their name in the upper-right, which lets you link to the various user pages that are available under the user ID link, including:

  | change password
  | submissions
  | comments
  | hidden
  | upvoted submissions / comments (private)
  | favorite submissions / comments (shared)

It makes it much easier to navigate previous conversations, etc. Great work on RHN!

Clicks should only be intercepted if unmodified

Take the “reply” link as an example. (There may be others, but I know this one.) If I didn’t use the left mouse button, or if I am holding down a modifier key, it should let the browser do its thing rather than showing the form inline. Ctrl-click, Cmd-click and middle-click, for example, will most likely open the link in a new tab.

This is the function we use at FastMail:

function isClickModified(event) {
    return !!event.button ||
        event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
}

… then almost all click handlers start with “if (isClickModified(event)) { return; }”.

Feature request: collapse all replies

Different than hide all: make all replies collapsed by default. This would be a huge improvement for me, since I really don't like seeing replies to comments, in the usual case. Thanks!

Handle URL query params more neatly in the Polls page

"Hide stories" not hiding text posts

key-bindings-on-items: Navigate through same-indented comments when SHIFT key is pressed

Ctrl+Enter in replies/comments/submissions to submit form

Commonly used Ctrl+Enter key combination for submitting forms. Implementation separately as a new feature.

Toggle vote of active element by hitting "U" hotkey

Currently, the U shortcut when pressed only upvotes the active item. If the item is already upvotes, pressing U should un-vote it.

Feature request: configurable upvote/downvote arrow size

Make upvote/downvote arrow icon size configurable. Quite a few people on HN pointed out that the default size of the arrows is too small, and I agree with it myself. If the feature request is approved, I am willing to submit a PR for it myself.

Flag any comment from the comments page

Hi,
Currently to flag a comment (for spam) you have to open the comment in the new page to reveal the 'flag' link. Could we have it so that you can flag a comment from the story's comment page itself?
Thanks!

Build issue: stylus: command not found

Trying to build the repo on macOS. Ran npm install successfully. Afterwards, trying to run either npm run build or npm run watch gives the stylus: command not found error.

Suggestion: Have an option to expand all the downvoted comments

Hi,
Currently, HN (and RHN) hides all the comments if the parent comment has been downvoted. You have to click it to expand it and see what it's about.
Can we have an option to automatically expand all these comments?
Thanks!

"F" to favorite comment not working

Enable favorite key-binding on `specialComments` and "favorites" page

Feature request: Linkify footnotes and markdown links

Footnotes:

This [1] is a good website.
[1] https://github.com

Here it would be great to be able to click on the first [1] and be taken to github.com.

Markdown:

[This](https://github.com) is a good website.

Here it would be great to render a link the way it appears here.

It might also be nice to just render all comments as Markdown, but that's a separate feature...

Feature request: Open page in Internet Archive

Shamelessly stolen from this HN comment. It'd be cool if there was a link that would open a link using the Internet Archive; it could even include the submission time to automatically navigate to the closest snapshot 🙂

Feature request: hide-paywalled-sites

Removes all links from wsj, nytimes, bloomberg, etc

Paywalled sites are a constant source of contention. From HN FAQ:

" It's ok to post stories from sites with paywalls that have workarounds.
In comments, it's ok to ask how to read an article and to help other users do so. 
But please don't post complaints about paywalls. Those are off topic. "

And yet they are constantly complained about, most workarounds don't work, and the 'web' link hasn't worked in a long time. HN mods don't care.

Feature request: Toggle child comment's root

Hi @plibither8

Quick thank you for your work, I've found this extension to be a great help navigating HN comments.

I've made a few CSS changes which fix some issues I had (see screenshot below):

• easier to collapse top-level comment
• easier to see at which indent level is the comment I'm reading

There is one feature I miss from a previous userscript: the ability to collapse all comments until the root of the tree of the current comment. For illustration purpose:

• Comment 1
• Comment 1.1
• Comment 1.2
• Comment 2
• Comment 2.1
• Comment 2.1.1

If I click on this new 'collapse parents' on comment 1.2, it would collapse all Comments 1, 1.1, 1.2. Ditto for 2.1.1 and 2, 2.1
I hope this is clear :)

In my vision, this feature would either be a button at the right of HN's default collapse button, or the top n pixels of the clickable side rail you've added yourself.

I figure I could hack something and submit a PR but I'm not quite sure I have the capacities to incorporate into your system. I suppose I'd have to getTopLevelComments() and find somehow the one that is the current comment's grand-parent, and then toggle that comment through its toggle button

Anyway, if you can show me some pointers I might be able to push something. Otherwise I'm available if you have questions :)

Better Collapse Top Level Comment

Its very easy to collapse child comments by clicking anywhere to the left of the comment indentation (click-comment-indent-to-toggle feature). But for the parent comment its very difficult as you have to click exactly on the bar shown for indentation. Is it possible to increase the surface area where if clicked the top level comment closes?

Long word strings overflowing in user/item info card (hover)

Don't auto-refresh if internet connection is disrupted

When internet connection is disrupted, auto refresh is not able to fetch new items and produces the following error:

Uncaught (in promise) TypeError: Failed to fetch

Check for active and working internet connection before attempting a fetch.

"Hide All" feature

The Hide keyboard shortcut is great! It'd be nice to have a hide all / hide what's on the current page kind of functionality, so you don't always see the same thing when you come back to the site :)

Feature request: HNES ui

First off, excellent work on this extension!

I come from being a user of HNES. Due to the fact that the HNES author is far less active (I have several open PRs there) and the codebase is quite old with a lot of bugs, I'd like to jump ship.

That said, I've grown quite used to the HNES UI over time. Here is an example screenshot, actually with both extensions loaded (surprised and impressed it works at all). As you can see, the font is larger and there is some nice readability improvements over the 'wall of text'.

I guess my question/hope is... would you be willing to accept some PR's to drive the UI closer to HNES? With your very nice plugin system, it can be done as options. One other thing, can we consider adding support for extensions written in Typescript (or building the whole project in typescript)?

"Reply" button not being shown in some cases

I cannot see the reply button on certain comments, but I can't determine what the pattern might be.
I tried the site without the extension installed and I could reply. Here's an example:

key-bindings-on-items: Scroll to top of the page "UP" key is pressed at index 0

“Features to disable” textbox loses keypresses if you type quickly

My guess, without referring to code, is that there’s some sort of slow two-way data binding involved. If I type at even fifty words a minute it still loses the occasional keypress; at a hundred words a minute it loses quite a few.

Bug: Ctrl+Enter not opening story link in new tab

Refine reference link parser to include more variations

Variations include:

• [1]https://google.com Fixed in #16
• [1]. https://google.com Fixed in #16
• 1. https://google.com Fixed in #16
• [1] https://google.com [2] https://bing.com

Add short explanation on permissions

I saw the extension on HN and it looks great and I want to use it, but I'd like to know why it needs to access my browsing history. Will it send the data anywhere? Perhaps there could be an explanation in the README or the extension page.

Feature: Highlight new (unread) comments since last page visit

Feature request: tag users