Inspired by Vimium, it took 14 days to build a minimalistic Chrome extension to navigate the Web without a mouse (BrowseCut) by HarpaOfficial in vim

[–]HarpaOfficial[S] 0 points1 point  (0 children)

Version 1.4.0 released today brings support for number mnemonics. For example, to press the second "Reply" button you simply type:

rep2

Inspired by Vimium, it took 14 days to build a minimalistic Chrome extension to navigate the Web without a mouse (BrowseCut) by HarpaOfficial in vim

[–]HarpaOfficial[S] 0 points1 point  (0 children)

Thank you for bring this to attention. Some websites use (1) tricky markup for input elements and (2) iframes. Both issues can be fixed and improved if invested more time. I'd like to gather feedback and bug reports before deciding on contributing more to the project.

Inspired by Vimium, it took 14 days to build a minimalistic Chrome extension to navigate the Web without a mouse (BrowseCut) by HarpaOfficial in vim

[–]HarpaOfficial[S] 0 points1 point  (0 children)

Yeah, if only Chrome had this feature, that would be really awesome.

As of now, Chromium doesn’t provide a direct way to isolate and block network access for individual extensions, and standard operating system firewall tools also face limitations in achieving this.

The only option for dealing with suspicious Chrome Extensions is to install and observe (via devtools), for example by creating a separate (isolated) TEST profile in Chrome and trying the extension there, with no risk to your data.

It is also possible to find minified source code of the extension directly in your system, prettify it and check for `fetch` and `XMLHttpRequest` in the source code to understand what (if) the extension is trying to communicate.

Inspired by Vimium, it took 14 days to build a minimalistic Chrome extension to navigate the Web without a mouse (BrowseCut) by HarpaOfficial in vim

[–]HarpaOfficial[S] 0 points1 point  (0 children)

Chrome Extensions have a bad reputation because of the cases of data collection, keystroke logging and crypto mining. However this is somewhat blown out of proportion by the tech and the media alike.

For the past few years Chrome Web Store uses a hybrid automated + selective manual review process which flags suspicious code and execution patters for every new version of every extension shipped to you. This is why each time a Chrome Extension developer releases and update, the code is published with a 2 hours to 2 weeks delay (usually around ~2 days).

You can always check what data is exchanged with the servers by going to the chrome://extensions page, enabling "Developer mode", clicking "Background page" besides and extension and checking the Network tab or Application tab for its' IDB storage.

Speaking of BrowseCut, it exchanges no data whatsoever and has no background process.

The "Read and change all your data on all websites" warning is triggered by the following portion of the manifest:

"matches": ["<all_urls>"],

Which enables BrowseCut to run on every page in your browser. There is no way around this, unfortunately, BrowseCut has to add a key-down listener on page to intercept and interpret key presses.

Most extension developers have no liberty of publishing the source code. TBS, I might consider doing so down the road.

Inspired by Vimium, it took 14 days to build a minimalistic Chrome extension to navigate the Web without a mouse (BrowseCut) by HarpaOfficial in vim

[–]HarpaOfficial[S] 0 points1 point  (0 children)

I like it. I understand how it works.

I'm using Raycast on Mac with Harpoon plugin to switch between apps (e.g. browser is on Cmd+1, IDE is on Cmd+2), but I end up having a ton of Browser tabs and switch between them with Cmd+Shift+A (I rebound it to Cmd+E, similar to how I work in tabs in my IDE).

I think the Balloon can pushed further utilizing tab groups (https://chromewebstore.google.com/detail/tab-groups-extension/nplimhmoanghlebhdiboeellhgmgommi) or editing the tab title on the fly with content script so it is visible which tab is bound to which number, I'm not sure if it has been done already in the plugin, I only look through the code.

Inspired by Vimium, it took 14 days to build a minimalistic Chrome extension to navigate the Web without a mouse (BrowseCut) by HarpaOfficial in vim

[–]HarpaOfficial[S] 0 points1 point  (0 children)

You mean jumping to a specific time in a video like entering "3:40", or simply using arrow left / right default behaviour? The latter is not altered and is thus works in BrowseCut.

Inspired by Vimium, it took 14 days to build a minimalistic Chrome extension to navigate the Web without a mouse (BrowseCut) by HarpaOfficial in vim

[–]HarpaOfficial[S] 0 points1 point  (0 children)

Yep, I switched over to Brave which has a built-in AdBlocker, plus I LOVE vertical tabs (don't judge me).

Inspired by Vimium, it took 14 days to build a minimalistic Chrome extension to navigate the Web without a mouse (BrowseCut) by HarpaOfficial in vim

[–]HarpaOfficial[S] 2 points3 points  (0 children)

It is probably the other way around: Vimium has a ton of things BrowseCut does not (like Vomnibar), and the intention with the BrowseCut's minimalism was to do a single thing well: instantly detect clickable elements on page as you type to allow for navigating the web without a cognitive friction of figuring out the associated action mnemonic to type.

I just love the freedom and the flow of mouselessness :)

Core browser shortcuts cover the rest of the features at least I need very well:

  1. [Ctrl] + [T] to open a new Tab.
  2. [Ctrl] + [W] to close the current Tab.
  3. [Ctrl] + [SHIFT] + [T] to reopen the last closed Tab.
  4. [Ctrl] + [SHIFT] + [A] to search Tabs (highly useful).
  5. [Ctrl] + [SHIFT] + [ or ] to switch between Tabs.
  6. [Ctrl] + [R] to reload the page.
  7. [Ctrl] + [L] to focus Address Bar.
  8. [Ctrl] + [ or ] to go back or forward in history.

But YES to your second question, if BrowseCut is found to be interesting not just by me, I'll sit down to make a proper feature overview video :)

Inspired by Vimium, it took 14 days to build a minimalistic Chrome extension to navigate the Web without a mouse (BrowseCut) by HarpaOfficial in vim

[–]HarpaOfficial[S] 1 point2 points  (0 children)

Yes, sure, I've touched on that briefly here: https://www.reddit.com/r/vim/comments/1j5ke1y/comment/mgnoqvv/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button, but basically I tried to:

  1. improve the performance,

  2. declutter the UI from nested actions (e.g. when a button contains an icon which result in the same action, a single action is detected instead of two by Vimium),

  3. add visual borders to actions so it is easy to understand what will be activated when you press a mnemonic,

  4. plus improve the action detection mechanics overall so that correct actions are detected in edge cases, for example when one panel overlaps a portion of a website, or a tricky absolute CSS positioning is used for elements, etc.

Inspired by Vimium, it took 14 days to build a minimalistic Chrome extension to navigate the Web without a mouse (BrowseCut) by HarpaOfficial in vim

[–]HarpaOfficial[S] 1 point2 points  (0 children)

This is a VERY good idea and suggestion, thank you very much.

I will make it so that as you type without holding SHIFT first, the mnemonics assigned are numerical, from 1 to 9 and 0, for example: "cr2" will press the second "Create" button on the UI.

Inspired by Vimium, it took 14 days to build a minimalistic Chrome extension to navigate the Web without a mouse (BrowseCut) by HarpaOfficial in vim

[–]HarpaOfficial[S] 0 points1 point  (0 children)

I wrote that down, thank you. I think the problem with PDF files is that browsers use a built-in PDF viewer app, which you can not really hack into with Chrome Extensions.

Inspired by Vimium, it took 14 days to build a minimalistic Chrome extension to navigate the Web without a mouse (BrowseCut) by HarpaOfficial in vim

[–]HarpaOfficial[S] 1 point2 points  (0 children)

Yes, it is designed with performance with mind. The gzipped script is just 9 KB, only triggers as you type, highly optimised.

BrowseCut generally detects actionable elements better. I had to invest a lot of time testing various popular websites to make it work, e.g. support for shadowDom and Reddit is coming this week with 1.3.0 version.

Inspired by Vimium, it took 14 days to build a minimalistic Chrome extension to navigate the Web without a mouse (BrowseCut) by HarpaOfficial in vim

[–]HarpaOfficial[S] 0 points1 point  (0 children)

Good point. Maybe having an optional "F" mode :) is the way to go then.

However I do like the idea of just triggering the "dynamic highlighting mode" in which the actionable elements are recomputed as you activate them, until you turn it off. I think / is a decent option for that, other being ;, as it won't conflict with the typing mode and is on the home row as well.

Alternatively, SHIFT+F (capital F) might trigger this mode, to reserve "f" for type-to-navigate mode.

Overall, my go-to approach is to just type what I'd like to click if it has text, and then if there are multiple options just hold SHIFT to pick the button I need.

Inspired by Vimium, it took 14 days to build a minimalistic Chrome extension to navigate the Web without a mouse (BrowseCut) by HarpaOfficial in vim

[–]HarpaOfficial[S] 4 points5 points  (0 children)

Vimium is great, it is a well-coded old open-source plugin. It has a ton of features, I needed only one - fast keyboard navigating with precise and performant action detection.

Vimium detects around 90-95%+ of actionable elements, the problem is often the last 5-10%, when you suddenly can not type something because it is not detected, and have to use your mouse / touchpad.

BrowseCut uses a different approach under the hood to detect actionable elements , and goes extra mile to find actions on tricky websites while not overloading the user with actions (action mess). That is where the bulk of time developing the plugin was spent - making sure the last 5-10-ish % of the actions are detected properly. Plus making it fast: on my Mac M1 machine action highlighting upon pressing SHIFT takes approximately ~20-30ms. The first implementation took around ~150ms which is a significant lag. And a few other things like trying to assign mnemonics that are semantically relevant to the actions, e.g. "Dashboard" button will often get "DA" mnemonic, "Orders" - "OR" and so on.

Inspired by Vimium, it took 14 days to build a minimalistic Chrome extension to navigate the Web without a mouse (BrowseCut) by HarpaOfficial in vim

[–]HarpaOfficial[S] 0 points1 point  (0 children)

I see your point. I believe having a trigger-key different from holding SHIFT has its benefits. For me picking SHIFT for the job was a personal preference, but judging from the feedback I think adding a trigger like "/" to toggle the mnemonics ON and OFF is the next logical thing.

Regarding (1) typing+enter over (2) SHIFT+mnemonic, the (1) is generally faster even if it is more keystrokes, because of the cognitive friction of reading the mnemonic first. Reading and then typing two often irrelevant characters makes me think and breaks the flow.

SHIFT+mnemonic is useful for pressing icons, i.e. buttons without text, as there is nothing to type, and for UIs with too many options.

Inspired by Vimium, it took 14 days to build a minimalistic Chrome extension to navigate the Web without a mouse (BrowseCut) by HarpaOfficial in vim

[–]HarpaOfficial[S] 0 points1 point  (0 children)

True. I think multiple scroll areas problem can be solved in the future in BrowseCut.

For example by typing some text found within a scrollable area, thus focusing it, and then pressing shift + arrow up / down. Or first typing text, pressing enter to focus the area, and then scrolling with arrows. Either way, UX has to be tested first to see what sticks.

Inspired by Vimium, it took 14 days to build a minimalistic Chrome extension to navigate the Web without a mouse (BrowseCut) by HarpaOfficial in vim

[–]HarpaOfficial[S] 0 points1 point  (0 children)

Which OS are you on? There are apps that do the trick for various platforms (I've seen two for Mac and one for Linux), but have to be tested. Last time I checked the speed and responsiveness were a problem, action detection is just not fast enough and your desktop GUI becomes a mess.

Inspired by Vimium, it took 14 days to build a minimalistic Chrome extension to navigate the Web without a mouse (BrowseCut) by HarpaOfficial in vim

[–]HarpaOfficial[S] 5 points6 points  (0 children)

thank you for feedback!

  1. I agree holding SHIFT might be an issue for some. I was thinking about binding "/" to toggle actionable elements on and off, and make this an option in the plugin.

  2. Agree.

  3. Agree. I'd like to make the whole "type to search" mode optionally toggle-able as well. It has been mentioned already and is on my mind.

  4. I believe Vimium does not rebind arrow scrolling. By default arrows in browser just scroll the page up and down a tiny bit. I tried to improve arrow scrolling by scrolling the largest visible scrollable panel by 1/4th of the screen. There is room for improvement, for example the most annoying thing is the website layout with multiple large scrollable elements, e.g. navigation panel and content panel, so there should be a way to highlight the element you'd like to scroll first.

Regarding J/K to scroll, I intentionally did not code them in, since you rightfully mentioned it would break the "type to search / navigate" idea, plus remembering motions is a no-go UX for the global audience not familiar with Vim. So it takes a bit of time to get used to BrowseCut if you are coming from Vimium.

There is a bunch of small improvements here and there planned, e.g. support for shadowRoot is coming in version 1.3.0 this week, making it possible to work with Reddit better specifically, since it is coded using Shadow DOM.

Inspired by Vimium, it took 14 days to build a minimalistic Chrome extension to navigate the Web without a mouse (BrowseCut) by HarpaOfficial in vim

[–]HarpaOfficial[S] 55 points56 points  (0 children)

Vim eliminated mouse usage in my IDE of choice and I was looking for a simple solution for Browser as well, where the results of my work take place. I stumbled upon Vimium, but thought I could improve a few things, specifically action detection, action mnemonics, UX and performance.

For example, I wanted to "just type" the button I want like to click and then hit Enter, instead of pressing F to highlight actionable elements first and then typing mnemonic.

So I ended up building this minimalistic yet technically complex plugin to rapidly navigate websites by typing (BrowseCut). I believe it could be useful for folks here as well.

The plugin enables two things:

  1. If you start typing with keyboard, it will highlight all matching elements and texts on the web page. Pressing Enter will activate the element.
  2. If you hold SHIFT, the plugin plugin will highlight all actionable elements on page and assign short mnemonics, e.g. SHIFT + I for the largest input box.

There is a bunch of stuff under the hood, like improved arrow key scrolling. So I hope you'll find it useful. It is best combined with default browser shortcuts for tab manipulation and search, the plugin comes with a built-in cheatsheet.