Show HN: Browser Extension to Refine the HN Experience(github.com)

259 pointsby plibither87 tahun yang lalu122 comments

Show HN: Browser Extension to Refine the HN Experience

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

125 comments

plibither87 tahun yang lalu

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!

newscracker7 tahun yang lalu

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

Vinnl7 tahun yang lalu

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/

DarkStar8517 tahun yang lalu

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.

plibither87 tahun yang lalu

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

newscracker7 tahun yang lalu

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

plibither87 tahun yang lalu

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.

colemannugent7 tahun yang lalu

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

plibither87 tahun yang lalu

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?

mzs7 tahun yang lalu

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

libraryatnight7 tahun yang lalu

This is neat, thank you!

habosa7 tahun yang lalu

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

teh_klev7 tahun yang lalu

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.

plibither87 tahun yang lalu

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.

nathcd7 tahun yang lalu

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!

plibither87 tahun yang lalu

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

WhatIsDukkha7 tahun yang lalu

Tagging users would be a very useful feature to me.

plibither87 tahun yang lalu

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

behnamoh7 tahun yang lalu

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!

plibither87 tahun yang lalu

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?

behnamoh7 tahun yang lalu

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

plibither87 tahun yang lalu

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

TeMPOraL7 tahun yang lalu

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.

plibither87 tahun yang lalu

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

jumbopapa7 tahun yang lalu

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

LinuxBender7 tahun yang lalu

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

plibither87 tahun yang lalu

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

behnamoh7 tahun yang lalu

This one's really cool:

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

UI_at_80x247 tahun yang lalu

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

techwizrd7 tahun yang lalu

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

plibither87 tahun yang lalu

Thank you very much!

dsr_7 tahun yang lalu

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

This is no exception.

Vinnl7 tahun yang lalu

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

plibither87 tahun yang lalu

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

consumer4517 tahun yang lalu

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.

plibither87 tahun yang lalu

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.

totaldude877 tahun yang lalu

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

totaldude877 tahun yang lalu

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

queercode7 tahun yang lalu

testing the reply feature

ozten7 tahun yang lalu

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.

OJFord7 tahun yang lalu

Isn't that achieved by minimising too?

plibither87 tahun yang lalu

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

floatingatoll7 tahun yang lalu

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

plibither87 tahun yang lalu

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

floatingatoll7 tahun yang lalu

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

OrwellianChild7 tahun yang lalu

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!

plibither87 tahun yang lalu

Thanks for explaining :)

floatingatoll7 tahun yang lalu

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

LameRubberDucky7 tahun yang lalu

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

reaperducer7 tahun yang lalu

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?

acsands137 tahun yang lalu

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

saagarjha7 tahun yang lalu

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

saagarjha7 tahun yang lalu

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.

dang7 tahun yang lalu

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.

lettergram7 tahun yang lalu

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)

dang7 tahun yang lalu

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

lettergram7 tahun yang lalu

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

majewsky7 tahun yang lalu

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

dang7 tahun yang lalu

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

plibither87 tahun yang lalu

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

Raphmedia7 tahun yang lalu

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.

nestorherre7 tahun yang lalu

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.

mslm7 tahun yang lalu

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-kraln7 tahun yang lalu

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

tbirrell7 tahun yang lalu

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

plibither87 tahun yang lalu

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?

TeMPOraL7 tahun yang lalu

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

[deleted]7 tahun yang lalu

infokiller7 tahun yang lalu

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

plibither87 tahun yang lalu

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

dvtrn7 tahun yang lalu

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

npongratz7 tahun yang lalu

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

toothandtail7 tahun yang lalu

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

mont7 tahun yang lalu

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

atoav7 tahun yang lalu

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

majewsky7 tahun yang lalu

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.

mikewhy7 tahun yang lalu

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

Fiveplus7 tahun yang lalu

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.

plibither87 tahun yang lalu

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

throwaway4137 tahun yang lalu

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

spookyuser7 tahun yang lalu

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.

joshstrange7 tahun yang lalu

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

dandigangi7 tahun yang lalu

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

plibither87 tahun yang lalu

Thank you very much!

stiGGG7 tahun yang lalu

>Highlight new, unread comments on subsequent visits

sold!

vinceguidry7 tahun yang lalu

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!

joering27 tahun yang lalu

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.

michaelwu7 tahun yang lalu

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.

stinos7 tahun yang lalu

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

plibither87 tahun yang lalu

Thank you!

plibither87 tahun yang lalu

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

hagreet7 tahun yang lalu

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

plibither87 tahun yang lalu

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!

MH157 tahun yang lalu

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

plibither87 tahun yang lalu

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.

sambe7 tahun yang lalu

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.

plibither87 tahun yang lalu

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!

mrunseen7 tahun yang lalu

This is like RES for HN, RFN!

plibither87 tahun yang lalu

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

joshstrange7 tahun yang lalu

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

mrunseen7 tahun yang lalu

RHN = Refined Hacker News

joshstrange7 tahun yang lalu

Oh duh, thank you!

mrunseen7 tahun yang lalu

Yeah just got confused :)

queercode7 tahun yang lalu

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.

tetrisgm7 tahun yang lalu

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

plibither87 tahun yang lalu

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

enraged_camel7 tahun yang lalu

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

plibither87 tahun yang lalu

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

kitten_smuggler7 tahun yang lalu

Slick, nice work!

rammy12347 tahun yang lalu

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

majewsky7 tahun yang lalu

Probably for the "hide read posts" feature.

plibither87 tahun yang lalu

Yup, that correct.

dbancajas7 tahun yang lalu

you still in highschool? nice.

plibither87 tahun yang lalu

Yup, thanks!

jackalo7 tahun yang lalu

The hero that we deserve!

snarfy7 tahun yang lalu

Feature request: hide-paywalled-sites

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

plibither87 tahun yang lalu

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

OJFord7 tahun yang lalu

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

mthoms7 tahun yang lalu

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.

elliekelly7 tahun yang lalu

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

mthoms7 tahun yang lalu

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

trpc7 tahun yang lalu

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

mlevental7 tahun yang lalu

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

jpnarayan7 tahun yang lalu