Show HN: Browser Extension to Refine the HN Experience | Hacker News Reader

Show HN: Browser Extension to Refine the HN Experience

github.com

259 pointsplibither8122 comments

Hello everyone, OP/developer here!

If you are already using the extension, you can see the "[op]" beside my username too! ;)

There are many extensions out there that add quite a few features to Hacker News, but they also always do one thing, which I have realised, is a slippery slope: changing the minimalistic design and style of Hacker News.

I created this extension with one thing in mind: I am NOT going to mess around with the overall design or style of Hacker News. It's sacrosanct.

There are quite a few feature additions and interface tweaks that are implemented, a few of the important ones being:

* Reply to a comment or edit/delete your comment without leaving the page (do it inline)

* Navigate through items and comments using your keyboard (vim keybindings)

* Sort/hide stories and auto-refresh periodically

...and many, many more. The GitHub README details all of them.

The extension is available on both Chrome and Firefox. Hope you all enjoy it!

Did you ever use "Hacker News Enhancement Suite" otherwise known as HNES? That extension had a few of these same features.

Yup, I've used that extension briefly in the past. It certainly provided nice features, but as with other similar extensions, it also altered the style quite a bit, which I wasn't too fond of.

I use HNES, but the only feature in it I care about is tagging users. I very much wish I could turn off all of the other features, especially its custom styles. If you were to add the ability to tag users to RHN, I'd be one happy camper!

Hey, thanks for the suggestion! Can you create a feature request on GitHub regarding this, it'll help me track the issues better. Thanks!

Tagging users would be a very useful feature to me.

Hey, thanks for the suggestion! Can you create a feature request on GitHub regarding this, it'll help me track the issues better. Thanks!

I use HNES and love it. But sadly it seems to be abandoned and hasn't kept up with a few changes HN have made along the way.

I'll give this new add-on a spin to see how things go.

Unfortunately for whatever reason firebaseio.com (which gets called by your extension) is blocked in my country[0]. As a result, this extension doesn't work on my end. But bravo for this! I personally very much liked the highlighted unread comments and being able to reply without living the page. The hovering thing bothers a bit tho[1].

[0]: Then again, CloudFlare gives me an access denied upon opening hn.algolia.com as well.

[1]: Interestingly, the extension suggests "show-user-info-on-hover" to be disabled!

This is rather strange. Which country are you in, may I ask? Also, doesn't this hamper with many other websites you might visit that depend on Firebase?

Currently I'm located in Iran, and yes, many websites that depend on Firebase get automatically blocked (the same goes for medium.com). On top of that, many other websites decide not to provide service to Iran in the first place, so...

That's unfortunate. Also just a small clarification: I don't recommend disabling the "show-user-info-on-hover" feature, it's just there as an example :P

Maybe a stupid question, but why is the extension even talking to Firebase? Skimming the feature list, all of these look like something that should work without connecting anywhere else but HN itself.

The HN API is on Firebase, which is used to fetch details of users and items. It is used, as of now, in the following features:

  comments-ui-tweaks
  show-item-info-on-hover
  show-top-leaders-karma
  show-user-info-on-hover

I know you don't want to mess with interface, but have you considered a minimal dark theme? Think it might be nice.

I certainly have! I've tried a few color combinations and themes, but nothing ever fits right. You can create an feature request on GitHub so others can contribute on this idea too :)

For Firefox, there is DarkReader [1] A small sub-set of websites will be slowed down or break, but you can enable/disable per domain.

[1] - https://addons.mozilla.org/en-US/firefox/addon/darkreader/?s...

This one's really cool:

https://userstyles.org/styles/114659/hacker-news-terminal

Just installed. Thanks, this is an excellent addition. Good job!

This is excellent. I appreciate that you've made Firefox a first-class citizen and even added instructions for Opera users. Very nice!

Thank you very much!

> I created this extension with one thing in mind: I am NOT going to mess around with the overall design or style of Hacker News. It's sacrosanct.

I wish you would do something about the voting buttons and the expand/collapse buttons. They're way too tiny and way too close to other elements in the default scheme used by HN. This is a big deficiency I see with the default HN interface, which makes it less usable as well as less accessible.

Edit: I also see a 3/28 counter and a spinning icon on the top left of the page that doesn't change regardless of which post I'm browsing. Sometimes it disappears if I navigate to another post or page, but it looks like it starts with 0/28 for every post. [This is on Brave right now; no issues with connectivity or connection speed; dropdown menu from the username works.]

Ha, I made an extension with the same idea as OP to solve just the problem you mention - at least on devices with touch screens (I'm using it on Firefox for Android).

If you're using Firefox, you can install it here: https://addons.mozilla.org/en-GB/firefox/addon/sihn/

Hi! The feature "click-rank-to-vote-unvote" increases the hit-area of the upvote button, so you can click the "rank" of the item to upvote the item.

Hey, regarding your update, could you create an issue on GitHub? It'll be easier to discuss it there.

The counter "counts" the feature that have been loaded. It looks like you are stuck on the "highlight-unread-comments" feature. Could you open the console and check for error messages there?

For expand/collapse, one of the very few things I've liked about "new" Reddit is being able to click the indent bar alongside comments to show/collapse. Something like that in this for HN would be helpful.

Hey! I think what you want is already implemented in the feature "click-comment-indent-to-toggle".

The “click on the indent bar to show/collapse” on reddit was something unintuitive for me initially. Moving from desktop where there is a clear arrow icon for that, I searched online on how to do this in the interface without the triangles. :)

Seconding this, the buttons are way too tiny. On mobile they are almost impossible to hit on smaller text settings.

Thesis: discussion software evolves towards replicating the feature set of slrn reading Usenet, only with better page design.

This is no exception.

Cool, I made one with the exact same principles to scratch a personal itch - inline reply is something I was hoping to add some time.

Anyway, I'd love to be able to just use someone else's extension :) Mine makes up/downvote and collapsing buttons easier to hit on mobile, links to parent/root comments, and rewrites Google AMP links to regular links. It's open source, so feel free to incorporate those features in yours: https://gitlab.com/vincenttunru/sihn

Thanks a lot for this! I'll sure look into it :)

I have not installed yet, but may I suggest one feature, assuming it does not exist yet?

Hide Posts Above

It hides all posts in the feed above the selected post.

This is a feature in the reddit iOS Apollo app. This not only makes the site less stale, but also might help alleviate “frontpage upvote bias” where great items that are not on the first couple pages don’t get many views and upvotes.

Hi! It be great if you could elaborate on the implementation of this feature. I don't currently have an iOS device to see the feature in the. Better still, it'd be also great if you could submit a feature request on GitHub so it helps me to track the issues.

Good work( using this comment to test out the inline reply and while typing i noticed , that , hey this works " )

Editing the same comment however goes to new page but, Good Work.. coffee on me

testing the reply feature

Thank you! The #1 feature that is getting me to install is 'Next comment with same indentation and parent'. I like to skip a lot of the nested replies on un-interesting top level comments.

Yup, that was my motivation to build that feature too!

Isn't that achieved by minimising too?

Would you consider adding "remove all integer counts" (karma, vote, comment, all of it)?

Interesting, since this is one of the feature that I had abandoned. I thought that such a feature would needlessly be a bit too aggressive if you get what I am saying.

Nevertheless, in the "custom styles" input in the popup, you enter the following to blur out all points, comments etc:

  span.score,
  td.subtext a:last-child {
   filter: blur(3px)
  }

I don't get what you're saying, unfortunately.

He is saying you can already do what you want to do. His plug-ins let you add custom styles. The place where the custom styles go is inside a text box that appears when you click on the plug-in's icon.

Just copy the style he provides above, paste it in the custom style field, and it will blur the "integer counts" just like you asked!

Thanks for explaining :)

To clarify the actual question asked:

What did you mean when you said it would be too “aggressive, if I get what you’re saying” - which I do not.

(Also, that CSS exposes a coding bug in the HN site re: counts, at least as of a month ago when I last tested something like it.)

Awesome! Thanks for giving instructions for Opera, I've been using it for my daily work for a few weeks now.

The extension is available on both Chrome and Firefox

Slightly off-topic, but why not Safari? Is it harder to program plug-ins than the others? Not enough market share? Just don't have the hardware?

This is fairly common for extensions to be on Chrome/Firefox but not Safari, unfortunately. Firefox's WebExtension APIs are mostly code-compatible with the extension API supported by Google Chrome and Opera, with a few exceptions [1].

Safari uses its own Safari Extensions JS, so while it may be possible to share some resources (e.g. images, HTML content), the js work needs to be undertaken as a separate development project, unless you use/build a polyfill.

[1] https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/Web...

The JavaScript Safari Extension API is deprecated and extensions using it do not work in Safari 13.

Safari has traditionally used a different extension API, which coupled with this smaller adoption has hindered the progress of extensions in the platform. A recent change to an app extension model has hurt the ecosystem even more, as it killed a significant portion of the already few extensions that used to exist.

Thanks, I like the 'highlight new comments' bit, I hope HN will bake that in someday.

This is neat, thank you!

We have a browser extension that we use for moderation. A few of the features here overlap surprisingly with what that one does. One of these years I want to open-source it, but I need to factor out the moderation-only features, which is one of those tasks that never makes it to the top of the stack.

This is exciting to hear, hope to see it soon :)

I wonder... at one point I wrote an extension (for the moderators) which had the ability to essentially follow users. Think of it as a news feed for HN.

Really wish I could make that open source if no one is using it lol I use it personally to follow people on HN which post interesting comments (still works after 4 years with no edits)

Is that a question for us? I'm not aware of what you're referring to.

It was, But the lack of knowledge of said system is probably indication it’s not being used :)

Have you considered integrating the extension's features into the main site? (Is that were folding came from?)

We've considered it, but it's way more Javascript than we're comfortable introducing by default. (Actually it's Arc compiled to JS, another piece of software I'd like to publish someday.) Most likely, we'd make it an option you could turn on in your profile, so you'd get the functionality without having to install an extension.

(If by folding you mean collapsing comments, that was implemented separately, as part of HN proper.)

This is going to sound like nitpicking but is there a way that you could avoid the flicker on the listing page?

Perhaps adding the <div> on load with a static height and then filling it with the filters? Another option could be to allow the user to show / hide the bar and remember the setting. That way, one could open it when needed only and it wouldn't flicker on every load.

Same thing for the "toggle all comments" button in a thread.

I get nauseous with such flickers. I really like this extension but won't be able to use it unless this changes.

Related: I use http://hckrnews.com/ and since discovering it, I've never gone back to the HN main page. Might be useful as well to someone.

Same here, this is my go-to for Hacker News content now. But of course it's only a curator, it doesn't offer anything like what this refined-hacker-news project does.

Side note if author/host is reading: can you redirect HTTP to HTTPS? :)

I do as well. It's become one of my default landing spots.

I like it so far, but J to navigate down and K to navigate up is not intuitive at all. It should be flipped to match our Left-to-Right-Top-to-Bottom understanding of layouts

It's probably set up like that to mirror vim bindings, after all, "J" does look __sort of__ like a down arrow.

I always remember it as “jump” and “climb”. Climb doesn’t start with k, but fair enough.

When I learned HJKL, I used the following mnemonic: The J key (like the F key) has a little bump at the bottom to indicate the resting position for the index fingers in 10-finger writing. Since the bump is at the lower edge of the J key, that means that J goes down.

J and K are vim's keybindings for up and down, which I figured would fit well with the community and users.

What are possible alternative mappings to make it more intuitive to non-developers?

> What are possible alternative mappings to make it more intuitive to non-developers?

Arrows.

But for the other camp - the Emacs people - n and p would be best :).

Will fork for w,a,s,d support :P

May I suggest adding an options page to configure the keybindings (and store them in browser.storage.sync)? Happy to send a PR.

Sure, let's discuss this on a GitHub issue first :)

j/k for down/up most likely comes from Vim.

J and K are intuitive for anyone familiar with vim's keybindings for up and down.

This is also the same layout for Gmail (and many other apps I'm sure)

This is very very nice! May I ask what language did you code this in? Is it JS? Or just how did you get started? Yeah I'm just an average Joe who is getting started and loves learning new stuff. Hopefully that not too intrusive, thanks.

Hi! Thanks for your kind words.

Since this is a browser extension, it's almost completely written in JavaScript only. You can check the entire code on the GitHub repo itself! Feel free to email me anytime :)

This is wonderful work, and done in a respectful way that doesn't get in the way of the original site while adding quite a lot of really useful stuff. Great job with this. Now if only we could get HN to merge this into core...

Very cool!

I noticed that the extension is inspired by Sindresorhus. I think he's totally nailed the way to architect and structure extensions now. Especially if you look up a lot of guides on how to build extensions, they really don't tell you anything about how to include npm packages, or distribute the extension in an automated way. Refined github does all of this in a really clear way that, I think, works very well. I recently used it's structure to rewrite an extension of mine and it helped so much.

I've been using HackerNew [0] for years now (probably 5+) and love it. It does change the style a little bit but I quite enjoy it. It appears to be missing in the chrome store right now though for some reason.

[0] https://github.com/tommoor/HackerNew

This is dopeeeeeeee! Great contribution. Thank you for sharing. The favorites is very useful for me.

Thank you very much!

>Highlight new, unread comments on subsequent visits

sold!

My prayers have been answered. Thank you so much for adding keyboard shortcuts to HN. It was getting to the point where I had a project on the roadmap to build an API application myself. Thank you so much!

Great job. What I miss is weekly email roundup of comments made by people I like on HN. Its interesting that you cannot "follow" people on HN just to specifically read their comments.

I kind of like it though. The lack of the usual "social network" features makes it much easier to focus on the merit and content of each comment.

Can you make it so that I can upvote this multiple times :)

Really good job.

Editing comments is a bit funny though: after clicking Update it takes me to the standard update page on HN instead of staying inline (on FF).

Thank you!

Yeah, that's a backend issue, it's how Hacker News handles the forms after they have been submitted. Nevertheless I will look into this, please consider creating an issue on the GitHub repo too! :)

Could somebody please explain the selection of required permissions to me? For example, why does it need: "Access browsing history", "Access browser tabs"?

To "hide read stories", the extension needs to check whether the link has been opened in the past, ie, if it is present in the history.

To open links in new tabs, but in the background, and to communicate between the popup and active instances of Hacker News, the extension requires the "tabs" permission.

All code is completely open-sourced on the GitHub repository, too!

I love how it fits with the theme of the original site!

Yes! I have tried my best not to modify the site's theme at all, and stay consistent with it whenever adding any new elements.

I always want the ability to skip the entire thread I'm currently viewing (as opposed to collapse the sub-thread I'm currently viewing). The official Reddit iOS app does this with a floating button, for example.

Hey, could you elaborate a little more on "skipping the entire thread"? I don't quite understand. Please consider creating a feature request in the GitHub repo's issue, it'll allow me to track the issues better. Thanks!

This is like RES for HN, RFN!

I believe you meant "RHN". Nevertheless, thank you so much!

Wouldn't it be HNES? RES = Reddit Enhancement Suite so RHN would be? Reddit Hacker News? And I have no clue that RFN was supposed to stand for.

Edit: Actually it looks like there is already a HNES [0]

[0] https://chrome.google.com/webstore/detail/hacker-news-enhanc...

RHN = Refined Hacker News

Oh duh, thank you!

Yeah just got confused :)

I'm liking the auto refresh feature, but it'd be nice to have a setting to refresh to the main page, not the page I left off at.

Is there a way to hide all, and hide the currently highlighted item via keyboard?

You can hide the currently highlighted item by pressing shift + H. Currently, there is no way to "hide all". I believe this is a common request among many, so it'd be great if you could create a feature request on GitHub for the same so that it'll be easier to track issues. Thanks

This is fantastic. Can you add a way to sort stories by comment count?

Seems fairly simple to do! To track these feature requests, it'd be great if you could open an issue on the GitHub repository, so that we can discuss it there too! Thanks :)

Slick, nice work!

why would need access to browsing history ? I am tryin to install the add-on for firefox

Probably for the "hide read posts" feature.

Yup, that correct.

you still in highschool? nice.

Yup, thanks!

The hero that we deserve!

Feature request: hide-paywalled-sites

Removes all links from wsj, nytimes, bloomberg, etc.

Hmm, this feature seems very aggressive. Nevertheless, please consider creating a feature request on GitHub to push it forward and get greater support for it! https://github.com/plibither8/refined-hacker-news/issues

Making it more general would make it less aggressive - empty by default blacklist.

Perhaps instead of blocking threads about paywalled articles there could be link to generate the outline.com version of the url?

Deleted: Meant to reply to parent. Just getting used to this awesome "reply inline" feature!

Alternately, perhaps you could just add a class to each post with its domain name. That way the user can custom style (or hide completely) his or her chosen domains with userContent.css or an extension like Stylish.

This is beyond awesome. Best HN extension I've ever used so far. Thank you.

you know what i can't understand as sorely lacking - an inbox/replies view on hn. i was hoping this extension had it.

Reply on news.ycombinator.com