Show HN: Browser Extension to Refine the HN Experience

https://github.com/plibither8/refined-hacker-news

by plibither8 • 7 years ago

259 122 7 years ago

plibither833• 7 years ago

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!

habosa• 7 years ago

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

plibither833• 7 years ago

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.

teh_klev• 7 years ago

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.

behnamoh3• 7 years ago

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!

plibither833• 7 years ago

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?

jumbopapa• 7 years ago

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

plibither833• 7 years ago

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 :)

LinuxBender• 7 years ago

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...

behnamoh3• 7 years ago

This one's really cool:

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

UI_at_80x24• 7 years ago

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

techwizrd• 7 years ago

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

plibither833• 7 years ago

Thank you very much!

newscracker2• 7 years ago

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.]

Vinnl2• 7 years ago

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/

plibither833• 7 years ago

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.

plibither833• 7 years ago

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?

DarkStar851• 7 years ago

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.

colemannugent• 7 years ago

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

dsr_• 7 years ago

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

This is no exception.

Vinnl2• 7 years ago

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

plibither833• 7 years ago

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

consumer451• 7 years ago

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.

plibither833• 7 years ago

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.

totaldude872• 7 years ago

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

totaldude872• 7 years ago

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

ozten• 7 years ago

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.

plibither833• 7 years ago

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

OJFord2• 7 years ago

Isn't that achieved by minimising too?

floatingatoll3• 7 years ago

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

plibither833• 7 years ago

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)
  }

LameRubberDucky• 7 years ago

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

reaperducer• 7 years ago

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?

acsands13• 7 years ago

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...

saagarjha2• 7 years ago

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.

mzs• 7 years ago

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

libraryatnight• 7 years ago

This is neat, thank you!

stiGGG• 7 years ago

Highlight new, unread comments on subsequent visits

sold!

enraged_camel• 7 years ago

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

plibither833• 7 years ago

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 :)

MH15• 7 years ago

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

plibither833• 7 years ago

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.

tbirrell• 7 years ago

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

mont• 7 years ago

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

atoav• 7 years ago

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

plibither833• 7 years ago

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?

TeMPOraL2• 7 years ago

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 :).

dvtrn• 7 years ago

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

infokiller• 7 years ago

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

mikewhy• 7 years ago

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

npongratz• 7 years ago

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

toothandtail• 7 years ago

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

dandigangi• 7 years ago

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

plibither833• 7 years ago

Thank you very much!

hagreet• 7 years ago

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

plibither833• 7 years ago

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!

kitten_smuggler• 7 years ago

Slick, nice work!

throwaway413• 7 years ago

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...

joering2• 7 years ago

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.

michaelwu• 7 years ago

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.

stinos• 7 years ago

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).

plibither833• 7 years ago

Thank you!

plibither833• 7 years ago

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! :)

mrunseen3• 7 years ago

This is like RES for HN, RFN!

plibither833• 7 years ago

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

joshstrange3• 7 years ago

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...

mrunseen3• 7 years ago

Yeah just got confused :)

joshstrange3• 7 years ago

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

snarfy• 7 years ago

Feature request: hide-paywalled-sites

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

plibither833• 7 years ago

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

OJFord2• 7 years ago

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

elliekelly• 7 years ago

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

mthoms2• 7 years ago

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.

Fiveplus• 7 years ago

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.

plibither833• 7 years ago

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 :)

dang3• 7 years ago

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.

plibither833• 7 years ago

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

lettergram2• 7 years ago

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)

dang3• 7 years ago

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

majewsky3• 7 years ago

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

dang3• 7 years ago

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.)

jackalo• 7 years ago

The hero that we deserve!

vinceguidry• 7 years ago

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!

dbancajas• 7 years ago

you still in highschool? nice.

plibither833• 7 years ago

Yup, thanks!

sambe• 7 years ago

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.

plibither833• 7 years ago

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!

Raphmedia• 7 years ago

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.

spookyuser• 7 years ago

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.

trpc• 7 years ago

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

queercode2• 7 years ago

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.

nestorherre• 7 years ago

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.

mslm• 7 years ago

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? :)

yc-kraln• 7 years ago

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

rammy1234• 7 years ago

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

majewsky3• 7 years ago

Probably for the "hide read posts" feature.

plibither833• 7 years ago

Yup, that correct.

tetrisgm• 7 years ago

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

plibither833• 7 years ago

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

mlevental• 7 years ago

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

Show HN: Browser Extension to Refine the HN Experience

Related Stories