Keyboard Navigation Browser Extension

I want to create a browser extension to experiment with new keyboard shortcuts for OGS’ UI. For example:

  • A shortcut for focusing on the chat box.
  • More ambitiously, shortcuts for playing the game itself — I wonder if using the arrow keys and another one for confirming the move would be acceptable UX…

To accomplish some of that it would be nice if I had a summarized guide of how OGS’ API works — I’m not talking about the web REST API, but the OOP one (JS/TS DOM), I believe. For example, does anyone have a pointer to docs on how the Goban canvas element works inside OGS so I can dispatch events on it in a more proper manner?

I also don’t have much experience with the canvas HTML element at all, so, if you have a pointer to a good tutorial given this context, that would be very useful as well.


I’ve recently created one of these keyboard shortcut browser extensions for YouTube, if you want to have a more concrete example of what I mean.

5 Likes

Well the arrow keys currently go into analysis mode when it’s enabled, to navigate through the game moves.

Other than that I don’t have much input, as I don’t know much about it myself :slight_smile:

I would add a shortcut to enable or disable the extension in order to avoid these types of conflicts.

1 Like

I think the way lichess has keyboard input would be cool; though I probably wouldn’t use it unless it had the option to customize what inputs correspond to “A-T” and “1-19”, so that I could set “1, 2, … -9, -8, …, -1” for “A-T” and “-1i, -2i, …, +Xi, +9i, …, +1i” for “1-19”. I am not sure how difficult this would be, though.

Another use case for this extension would be having a fallback playing method for if/when you mouse’s battery is over. It happened to me once T.T

1 Like

+1 on this idea. I personally want to see a browser extension that allows me to speak my moves instead of using a mouse. This feels like half the battle.

w.r.t. documentation, I don’t think there is any, but of course the frontend is open source. If you do dig into it and learn more, please document your findings in the wiki or something for future developers!

The project has finally been kicked off, you can check it out here: OGS Kbd Nav. Currently, it only supports a shortcut for (un)focusing the chat input.

I’m trying to reach out @anoek to get more accurate information on the dimensions of the elements in the Goban canvas.

With respect to the code, I’m kind of a noob in TypeScript — I’ve spent a week to complete a Udemy course so far — and I tend to hate frameworks and having a bazillion packages. The extension will likely then be pure TypeScript with at most Jest as a testing package, which I haven’t yet figured out how to use in the browser extension context.

2 Likes

The pre-release of the package nobody asked for but the world desperately needed is now out. You can download it here.

You will find all of the relevant instructions to install the extension on its Github main page.

@anoek helped out quite a bit in clarifying many of many of my questions. Most notably, he mentioned the global_goban global variable, which is openly accessible on OGS. However I didn’t use it because I didn’t know how to access it from a browser extension, and neither did he. Later, I found out that there is a way, exposed in this StackOverflow question.

Let me know what you think. Is this useful or just a one-off in your life?

I’ve also created a chat room/community on Gitter for users to chat — with me or others — about the product.

2 Likes

Version 1.0.0 is now out. It also features, among others, a way of inputting the coordinates into a field.

It’s currently on the review process of Chrome’s, Firefox’s and Microsoft Edge’s extension stores.

1 Like

PT-BR: para falantes da língua portuguesa, assista ao tutorial aqui.

The Microsoft Edge Store is being a pain in the ass, so I don’t have a listing there yet — I’ll update it here in the future as soon as I get it. But you can currently download it for — you can also download the most up-to-date version directly from Github releases —:

If you’re interested in the project, want to contribute or learn more about the topic, don’t forget to still check out:

2 Likes