Drawing arrows on mobile with LiChess Tools

Intro

Hi. As you may know I am the developer of LiChess Tools, a browser extension that extends the functionality of Lichess. And when I say extends, I mean it adds over 100 things that people have requested or didn't know they needed (or perhaps never needed at all) but got anyway. And worse, it is and will always be completely free. Also, I admit the name was slightly unimaginative and confusing, but I am NOT affiliated with Lichess themselves and LiChess Tools is not a Lichess product, although I like to believe we're friends.

While installing LiChess Tools for Chromium and Firefox browsers on the desktop is no issue, there is always the thorny issue of mobile browsing, so consider this a guide on how to use extensions on mobile, with focus on the mobile features of LiChess Tools.

Use extensions on mobile

Until recently, what I would have recommended, given my own preferences towards Chromium browsers, was the Kiwi browser. They did something really cool: they took Chromium, developed a mobile browser, then implemented the code to make it run extensions. As you may know, Chrome, the flagship Google product dominating the browser market, doesn't support extensions for mobile. I wonder why *cough*ad blockers*cough*.

Unfortunately, Kiwi is dead. Development is over, their GitHub source code is archived and, as the underlying Chromium engine evolves, the Kiwi browser will slowly become obsolete. Yet, not everything is lost. Edge, the Microsoft browser that also uses Chromium as the base of its functionality, will integrate that extension enabling code soon. It's already available in the "Canary" version, which is fancy speak for a beta version. I am confident that this means Chrome itself will be forced to follow suit, so good times ahead.

Yet one can use LiChess Tools as well as most other extensions if you use Firefox mobile, which has native support for extensions, right now.

You may have issues with using either of these browsers, but on mobile that's less relevant. You can have multiple browser apps installed and use either one in different contexts. I myself use Brave mobile as the default browser and Kiwi and Firefox for Lichess only.

LiChess Tools features on mobile

While there are some very cool features for mobile in LiChess Tools, the one that is most request is drawing shapes: arrows and circles, like on the desktop web site. For some reason, Lichess doesn't allow that for the mobile website. Honestly, I would prefer them to implement it, because what LiChess Tools provides is a bit of a hack, but at the moment, it's all you've got.

Anyway, shape drawing in LiChess Tools is not enabled by default. Why? Because in order to work it needs to add a new button in games, studies, analysis board, puzzles, etc. Space is not easily available on mobile, it's prime real estate. Therefore, as with all LiChess Tools features, you can enable/disable it from the Preferences, which can be found in the user menu:

Then you either select the Mobile device features and Mobile device game feature preferences or search for them in the preference filter:


And you enable Analysis arrows. From then on, you will have a button in Analysis board and Study pages that will enabled shape drawing.

And you enable Game arrows. From then on, you will have a button in game, TV and puzzle pages that will enable shape drawing.

Why two different preferences? Because the "analysis" and "game" pages are very different. One is free to extend, the other is protected, since no one wants to give players an advantage in games that might be considered cheating.

There is one more preference that you must be aware of:

This controls how many colors for shapes you will have available. The difference between them is that you will have to press that many times to cycle between the different colors and "normal" mode.
Example in the Analysis board:

You tap the little double arrow button, then you draw your circles and arrows. Then you tap again to disable the arrows. That's when you have one color enabled. You enable four colors, you cycle between green, red, blue and yellow before you get to normal mode again.
Example in a puzzle, this time with multiple colors:

Now, if you do like I did in this example and filter the preferences with the word "mobile" you will find multiple features related to that, including:

• all of the mobile device and mobile game device features you've seen above
• mobile specific themes that arrange the screen elements more conveniently for mobile use
• screen lock on mobile, so you don't zoom or pan while playing
• keep screen active during TV or puzzles, so you can think as much as you like without the screen turning off

However, these, and many other features, are not in the scope of this blog post.

How it works

This is for the more technically inclined amongst you, but there is a clear difference between how shape drawing works in "page" and "analysis" modes, as I said above. With analysis it's simple, LiChess Tools just uses the existing "chessground" instance - which is the object used to display the board throughout Lichess - to draw whatever shapes are needed. For game, though, the instance is inaccessible, so another is created and put on top of the existing one, while the existing one is just disabled during arrow mode.

Analysis is considered Analysis board, Study, broadcasts and game analysis. Game is playing and doing puzzles, as well as watching TV.

Conclusion

My personal recommendation for using extensions, particularly LiChess Tools, on mobile browsers is to use Firefox for now. Soon enough, Edge will enable extensions and then you may be able to choose between Chromium and Firefox. If you prefer Chrome-like browsers and you want to do things now, install and use the Kiwi browser, while it still is usable, or go with Edge Canary and follow the instructions in this link: Kiwi Browser is officially discontinued

Hope you enjoyed this presentation and, as always, enjoy Lichess and LiChess Tools! I am always open for suggestions regarding my work and ideas for the future. Have fun!