Note: This article is about Chromium based browsers.

Remember the days when computers were configured to present the filesystem to the network by default in read/write mode? Those were the days. Today, though, everything is configured for security and browsers are no exceptions. One thing that annoyed me yesterday was CSP (Content Security Policy) which disallowed me to fetch from a web site information from another web site which was happy to provide it. The culprit was a meta tag that looks like this:
<meta http-equiv="Content-Security-Policy" content="...">

The content was configuring default-src, connect-src, style-src, frame-src, worker-src, img-src, script-src, font-src! Everything. But I wasn't looking for a hack to disable CSP (well I was, but that's another story), I just wanted to test that, given a friendly CSP, I could connect to a specific web site and get the data that I wanted and do something with it. Surely in the developer tools of the browser I would find something that would allow me to temporarily disable CSP. No such luck!

Then I looked on the Internet to see what people were saying. All were complaining about "Refused to connect to [url] because it violates the following Content Security Policy directive..." and how it annoyed them, but there was no real solution. Here is what I found:

• browser extensions to remove the CSP header
  • I assume this works, but it wasn't my case
• browser extensions to remove content from the page from the Developer Tools
  • I tried one, but when it changed the content now the browser was crashing with an ugly Aw, snap! page with a Status_Access_Violation status
• I tried ticking the web site's settings for Insecure content
  • How naïve to think that it would allow loading of insecure content
• I tried browser command line flags and experimental flags
  • nothing worked

I was contemplating hacking the browser somehow when I stumbled upon this gem: Override files and HTTP response headers locally.

It is almost exactly what I was looking for, only it doesn't replace content with regular expressions but saves the entire content of a URL on the local drive and serves it from there, modified in whatever way you want. So if you want to alter a server rendered page you're out of luck.

How did I use it to remove the CSP? I went to sources, I configured the local overrides and I then edited the page (in the Sources panel) and simply deleted the annoying meta tag. Now it worked.

Hope it helps!

Intro

  I developed an extension for Chromium based browsers that enhances and expands the functionality of the lichess.org web site. Called LiChess Tools, it has so many features that I am sure people are overwhelmed by them and don't know how to use them all. In this blog post I will explain what the Explorer Practice feature is and how it can help anyone master any opening. Let's dive in.

Long story short

  In order to do this you need:

• a Chromium-based browser like Chrome, Brave, Kiwi and so on. (the latter also works on mobile devices while allowing browser extensions)
• installing the LiChess Tools extension in it (don't worry, it's completely free, ad free, spam free, open source, MIT licensed)
• go to the lichess.org website to the Analysis board or Study pages
• open the Opening Explorer and click on the little button on the top left side to enable Explorer Practice

  Explorer Practice is exactly what it sounds like: it uses the information from the Explorer database to play the moves of the opposing side. This works for the Masters tab, for the Lichess tab (where you can select the type of game and player level range as well) and even for the Player tab, where you can train to play as or against a specific lichess player. You can even play against yourself! How cool is that?

  At the very end, when you reach a position not in the lichess database, a computer evaluation will reward you with a smiley for your efforts. This feature, like all other LiChess Tools features, are fully customizable on the Lichess Preferences page.

Short story long

  So let's go through a concrete example. As a total chess noob, I want to learn an opening that will take everyone by surprise. I will probably not find a lot of informational videos about it, since it's so rare no one knows about it. I will not find books or blog posts about it, either. All I have to go for is a name: Grob's Attack! It sounds so cool that I am ignoring its entry in Wikipedia that says:

International Master (IM) John Watson writes, "As far as I can tell, 1. g4 is competitive with 1. h4 for the honour of being White's worst first move. Against an informed or skilled opponent, it is simply masochistic."

  Let's follow the steps then. You obviously have a browser and you have installed LiChess Tools already. So let's open lichess.org:

  The simplest way to start is to go to the Tools menu -> Analysis board. Just clicking on the Tools menu gets us there. The same things work for a Study chapter, with the difference that the Study feature will preserve your moves (so you can create a repertoire as you play) and also it will show the Explorer moves. Using the Analysis board is considered more of a fun game, so the Explorer moves are hidden while Explorer Practice is enabled. Let's open Analysis:

  The Opening Explorer is a Lichess feature that tries to find the current position in the database and display the most common moves, winning statistics and recent notable games that reached it. You toggle it by clicking its button  or by the key shortcut E.

  Note the little tab-like button on the top-left corner of the explorer, the one with a target hit by an arrow (). It will toggle the Explorer Practice feature provided by LiChess Tools. You can also use the key shortcut shift-L, to align with the lichess L shortcut which toggles the computer evaluation.

  Before we enable Explorer Practice, though, we must choose our opponents. Since I am a noob I don't want to test my opening against grandmasters, only other amateur players, so I am going to have to select the range of players and type of game I am looking for. You do that by clicking on the small cog button on the top-right of the Explorer window (). This allows us to select, let's say, players up to 1400 rating and only in blitz games. You can, of course, leave all games on, but be warned, dedicated players often play bullet and ultrabullet to hone their skills and selecting those types of games will increase the level of difficulty, while also providing a lot more games to choose for.

  Now we are ready. Close the Explorer settings and click on the Explorer Practice button. As explained before, the list of move statistics disappears, but we can finally test our opening. Move 1. g4, which defines the Grob opening. There! Black moved automatically. And not some computer brilliancy, 20 moves deep and impenetrable even when they try to make a bad move. No, these are actual human moves.

  Once you finish the available moves, a smiley (sad or happy) will be your reward.

  Oh no! I am such a noob.

  Play again and again and again and learn how other people react to your moves. But sometimes you need some computer evaluation. Guess what? You can play the moves while the computer evaluation is running! It's not cheating, you are not actually playing, you are learning! Compare any move you make with the computer evaluation, learn what is best when you are not sure how to continue.

  In the end, remember that all feature of LiChess Tools are customizable in the Preferences page. You can turn them on, off or choose various parameters for them. For the Explorer Practice you can turn it on/off, but also can choose whether to show the smileys at the end of a run.

What then?

  If you trained the opening in a Study chapter, you now have a huge branching repertoire PGN chapter. You can start to analyse it for patterns. Use another cool LiChess Tools feature: auto evaluation. Just right click on any of the moves and select Evaluate terminating moves. The local browser engine will start analysing all of the last move of every branch and write a comment with the computer eval. Now you can see how successful you've been.

  Also, if take back the last move before you ran out, you usually get just one or a few games in that position. Looking at the rating of the players can give you an idea of your current chances against opponents of that level.

  Are you kicking ass? Maybe it's time to increase the level of your opponents! Or maybe it's time to select that friend of yours who always beats you at chess and train against his signature moves!

  Good luck and let me know how it went! I love to get feedback from people.

  If you got this far, I will gift you a warning and a bonus game from a practice session. The warning is that I've been playing around with Explorer Practice and it is very addictive! Be warned :) And now the game:

LiChess Tools is a Chromium-based browser extension (meaning Chrome, Brave, Edge, Kiwi - which also works on mobiles - and others, as long as they have a Chromium version equal or higher to 111) that extends the functionalities of the lichess.org web site. This page is the user manual for the extension, cataloguing all of its current features and explaining how to use them.

All of the features below can be individually turned on or off from the Preferences menu, the LiChess Tools menu entry. Note that many of the options will be hidden until you toggle Advanced Preferences - these features will be marked with Advanced in the category section.

Here are the available features in LiChess Tools v2.2.2, in the order of decreasing approximate importance:

Extended interactive lessons

category: Study
values: Play all variations/Show score/Study links in comments in same window - defaults to all

This feature may be the flagship of the extension, as it allows you to play an Interactive lesson chapter by going through all variations instead of just the mainline. The default lichess behavior is to only follow the mainline, considering all sidelines as bad. With the new behavior all moves in the PGN tree are good, while the ones missing are bad. You can mark the bad variations with glyphs (good move, mistake, blunder, etc.), for example, to indicate if a move is bad or good, but you can continue playing it to see why. 

There is a mechanism to choose what the computer will play next as your opponent. It uses the number of branches in 8 ply (4 chess moves for both players) to determine which is more probable. This value can be changed (see Next move probability depth feature) For example if you have something like 1. e4 (1. d4 d5 2. Nc3 (2. Nf3)) 1... e5 2. Nf3, the mechanism will see that there are two possible branches for d4 as opposed to one for e4, so it will choose d4 66% of the time. The probability can be changed manually by adding a comment in the move with the format prc:<number>, where the number is a percentage between 1 and 100. Also, if set in the Transpositions behavior feature, the moves can be picked from moves following transposing positions. 

When hints are not provided by the study creator, one will be generated to show how many possible moves are available.

There is also a system to compute accuracy when playing an interactive lesson by counting the good and the bad moves. This will be displayed as a percentage at the end of the lesson and can be turned off by option.

The lichess UI remains the same, therefore the area in which to explain why any other move is wrong only appears on mainline moves. That is why this feature also adds a context menu item for nodes in interactive lessons to enable editing that information. As usual, when a "bad" move is made, the text to be displayed to the user will be taken from the first child (next move) of the current node (move). Therefore in order to make this work you have to right-click that node and explain why bad moves are wrong. This might be a bit counterintuitive, as you may have several moves following the current position, but the explanation has to be set to the first next move.

Options:

• Play all variations - enables the Extended mode for interactive lessons, allowing you to play all variations with the computer picking random moves from the ones available in the PGN
• Show score - shows the score at the end of the lesson. One can disable this to reduce frustration or for other reasons.
• Study links in comments in same window - this makes links from move list comments which lead to studies open in the same window. The reason for this is that you want to continue a variation that is split into multiple chapters or that leads to another study in the same window, especially in Extended Interactive Lesson mode. Now you can utilize this with the Bookmarks option of the Move List Options feature to jump from move to move and chapter to chapter.

These options are also available in the action menu (hamburger button) of the Analysis board when in a study chapter that is of type Interactive Lesson. This allows to quickly enable/disable just these relevant settings.

Notes:

• one can play all variations of an interactive lesson with multiple branches only with the LiChess Tools extension installed, so if you create such a lesson only people with the extension can enjoy it. It would be nice to let everybody know that in a comment if you share it.
• asking to show the next move will show a random move of the possible ones. Click on the button multiple times to go through more of them. Be warned that pressing the button is seen by the scoring system as a fail.

Ctrl-right to play random next move from list

category: Analysis/Study
values: yes/no - defaults to yes

This feature will allow you to play a random move by pressing Ctrl-right. There is a mechanism to choose what the computer will play next as your opponent. It uses the number of branches in 8 ply (4 chess moves for both players) to determine which is more probable. This value can be changed (see Next move probability depth feature) For example if you have something like 1. e4 (1. d4 d5 2. Nc3 (2. Nf3)) 1... e5 2. Nf3, the mechanism will see that there are two possible branches for d4 as opposed to one for e4, so it will choose d4 66% of the time. The probability can be changed manually by adding a comment in the move with the format prc:<number>, where the number is a percentage between 1 and 100. Also, if set in the Transpositions behavior feature, the moves can be picked from moves following transposing positions. 

Ctrl-left works almost like the left key, going to the previous position, but in this case it will go to the position you came from, not from the previous position on the line you've jumped to.

Notes:

• if set in Transpositions behavior, Ctrl-right may choose a move from another line, but made from the same position, which means that going "back" will go to the previous position in the current line, not the original one. Use Ctrl-Left to return to the position you jumped from. 
• the keyboard shortcuts will be shown in the keyboard help popup if this feature is enabled

Behavior of transpositions

category: Analysis/Study - Advanced
values: exclude if same line/don't add identical next moves/play moves from transpositions - defaults to none

This feature determines what a transposition is for other features that use transpositions. The options are:

• exclude if same line - two identical positions in the same PGN will not be considered transpositions of one another if they are in the same line of moves (one came before the other) (see Highlight moves in analysis and Show next moves from transpositions)
• don't add identical next moves - when showing next possible moves at the bottom of the move list, if adding them from transposing positions, don't add the same move twice (see Show next moves from transpositions)
• play moves from transpositions - when picking a next move to play, use transposing positions as well (see Ctrl-right to play random next move from the list and Extended Interactive Lessons)
• none - when none of the values above are selected, any two identical positions will be considered transpositions, the move list can show multiple identical moves if they are coming from different transpositions/lines and the extension will not pick next moves using transpositions.

Next move probability depth

category: Analysis/Study - Advanced
values: equal/one move/two moves/three moves/five moves - defaults to 4 moves (8 ply)

This configures the mechanism calculating the probability of a next move in the PGN (see Extended Interactive Lessons and Ctrl-right to play random next move from list). The default value goes 4 moves for each player to see how many branches follow. It will then weigh each next move in the list based on that. If you want to turn this off completely, just select equal, which means it will not look at following moves at all. 

Variation arrows from transpositions

category: Analysis/Study - Advanced
values: yes/no - defaults to yes

This feature is showing variation arrows for transpositions, as defined in the Transpositions behavior feature.

Enhanced PGN import

category: Analysis
values: yes/no - defaults to yes

Another important feature of LiChess Tools, this one makes changes to the import mechanism in the Analysis board page. You can now import multiple PGNs at the same time and they will get merged into a single one. It is great for creating repertoires, analyzing the games of a specific player or creating Extended Interactive Lessons. From the Analysis board you can go to options and turn it into a study.

As part of this you will also get the Escape key functionality for the FEN and PGN inputs, blurring the input and allowing key shortcuts again.

Notes:

• the import mechanism in Analysis board ignores comments from the PGNs. This is a lichess limitation and to get around it I would have to rewrite the entire thing. I may do that, but it's not planned.
• the import in Analysis board is different from the one in Studies. The one in Analysis board is client based, while the one in Studies is on the server. That is why I can only alter the one in Analysis board.
• there is no logical limit to how many PGNs to import, but the Analysis board has a limit of about 5000 moves. Also, the API to turn it into a study has a size limitation, so if you try to turn a huge analysis to a study and it fails, know that it is too big. Highlighting moves on huge PGNs also is slow. So use with care.
• From v2.1.21 the merge mechanism will check if the PGNs start from different positions and only merge what starts from the same position. Previously the merge seemed to be working, but it made no sense from the standpoint of PGNs, resulting in an invalid PGN that cannot be loaded.

Friends box

category: Friends
values: Default/Menu/Open/Hidden - defaults to Menu

This has evolved a lot. Originally it was automatically opening the friends box, but then several requests came that complained about the placement of the friends box and how distracting it was. So the current version of the feature can either:

• Default - the default behavior of the friends list: stays in the bottom-right corner, only updates when opened, which requires a user click.
• Button- the friends box is removed and replaced with a friends button, similar to the Notifications one. It will update in real time with the number of friends online and will change color when any one of them is playing.
• Menu - the friends box is removed and replaced with a friends menu. It will update in real time with the number of friends online and will change color when any one of them is playing. It will also show the number of playing friends in a small blue square.
• Open - the default behavior of the friends list, but it will open automatically when loading the page
• Hidden - the friends list will disappear completely

Notes:

• clicking on the main menu item directly will open the friends page, but not on mobiles
• when the width of the page goes under 972px, menus are grouped under a hamburger menu. The Friends menu will disappear and become a button in that case.

Live friends page

category: Friends
values: yes/no - defaults to yes

This is linked to the Friends box feature. The default behavior is to load whatever list of friends you have and then leave it at that. This feature will update the friends list in real time, while also allowing filtering by who is online, who is playing and (if player voice alerts are enabled) which player is muted. 

Each player will have a TV icon as well and (if player voice alerts are enabled) a mute/unmute button to include them in the alerts. (see Sound and voice alert with friends start playing)

Sound and voice alert when friends start playing

category: Friends
values: Ultrabullet/Bullet/Blitz/Rapid/Classical/Standard only- defaults to none

This feature will beep and spell out the player name and type of game they started. The type of the game can be chosen from the values. The definition of the game type comes from lichess, which assumes a typical game will be around 40 moves.

You can also choose which specific players to have the alert for, by going to the friends page and clicking the mute buttons. (see Live friends page)

If you select Standard only, then the alerts will only be sounded for the Standard variant of the game.

Notes:

• Chromium (and other) browsers disallow sounds from page load until the user does something like click on the page. In case an alert is attempted and audio is not allowed a red icon will appear next to the top buttons, which will disappear once the audio is allowed again.
• The audio icon is part of lichess, which will also display it once sound is attempted but not allowed. At this time, the lichess icon will NOT disappear unless you click on it, different from how LiChess Tools uses it for alerts.
• If you are playing a game on another tab, the sounds will not be played if the Quiet mode on all tabs feature is enabled.

Practice against moves from Opening Explorer

category: Analysis/Study
values: yes/no - defaults to yes

This is another great feature that allows you to play against whatever is selected in the Opening Explorer. Select masters to play against the best players, select Lichess and select the range of player to train against and select specific users to test your strategies against their played games. The feature can be turned on/off not only from Preferences, but also from the Explorer config screen.

In order to use this feature you need to go to the Analysis board or a study, open the Explorer and click on the icon next to the Masters tab, the one that looks like an arrow hitting a target.

Notes:

• you can toggle Explorer Practice by clicking on the arrow in the target button, but also with shift-L, to make it easier to switch between computer evaluation and the practice mode
  • the keyboard help popup shows this shortcut if the feature is enabled
• the moves in the explorer window will get hidden in Analysis board, but not in studies. The motivation being that one is more like a game, with no lasting effects, the other is research.
• if the Show emojis when out of moves feature is enabled in Explorer Practice options, then at the end of a run, when there are no more moves available in the Explorer for the feature to make, a quick computer analysis will be run to show you a smiley (happy or sad).

Explorer Practice options

Options for the Explorer Practice feature:

• Show emojis when out of moves - set by default - will run a short computer analysis when out of moves in Explorer Practice, then show an happy/sad emoji based on the eval.

Highlight moves in analysis

category: Analysis/Study - Advanced
values: Last move in each variation/Not commented last moves/Transpositions to current move/Highlight board when out of main line - defaults to Last move in each variation/Not commented last moves

This feature will highlight moves in the analysis move list. Each option highlights a specific thing:

• Last move in each variation - for each branch, highlights the last move
• Not commented last moves - for each branch, highlights the last move that has no comment or is not a mate
• Transpositions to current move - highlights positions that are identical to the current one in the same PGN (see Behavior of transpositions to change what the extension considers a transposition)
• Highlight board when out of main line - dims the board a little when moving out of main line

Extra context menu options

category: Analysis/Study
values: Copy branch as PGN/Engine evaluation for last moves/Highlight all transpositions/Remove superfluous - defaults to Copy branch as PGN, Engine evaluation for last moves, Remove superfluous

This feature will add extra options to the Analysis board/Study move list context menu. The options are:

• Copy branch as PGN - this works in Analysis board and Studies and turns all the previous moves of the line you are in, plus all the branches after the move, into a PGN in your clipboard.
  • If you press the Shift key when clicking on Copy branch as PGN the copied PGN will start from current position, not from the beginning of the original chapter.
  • If you press the Control key when clicking on Copy branch as PGN each variation branch will be copied as a separate PGN.
  • If you press the Alt key when clicking on Copy branch as PGN then the PGN will get copied only to the current position.
  • You can use it to split large PGNs by copying variations into their own chapters, then maybe deleting them from the original one.
• Engine evaluation for last moves - this works only for Studies, because it involves move comments. It will go through all of the uncommented last moves and create a comment in the form eval:<evaluation> using the local computer engine. The evaluation will stop at the engine depth selected in Preferences (see Custom analysis engine depth).
• Highlight all transpositions - this works for both Analysis board and Studies and highlights all moves that have transpositions. You can configure what a transposition is in Preferences (see Behavior of transpositions)
• Remove superfluous - for purposes of saving space, this removes the following entries from the context menu:
  • Annotate with glyphs - there is a button for this under the board
  • Comment on this move - there is a button for this under the board
  • Copy variation PGN - LiChess Tools already provides a better version

Custom analysis engine depth

category: Analysis/Study - Advanced
values: a number representing the depth - defaults to empty

This feature will allow you to set a depth level for the computer engine. If the current move has a smaller depth level (let's say it was cached in the cloud with that level) it will start the local computer evaluation. Once it reaches the set depth, the engine will stop. You can restart the analysis by pressing the little + button next to the computer engine depth indication.

This feature is also used as the level at which to consider evaluation done for the Engine evaluation for last moves option (see Extra context menu options)

This feature is also used in Practice, where it controls the level of play (See Custom analysis engine options)

Custom analysis engine options

category: Analysis/Study - Advanced
values: Always use local engine for evaluation/Apply in Practice mode - defaults to none

This feature controls the behavior of the analysis engine used in Analysis board and Studies.

Options:

• Always use local engine for evaluation - Use this option to never show computer evaluations from the cloud. For example if you want to not see evaluations over a certain level or in practice mode. You can also toggle this on/off from the Analysis board hamburger menu.
• Apply in Practice mode - Use this to apply both the custom engine depth and the no cloud option before in Practice mode. This means you can play against a computer of your own level and ignore cloud and table bases. You can also toggle this on/off from the Analysis board hamburger menu.

Show next moves from transpositions

category: Analysis/Study - Advanced
values: yes/no - defaults to yes

When you get to a certain position in the PGN which has transpositions, the next moves from those transpositions will be displayed under the move list, just like for a fork into multiple variations. You can configure what a transposition is, as well as if you want multiple identical moves to be shown or not and if the moves in this list should be considered by Ctrl-right and Extended Interactive Lessons in Preferences (see Behavior of transpositions)

Extra key shortcuts

category: Analysis/Study - Advanced
values: yes/no - defaults to yes

this feature adds extra key shortcuts to the Analysis board/Studies:

• first it changes the functionality of the i, m and b keys to work in Analysis board as well as Studies and to use all variations, not just the main line as the original lichess behavior. The functionality of these keys is to jump to the next inaccuracy, mistake or blunder, respectively
• it adds the same functionality to Alt-i, Alt-m and Alt-b, only for the opponent
• g and Alt-g cycle through good/brilliant/interesting moves
• it adds the ability to select any of the moves in the available moves lists:
  • press . (dot) and then a digit and it will make to the nth next move available in the PGN (see Transpositions behavior if you want to select moves from transpositions, too)
  • press Ctrl-. and then a digit and it will make to the nth next move available in the computer evaluation list
  • press Shift-. and then a digit and it will make to the nth next move available in the opening explorer list

Notes:

• the keyboard help popup now shows all of these shortcuts if the feature is enabled

Additional glyphs

category: Study - Advanced
values: yes/no - defaults to yes

This feature displays an extra # glyph on mate moves. Also it enlarges glyphs on mobile devices.

Notes:

• The lichess UI allows for multiple glyphs on the same move. The one shown on board will just be the first one in the list.
• Originally this feature was created to show annotations that lichess was not showing. From September 2013 lichess started natively showing all annotations, therefore eliminating the need for much of the functionality of the feature. Since the changes on lichess are volatile, this feature might need to go back and forth as well.

Extra analysis charting

category: Analysis/Study - Advanced
values: Material/Principled/Max tension/Max potential/Find interesting moves/Chart smoothing/on Eval gauge - defaults to Material,Principled,Max tension,Chart smoothing,on Eval gauge

This experimental feature is adding extra lines on the computer analysis chart. In the search for good/great/brilliant moves - as shown on chess.com and requested by a lot of players, the lines drawn over the normal computer eval chart are meant to give some indication of what is going on without asserting an exact significance of the values. The lines are purposefully left without explanation, in the hope that players recognize some aspects of the game in the numerical values charted and their intersection.

For example, many of the moves generally considered brilliant see a steep increase in evaluation, but a steep decrease in material and/or principled position, indicating a sacrifice or an unnatural seeming move that wins the game.

If Find interesting moves is enabled then an extra entry in the analysis summary shows the total of interesting/good/brilliant moves in the PGN. The feature will also attempt to find such moves automatically.

Options:

• Material - green dashed line shows a more classical material difference between the sides
• Principled - blue dashed line shows how principled the position is. This means stuff like square control, freedom of movement, developed centralized pieces, etc, but excepting material value.
• Max tension - red dotted vertical line shows the point of maximum tension in the game. Tension here is defined as the total material that can be captured by both sides in just one move.
• Max potential - green dotted vertical line shows the point of maximum potential (similar to tension, but it superficially looks at capture chains)
• Find interesting moves - if enabled, this will show good/brilliant/interesting moves in the analysis summary as a link that cycles through them. It will also automatically find some categories of interesting moves and mark them with !? glyphs (if not already annotated). The glyphs added by this algorithm will be temporary (not persisted on the server).
• Chart smoothing - if this is enabled, temporary spikes in the charts will be removed. Example: you take a bishop with a knight, the material jumps 3 points in your favor, but the next move the opponent takes your knight, so the material goes back to 0. The smoothing function will attempt to remove these meaningless jumps in material. 
• on Eval gauge - if this is set, two lines (one green and one blue) will appear on the evaluation gauge when it is visible, changing with the values of material and principled values, respectively.

Notes:

• I called it "interesting moves" because there is no objective good/brilliant move algorithm. I will continue to work on it in the future.

Change chapter names from PGN tags

category: Study - Advanced
values: yes/no - defaults to yes

This feature will give you the option to quickly change the name of a study chapter to either the content of its Event PGN tag or the White and Black PGN tags combines when editing the chapter. Sometimes people want to import a series of PGNs into a study, but only the first chapter gets a proper naming from the PGN tags, the rest getting the default Chapter 2, Chapter 3... etc name. With this you can go to each of them, edit them by clicking the cog button next to their names, then choosing with one click the name the chapter should have.

Study chapter navigation controls

category: Study - Advanced
values: yes/no - defaults to yes

This feature will add a set of buttons at the end of the chapter list in a study. The buttons allow to navigate to the first chapter, previous chapter, random chapter, next chapter and last chapter respectively.

Sticky study Preview mode

category: Study, Interactive Lesson chapters - Advanced
values: yes/no - defaults to yes

This feature will keep you in Preview mode as you move from one Interactive lesson chapter to another. As one trains using interactive lessons, at the end of one they are presented with the option to move to the next chapter. The default lichess behavior is to show you the chapter in edit mode (assuming you are the owner or a contributor) which requires you to press the Preview button all the time to continue training, after also having seen the move list. Now you can press Preview once and play chapter after chapter with no hassle.

From version 2.1.51 on, this is preserved also between page reloads, so you will have to manually unset Preview mode to edit a study Interactive Lesson.

Show game opening names

category: General
values: yes/no - defaults to yes

This feature will load the lichess opening name for games and display it. When watching a game or analyzing it, the opening will be shown under the player names. For mini-games (the tiny ones that appear when hovering over a game link or put somewhere on the page) it will appear at the bottom. For Analysis board, if the wiki side is empty, it will show the opening there, assuming the position is in the local cache.

Show pawn structures

category: General
values: Enabled/Only named structures/Fuzzy search - defaults to Only named structures/Fuzzy search 

This feature is disabled by default because it's pretty technical, but I want to enable it in the future. What it does is, similar to Show game opening names, show the pawn structure of the current game. Because it's all very local, with no API requirements, it also works for current game pages.

An entire blog post about it can be found here: The Pawn Structure feature in LiChess Tools

Options:

• Enabled - enables or disables the feature - disabled by default.
• Only named structures - show only structures with names. This is enabled by default, but of course will not work unless enabling the whole feature. If you disable this, you will see a very technical name for each and every move.
• Fuzzy search - this will show named pawn structures within a certain proximity. It helps to determine the general structure, even if it might not be totally accurate.

Notes:

• This feature has a lot of potential, as the pawn structure is something that informs medium to long term plans. Knowing these will help you grow a lot as a chess player.
• If the pawn structure is named, it will show as a link which can be clicked to learn more.
• If the structure is not found in the available list, it will be searched from the opponent's perspective, in which case it will be shown with a (R) at the end if found

Show player country flags

category: General
values: yes/no - defaults to yes

A very early feature of the extension, it has also evolved a lot. The latest version is much more efficient in terms of how it gets the data from the server and adds flags to almost every place where a user link is shown. I am aware that this might be distracting and I am planning some detailed values to choose how wide spread the flags will be. Also, did you notice the flags are lazily flapping in the wind?

Autosave analysis for reload

category: Analysis - Advanced
values: yes/no - defaults to yes

This happened to me a lot of times: I am analyzing something and I accidentally swipe the touchpad or press some key that reloads the page. All my work is gone! This feature keeps track of the latest modifications of Analysis board PGN and reloads it on page load. It is your choice if you want to import it or not by going to the PGN text area and clicking the Import PGN button.

Notes:

• The saved PGN as well as the Analysis board import text area content will be overwritten by whatever move you make, so if you fail to import the PGN and make a move, you lose the data. 

Opening explorer player features

category: Analysis/Study - Advanced
values: Me button to switch to your player - defaults to Me button to switch to your player

This feature controls the choice of the player in the Opening Explorer.

• Me button to switch to your player - adds a tab next to Masters database, Lichess and Player named Me. If you click on it the choice of the player will toggle from your user to the last selected user.  The button can be shown/hidden from the Explorer config screen as well. 
• Ability to remove players from the name list - adds the ability to delete players from the list of username previously chosen in the player tab
  • Lichess implemented this feature natively so it was removed from LiChess Tools in v2.1.21

Notes:

• The Me button will appear only if you have any another players configured for the Player tab name list

Various TV options

category: TV
values: Link for current TV game/Bookmark for current TV game/Streamers current games/Friends current games/Previous two games in player TV - default to all

This feature has been introduced in version 2.2.0 to merge four existing tools for TV with the same functionality. Make sure you review your Preferences.

Options:

• Link for current TV game - adds a link to the currently played game in TV on the title, just like in Analysis mode
• Bookmark for current TV game - adds the ability to bookmark a currently playing game by hovering the mouse next to the game title
• Streamers current games - adds a Streamers tab in the Current Games page where you can see the games of all currently playing streamers
• Friends current games - adds a Friends tab in the Current Games page where you can see the games of all currently playing players that you follow
• Previous two games in player TV  - In category TV (when you are watching Blitz games for example) you get a list of two previous games in that category under the main playing board. For player TV, when you go to a specific player to watch their games, this is missing. This feature will add the two previously played games by the player you are watching.

Previously viewed game menu item

category: TV - Advanced
values: yes/no - defaults to yes

This feature adds an extra menu item in the Watch menu that will take you to the previously seen chess game. Just opening any game will consider it as watched. If you go to the previously watched game, then clicking on the menu item again will take you to the game you watched before that, and so on. The total number of remembered games is 10.

Last visited study menu

category: Study - Advanced
values: yes/no - defaults to yes

This feature adds an extra menu item in the Learn menu that will take you to the previously visited study. Just opening any study will consider it as watched.

Styling for study comments

category: Study
values: yes/no - defaults to yes

This feature adds the ability to style the comments in your PGNs. You can choose between a number of styles that you can place anywhere in a comment with cls:<styleName>. It also adds a new button next to the comment button in a study chapter (a quill in an inkwell) that with cycle through all of the classes at the very beginning of the comment to the current move. The usable classes are: red, orange, yellow, green, lightgreen, cyan, lightblue, blue, violet, magenta, pink, underline, strikethrough, italic, bold, cursive and nothing or clear to clear existing class.

Notes:

• the name of the class declares the intent, not the actual result of the styling. Given that there are dark and light themes on lichess, the styles have been updates to be readable in both situations, using shadows or slightly different colors.
• the style of the comment will only be visible to you and people with LiChess Tools installed. All others will see cls:blue or whatever in the comment.
• you can actually put anything as the class name and the comment will be put inside a span with the class lichessTools-<your class name>, which allows you to customize your style even more with the addition of custom styles from other extensions like Stylus. In this case all people seeing the comment would also need the custom styling.

Show the order of arrows and circles

category: Analysis/Study - Advanced
values: yes/no - defaults to no

This feature shows a number on each drawn shape, so that you can see their order. Sometimes in studies you want to convey the moves that could follow the current position using arrows and circles, but in certain situations the order of the moves is important. Set this to true in order to see which arrow comes first.

Ctrl-Space for best computer move

category: Analysis/Study - Advanced
values: yes/no - defaults to yes

The default functionality of the Space bar in analysis mode is to start the computer engine if not started or play the best move in the computer move list. Because I was often using lichess with YouTube in another tab, pressing Space accidentally was always an annoyance. This feature changes the shortcut to Ctrl-Space.

Notes:

• A previous version of the feature was using Shift-Space, but it would overlap with a lichess feature.

Clear chapter artifacts

category: Study - Advanced
values: yes/no - defaults to yes

This feature allows you to choose which artifacts to clear from only the current study chapter. To use it, click on the cog button next to the chapter name and, instead of the Clear annotations button now you get the choice of just comments, glyphs (good move, bad move, that kind of thing) and drawn shapes (circles and arrows) as well as all of the above. There is an extra option of clearing all PGN tags. This feature also adds individual delete buttons to all tags in the current study chapter.

Notes:

• this only works for the current chapter, as the site does not have access to the moves or tags in the PGNs of other chapters
  • the feature could be modified to work on all chapters, but it would have to first select the chapter, then alter it, which I think is not something that should be done automatically.
• this works on the client, which means that instead of sending one command to the lichess site, it creates delete requests for each item. If the PGN is large, this can take a long time.

Customize chat buttons

category: Play
values: yes/no - defaults to no

When playing the first few moves and after the game has ended, lichess gives you the option to click on some buttons for some standardized message like Hello, or Have fun! This feature will give you the ability to customize these buttons.

The interface may not be the most intuitive. To edit buttons you click on the little cog button, to exit edit mode you click on the same. This allows altering, adding and deleting buttons. Click on the small X button to enter delete mode, after which you click on buttons to delete them. Delete them all and you get the default buttons back.

In order to add or alter buttons you have to write in the chat text input something like <name>/<message>. Example: hi/Why, hello there, old chap!, which will create a button with the text HI which will send the chat text "Why, hello there, old chap!". In order to add the button, you click the + button. In order to alter an existing button, you click on that button.

Notes:

• the name of the button can be only 2,3 or 4 characters long.
• if you attempt to add or edit a button without a recognizably correct input text, the input box will jiggle to let you know you are doing something wrong
• to edit the end of game buttons you have to reach the end of a game. This may be inconvenient and I am thinking of solutions
• I am considering expanding this feature with buttons for the duration of the game as well as for spectators. Let me know what you think!

Timeline notifications

category: General - advanced
values: Forum post/Blog post/Lichess announcement/Stream start/Simul create/Simul join/Team create/Team join/Tournament join/Following/Study like/Blog post like - defaults to Forum post/Blog post

This feature will add a notification when there are unread items in your Timeline. The default values include comments on forum or blog posts you follow, forum or blog posts from people you follow. Basically posts that you wouldn't normally be notified about. 

Clicking on the notification will take you to the Timeline page. Opening it from here or anywhere else will consider the items read and so you will not see the notification until new ones turn up.

Notes:

• there will be no notification if quiet mode is on (meaning you are playing a game or you have quiet mode manually set)

Mobile device features

category: General
values: Evaluation gauge/Hide the octopus mascot/Analysis arrows/Random move button/Scroll lock when playing - defaults to Evaluation gauge, Random move button

This feature alters some behavior specifically for mobile devices. There are Chromium-based mobile browsers, like Kiwi, which accept browser extensions. Enjoy LiChess Tools on mobile installing one and then the extension, then customize the experience with this feature. The options are:

• Evaluation gauge - makes the evaluation gauge visible even on small screen widths (for mobile)
• Hide the octopus mascot - hides the octopus mascot that takes a lot of space in Interactive Lessons
• Analysis arrows - adds a button next to the Explorer and Practice ones that allows for drawing arrows and circles on mobile devices in Analysis board and Studies
• Random move button - adds a button between the previous and next move buttons that will randomly play a move from the move list (same functionality as Ctrl-right to play random next move from list on desktop)
• Screen lock when playing - will lock scrolling and zooming on mobiles when playing (or during puzzles). A lock icon will appear as a button on top of the screen that you can tap to temporarily lock/unlock the scrolling on that page (refreshing or going to other screens will again automatically lock the screen until you unset the value from Preferences).

Notes:

• Because both the shape drawing and random move buttons take up space, this feature also changes the style of the buttons so that they take two rows of space: the first for utility buttons (left) and the hamburger menu button (right) and the second row for PGN navigation buttons (first, previous, random, next, last move). If none of the two options mentioned are enabled, then the regular "one row for all buttons" style is used.
• Screen locking when "playing" doesn't necessarily means when playing, but when lichess is in "playing mode". For example that also means when you haven't yet started the game or when you just ended the game or when you are doing puzzles.

Mobile device game features

category: General - Advanced
values: Game arrows/Standard buttons - defaults to none

This feature alters some behavior specifically for mobile devices when in-game. This means playing, or solving puzzles or even watching running TV games. There are Chromium-based mobile browsers, like Kiwi, which accept browser extensions. Enjoy LiChess Tools on mobile installing one and then the extension, then customize the experience with this feature. The options are:

• Game arrows - adds a button next to the Analysis board one that allows for drawing arrows and circles on mobile devices in games
• Standard buttons - the default behavior of lichess.org is to hide the move navigation buttons for games on small screens, instead showing one line of PGN with previous and next move buttons on either side. Set this in order to see all buttons (including the Game arrows one above). For normal play this is not necessary, but in puzzles, TV and such screens this is the only way to access the drawing arrows button.

Show evaluation of explorer moves

category: Analysis/Study - Advanced
values: From computer eval/From cloud/From winning stats/Hidden - defaults to From computer eval/From cloud

This feature will show the move evaluation for Explorer moves. This information is retrieved from three different sources that can be enabled or disabled: the local computer eval, the lichess cloud (or chessDb if lichess ever allows it) and the Explorer stats themselves. If Hidden is set, then the settings for evaluation will remain, but the column will not be shown. The feature can be hidden not only from Preferences, but also from the Explorer config screen. 

The statistics eval will only be shown if there are 100 or more games in the lichess database for that move and not all won by one side. Its faded coloring signifies that it's not a true eval, but if enabled can compare with the other values. 

Computer evaluations will have a white color, stats evaluations will have a grey faded color and the cloud evaluations will be slightly blue. If the chessDb option will ever be allowed, it will show either red, green or bright green for bad, good and best moves.

This feature also adds a warning icon on the right side of moves that have large differences between evaluation and winning stats, indicating a possible trap or gambit situation.

Notes:

• Unfortunately, the Content Security Policy (CSP) of lichess doesn't allow calls to chessdb.cn, but I am using the data from lichess' cloud-eval API. I am trying to convince developers there to allow the domain, but I wouldn't hold my breath.
• The more lines you have configured on your computer analysis, the more items in the list will be evaluated. Explorer can show 12 moves, for example, while the computer analysis is configured with Multiple lines=2, this means a maximum of 2 items in the Explorer will have an evaluation. With 5, you get 5, assuming the computer moves are in the Explorer list.
• There is an internal cache of these evaluations, so you can run the computer eval for some moves, then stop it, but when going to those moves you will still see the evaluations as done before at whatever depth was last computed.
• Take care with stats evals in positions with few games. It might tell you that you are absolutely winning, but that's just because no one played a winning move from that position. That is why eval from winning stats is disabled by default.
• The evaluations from cloud differ in depth based on how many moves you want to see. For example you could ask for just one move (the best in the position) and it might show you the eval with depth 55, but if you ask for two moves it will give you depth 44, for 20 moves you would get depth 13 or even nothing. To account for this, cloud eval combines the values from two calls: for 5 moves and for 10 moves. Since the cloud data comes from local evals, server evals and different versions of Stockfish and I am combining two different depth evals, take the evaluation as an estimation, not a given.
• Changing the options for evaluation in Preferences will reset the local cache for each move.
• Lichess' cloud eval API will return 404 when no data is available, resulting in ugly red network lines and error messages in the browser developer tools. Those are not errors, but there is no way to hide them in Chromium browsers from JavaScript. If it annoys you, you can turn them off from DevTools (see https://stackoverflow.com/questions/4500741/suppress-chrome-failed-to-load-resource-messages-in-console)
• Depending on how much you do analysis and how overloaded the servers are, cloud eval might start returning 429 errors, meaning the servers report you are abusing them. A warning will appear every minute while that happens. The workaround is to disable From cloud and use just computer eval (which, of course, will also use cloud eval :-P). The configuration on lichess' side, at least for the moment, is 3000 calls per IP address per day. That's a bit low, but it might be enough.
• If computer evaluation is started and used as a data source, the cloud eval will not be accessed.

Show explorer moves leading to gambits

category: Analysis/Study - Advanced
values: yes/no - defaults to no

This feature adds a new column to the Explorer table showing the number of gambits reachable from the current position and for each move to play. The feature can be turned on/off not only from Preferences, but also from the Explorer config screen. 

Quiet mode on all tabs

category: Play - Advanced
values: yes/no - defaults to yes

When a game starts, lichess sets a quietMode variable to true, instructing various notifications to not be displayed. Unfortunately, that only happens on the page that one plays on. This feature makes all open lichess pages get the value for quiet mode from the same place, so they don't behave inconsistently.

There is also a button added to the lichess menu which can manually enable/disable quiet mode. Warning: once manually enabled, quiet mode will remain on until manually disabled! The normal game playing quiet mode will turn on and off automatically, as before, only it will affect all open lichess pages.

Note:

• when quiet mode is set, you don't get lichess notifications and also no voice alerts from the Sound and voice alert when friends start playing and from the Timeline notifications feature. Turn this feature off if that's not your desired behavior.

Colors for shapes on mobile

category: General - Advanced
values: 1/2/3/4 - defaults to 1

This is part of the Mobile Experience feature and it selects the count of colors you can use on mobile to draw arrows and circles. If you only want to turn the drawing mode on/off with a single tap, select 1.

Insert new chapter after current one

category: Study - Advanced
values: yes/no - defaults to yes

This feature adds a button to the create study chapter form with the text Create after current. Using this button instead of the normal Create chapter will create the chapter immediately after the currently selected chapter.

Show PGN in studies

category: Study - Advanced
values: yes/no - defaults to yes

This feature adds a textarea in the study Share tab called PGN. Similar to the one in Analysis board, it will show the PGN text of the current chapter. The PGN will be generated by the same code that generates the one from Extra context menu options and may differ from the one generated by the Copy PGN or Download PGN buttons.

Persist settings on study create/edit

category: Study - Advanced
values: yes/no - defaults to no

This feature will persist the settings for studies when you create or edit them. Then it will use the same values when creating new studies.

Also save options for browser private/incognito mode

category: General - Advanced
values: yes/no - defaults to no

This was a user request to find a way to save the options outside the local browser cache, as he was playing the game from incognito/private browser mode. Since no other solution was better, this saves the options as notes in the first chess game you ever played on lichess. So be careful that this will alter those notes, although I am not aware of many people using the private notes feature.

Notes:

• be aware that it will alter the private notes of the very first game you played on lichess
• the extension will use whatever options you have in the browser local cache. Only if they are not there it will take them from the notes. That means that you can do weird stuff like enabling the feature, saving options, disabling it, changing the options and now you will have different settings in normal and incognito mode. So use with care.

Move list options

category: Analysis/Study - Advanced
values: Indented variations/Bookmarks/Expanded move list/Hide left side/Open in new window/Eval button on the right - defaults to Bookmarks

This feature will change the functionality or appearance of the move list in Analysis board. There are already such changes with the Highlight moves in analysis functionality.

Options:

• Indented variations - this will make even variations that follow in line (when they are less than three, they are displayed one after the other in parentheses, like in a PGN text) show as tree branches, increasing readability and preparing for new features that will use this.
• Bookmarks - Study only - this will allow for bookmarks, which are very cool (read below), but a bit experimental. Let me know how they could be more of use to you.
• Expanded move list - Only for desktop resolutions (1260+ px), this feature is removing the left and right margins and expanding the move list to the edge of the screen and also downwards. It is meant to allow analysis on very complex PGNs.
• Hide left side - Most of the time the left side of the analysis screen is useless: chat, notes, study participants and stuff like that. With this, you can hide that side to gain even more space for the move list. This is intended to be used together with Expanded move list, but you can use it separately as well. 
• Open in new window - Study only - this adds a small button in the top-right corner of the page, just before the computer evaluation toggle. Clicking it opens a new window with just the analysis tools (move list, computer eval, explorer) that you can move to another monitor, for example, or resize and place wherever you want. Use the study SYNC button to keep the two windows synchronized. (the SYNC button only appears under the board when the study is set to Enable sync)
• Eval button on the right - this will move the computer evaluation button to the right side of the eval header and also make it a little bit smaller.

How bookmarks work:

• right-click on a move in a study move list and select Add/Remove bookmark from the context menu
• put any text in the textbox that appears (or remove it all to delete the bookmark)
• this will create a bookmark, which serves several purposes:
  • it will show as a named label in the move list (good for naming variations or making the PGN more readable)
  • it will allow to expand/collapse the branch from that move on
  • it will serve as an anchor for URLs to this exact variation
• for any bookmarked move you can right-click it and get:
  • Collapse/Expand all bookmarks - collapse and expand all bookmarks in the tree
  • Get bookmark URL - will copy to clipboard a URL to that specific move in that specific chapter and study (the link will look like this: https://lichess.org/study/<studyId>/<chapterId>#<bookmark name>)
  • Split chapter here - only if the bookmarked node has children (following moves) - it will create a new chapter with the following moves, then add a comment with the URL to the new chapter. If you want to also delete the following moves, press Shift when you click on the menu item. The confirmation dialog should reflect that moves will be deleted.

Notes:

• Bookmarks are saved in the comments as bkm:<label>
• Only you and people with the LiChess Tools extension (and bookmarks enabled) can see and use the bookmarks, the rest will just see the bkm:<label> in the comment
• Splitting a chapter with Shift-click DELETES THE EXISTING FOLLOWING MOVES from the initial chapter. Don't tell me you weren't warned.

Themes

category: General - Advanced
values: whatever themes are available - defaults to none

This is an experimental feature, the purpose of which is to accept user CSS themes as part of the extension.

Available themes:

• Performance - performance CSS changes, mainly attempting to remove all animations, which cause slow rendering
• Just Explorer - will hide the computer eval moves (but not the arrows, if enabled) and the move list when the Explorer is open. This will only be applied for mobile devices
• Mobile - a lot of style improvements for mobile, especially aimed at studies and interactive lessons
• Move colorizer - Each level of PGN moves is colored slightly differently and comments are italicized

Notes:

• The maintainer of the theme will be acknowledged in the Preferences page
• I have no skill to maintain CSS themes, so whoever makes the theme, if it meets with a minimum approval from me, will have to maintain it. A problematic theme with no signs of maintenance will be removed.
• Multiple themes can be applied at the same time, but beware of conflicts. 

Wiki pages based on FEN

category: Analysis board - Advanced
values: yes/no - defaults to yes

This feature will show Wiki pages on openings even if the order of the moves changes. Basically, it looks for the Wikibooks Chess Opening page associated with the current position.

Commands

The commands feature is actually a combination of tools that register themselves with the cliCommands tool. This enables you to type / and then a command and execute various functions, besides the standard ones. Since commands are executed manually, they have no visible Preference to disable them.

Here is the list of available commands:

• board - it will show/hide the board in Analysis mode (Analysis board and Studies). Use this with the Expanded move list and Hide left side options of the Move list options feature to have a move list filling the whole screen (good for presenting, for example).
• trapvalue - provided the current move is in the Explorer database, this command will calculate the trap value of the current position. For more details on what that means, check out How To Calculate The Trappiest Chess Openings Using The Lichess API. 
• copypgn ["fen"] ["separate"] ["tohere"] - this will copy the moves in the analysis move list (Analysis board and Studies) to the clipboard as the moves reaching the current position and any branching moves from it.
  • if fen is specified, the PGNs will start from the current position with the FEN tag specified
    • same as Shift-click on the Copy PGN menu item 
  • if separate is specified, each variation will be saved as a separate linear PGN
    • same as Ctrl-click on the Copy PGN menu item
  • if tohere is specified, the PGN only copies moves to the current position
    • same as Alt-click on the Copy PGN menu item
• readgame [speed] [voice] [instrument] - this will read the game moves from the current position. It will follow only the first variation of every node, ignoring the others.
  • speed is an optional integer number, defaults to 100. Larger values makes the speech faster, lower makes it slower.
  • voice is an optional integer index number, defaults to 0. Changing it will change the voice which reads the moves, depending on your own browser setup.
  • instrument is an optional integer index number, defaults to 0. Changing it will enable a sound to be played in the background, based on the computer evaluation, if the game has been analyzed.
  • example: /readgame 80 2 1

Hide score tally crosstable

category: Play - Advanced
values: yes/no - defaults to no

Another user request was to not see the crosstable, the thing that shows how many games you played with the same opponent and what the results and games were. It was intimidating. This feature will blur it out, but allow you to click on it to unblur it. It's a silly feature that may not survive long because there is also the Zen mode lichess option which overlaps this behavior, but it's here for the moment.

The need

  I don't know about you, but I've been living with ad blockers from the moment they arrived. Occasionally I get access to a new machine and experience the Internet without an ad blocker and I can't believe how bad it is. A long time ago I had a job where I was going by bike. After two years of not using public transport, I got in a bus and had to get out immediately. It smelled so bad! How had I ever used that before? It's the same thing.

  However, most of the companies we take for granted as pillars of the web need to bombard us with ads and generally push or skew our perceptions in order to make money, so they find ways to obfuscate their web sites, lock them in "apps" that you have no control of or plain manipulate the design of the things we use to write code so that it makes this more difficult.

Continuous war

  Let me give you an example of this arms race. You open your favorite web site and there it is, a garish, blinking, offending, annoying ad that is completely useless. Luckily, you have an ad blocker so you select the ad, see that it's enclosed in a div with class "annoyingAd" and you make a blocking rule for it. Your web site is clean again. But the site owner realizes people are not clicking on the ad anymore, so he dynamically changes the class name to something different every time you open the page. Now, you could try to decipher the JavaScript code that populates the div and write a script to get the correct class, but it would only work for this web site and you would have to know how to code in JavaScript and it would take a lot of effort you don't want to spend. But then you realize that above the horrid thing there is a title "Annoying ad you can't get rid of", so you write a simple thing to get rid of the div that contains a span with that content. Yay!

  At this point you already have some issues. The normal way people block ads is to create a quasi CSS rule for an element. Yet CSS doesn't easily let's you select elements based on the inner text or to select parents of elements with certain characteristics. In part it's a question of performance, but at the same time there is a matter of people who want to obfuscate your web site taking part in the decision process of what should go in CSS. So here, to get the element with a certain content we had to use something that expands normal CSS, like the jQuery syntax or some extra JavaScript. This is, needless to say, already applicable to a low number of people. But suspend your disbelief for a moment.

  Maybe your ad blocker is providing you with custom rules that you can make based on content, or you write a little script or even the ad blocker people write the code for you. So the site owner catches up and he does something: instead of having a span with the title, he puts many little spans, containing just a few letters, some of them hidden visually and filled with garbage, others visible. The title is now something like "Ann"+"xxx"+"oying"+"xxx"+" ad", where all "xxx" texts appear as part of the domain object model (the page's DOM) but they are somehow not visible to the naked eye. Now the inner text of the container is "Annxxxoyingxxx ad", with random letters instead of xxx. Beat that!

  And so it goes. You need to spend knowledge and effort to escalate this war that you might not even win. Facebook is the king of obfuscation, where even the items shared by people are mixed and remixed so that you cannot select them. So what's the solution?

Solution

  At first I wanted to go in the same direction, fight the same war. Let's create a tool that deobfuscates the DOM! Maybe using AI! Something that would, at the end, give me the simplest DOM possible that would create the visual output of the current page and, when I change one element in this simple DOM, it would apply the changes to the corresponding obfuscated DOM. And that IS a solution, if not THE solution, but it is incredibly hard to implement.

  There is another option, though, something that would progressively enhance the existing DOM with information that one could use in a CSS rule. Imagine a small script that, added to any page, would add attributes to elements like this: visibleText="Annoying ad" containingText="Annxxxoingxxx ad" innerText="" positionInPage="78%,30%-middle-right" positionInViewport="78%,5%-top-right". Now you can use a CSS rule for it, because CSS has syntax for attributes equal to, containing, starting or ending with something. This would somewhat slow the page, but not terribly so. One can use it as a one shot (no matter how long it takes, it only runs once) or continuous (where every time an element changes, it would recreate the attributes in it and its parents).

Feedback

  Now, I have not begun development on this yet, I've just had this idea of a domExplainer library that I could make available for everybody. I have to test how it works on difficult web sites like Facebook and try it as a general option in my browser. But I would really appreciate feedback first. What do you think? What else would you add to (or remove from) it? What else would you use it for?

  A while ago I had discovered the Brave browser for mobiles, which was a Chromium fork that featured ad blocking and privacy guards out of the box, when Google stubbornly refused to enable extension support for mobile Chrome. The thing is, it was only available for mobiles. And even if it were available for the desktop, would it really have anything over Chrome with extensions like uBlock Origin installed?

  The answer is YES! Brave for PC is available and, from the limited interaction I've had so far, it is superior to Chrome. Why? Let me list the reasons:

• it cares about your privacy and not about how Google can track you best, which might not be high on your agenda or on your browser extension creator's agenda. That's a plus, because as you didn't care about it before, you don't have to care about it now, but it's taken care of.
• by removing unnecessary functionality from Chromium, it is actually faster than Chrome! Are you old enough to remember when Chrome appeared as the underdog and Internet Explorer reigned supreme and then everybody was like "IE sucks, Chrome rules because it's so fast and only cares about the user experience"? That's what Brave does now to Chrome!
• it has a "forced" dark mode flag that can turn EVERY web site dark. It's not perfect, but it's out of the box! All you have to do is go to brave://flags/#enable-force-dark and enable the feature. (admittedly, you can achieve the same effect with chrome://flags/#enable-force-dark or edge://flags/#enable-force-dark, but I only found out about it from Brave)
• the best feature yet is the Simplified View. Most of the times when you open a web site in the mobile version, you get a "Show simplified view" button. You click on that and you get:
  
  • just the text of the web site
  • whatever font you want
  • whatever theme you want (dark/bright)
  • no ads
  • no flashing things
  • no sidebars
  • no "accept cookies" and "register/subscribe" popups
    Again, this is probably a Chrome feature, but Brave made it public, visible and natural. Haven't found the way to turn it on the desktop browser, yet.

Correction: I have found that in Chrome you can enable reader mode with a flag (chrome://flags/#enable-reader-mode) only it doesn't work that well. In Brave all that moved to what is called Speedreader, which also must be enabled via a flag (chrome://flags/#brave-speedreader).

  Have you ever browsed one of these "modern" web sites and you got half way through scrolling past the huge image that fills the screen only to get a big popup about registering to some bullshit service, with another popup asking you to enable cookies and then some lazy overlay hiding the content and demanding you pay for the content? Imagine you have one button to click and you get to read the actual information on that page! How can people browse on the web without Brave?!

  I know that some extensions cover most of the points above, but Brave plus uBlock Origin are amazing! I get to a web page that is automatically stripped of most ads, but there are still parts of it that are not strictly ads, like a subscribe form in the middle of the content, for example. You use the Block Element feature of the ad block extension and you get the cleanest browsing experience you can get. (BTW, Brave also has its own Block Element option, so you might not need an extension at all!)

  And there are dark clouds on the horizon. With the V3 manifest version that Google is pushing, many of the APIs available to ad blocker extensions are limited or downright broken. It's not in their interest to block ads, considering they are in the advertising business. Their biggest achievement (and mistake) was to open source Chromium, so no one can take something like Brave away from you.

  Bottom line: switch to Brave. It's like Chrome, only a lot better! And I am not really one of those "fuck the system, stick it to the man" people, so don't think I do this because I have some big agenda. I really really enjoy using this browser and I hope you will, too.

  I guess I don't have to tell you about ad blockers and browser extensions that improve YouTube. They are a dime a dozen and bring many features to the habitual YouTube watcher. However there is one particular new YouTube annoyance that you don't really need an extension to get rid of: the dreaded Video paused dialog.

  To get rid of it is easy: on an interval, check if there is a visible element of a certain type containing a certain text and click its button. While this can be done in simple Javascript, I am lazy, so the script that I am using will first load jQuery, then run a one line function periodically. This code is to be copied and pasted in the Console tab of the browser's development tools, then press Enter.

const scr = document.createElement('script');
scr.setAttribute('src','https://code.jquery.com/jquery-3.4.1.min.js');
document.querySelector('head').appendChild(scr);
setInterval(()=> { 
  $('#button:contains(Yes)','yt-confirm-dialog-renderer:visible:contains(Video paused)').click();
},500);

It's easy to understand:

• create a script element
• set its source to jQuery
• append it to the page
• execute every 500 milliseconds a code that:
  • finds the element with id button containing the text "Yes"
  • inside an element of type yt-confirm-dialog-renderer which is visible and contains the text "Video paused"
  • click the element

There is an even more comfortable solution, though, that I recommend. You will need a Chrome extension called cjs that loads whatever script you tell it in whatever page you want. It gives you the option to inject jQuery, so all you have to do is write 

setInterval(()=> { $('#button:contains(Yes)','yt-confirm-dialog-renderer:visible:contains(Video paused)').click(); },500);

 as the script to be executed on YouTube.

That's it. You're all done.

I am sure I've tested this, but for some reason the icons in my blog disappeared for Internet Explorer. They are using Font Awesome SVG background images, declared something like this:

.fas-comment {
    background-image: url("data:image/svg+xml;utf8,<svg height='511.6' version='1.1' viewBox='0 0 511.6 511.6' width='511.6' x='0' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' y='0'><g fill='#2f5faa'><path d='M477.4 127.4c-22.8-28.1-53.9-50.2-93.1-66.5 -39.2-16.3-82-24.4-128.5-24.4 -34.6 0-67.8 4.8-99.4 14.4 -31.6 9.6-58.8 22.6-81.7 39 -22.8 16.4-41 35.8-54.5 58.4C6.8 170.8 0 194.5 0 219.2c0 28.5 8.6 55.3 25.8 80.2 17.2 24.9 40.8 45.9 70.7 62.8 -2.1 7.6-4.6 14.8-7.4 21.7 -2.9 6.9-5.4 12.5-7.7 16.9 -2.3 4.4-5.4 9.2-9.3 14.6 -3.9 5.3-6.8 9.1-8.8 11.3 -2 2.2-5.3 5.8-9.9 10.8 -4.6 5-7.5 8.3-8.8 9.9 -0.2 0.1-1 1-2.3 2.6 -1.3 1.6-2 2.4-2 2.4l-1.7 2.6c-1 1.4-1.4 2.3-1.3 2.7 0.1 0.4-0.1 1.3-0.6 2.9 -0.5 1.5-0.4 2.7 0.1 3.4v0.3c0.8 3.4 2.4 6.2 5 8.3 2.6 2.1 5.5 3 8.7 2.6 12.4-1.5 23.2-3.6 32.5-6.3 49.9-12.8 93.6-35.8 131.3-69.1 14.3 1.5 28.1 2.3 41.4 2.3 46.4 0 89.3-8.1 128.5-24.4 39.2-16.3 70.2-38.4 93.1-66.5 22.8-28.1 34.3-58.7 34.3-91.8C511.6 186.1 500.2 155.5 477.4 127.4z'/></g></svg>");
}

I had to try several things, but in the end, I found out that there are three steps in order to make this compatible with Internet Explorer (and still work in other browsers):

1. The definition of the utf8 charset must be explicit: data:image/svg+xml;charset=utf8 instead of data:image/svg+xml;utf8
2. The SVG code needs to be URL encoded: so turn all double quotes into single quotes and then replace < and > with %3C and %3E or use some URL encoder
3. The colors need to be in rbg() format: so instead of fill='#2f5faa' use fill='rgb(47,95,170)' (same in style tags in the SVG, if any)

So now the result is:

.fas-comment {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg height='511.6' version='1.1' viewBox='0 0 511.6 511.6' width='511.6' x='0' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' y='0'%3E%3Cg fill='rgb(47,95,170)'%3E%3Cpath d='M477.4 127.4c-22.8-28.1-53.9-50.2-93.1-66.5 -39.2-16.3-82-24.4-128.5-24.4 -34.6 0-67.8 4.8-99.4 14.4 -31.6 9.6-58.8 22.6-81.7 39 -22.8 16.4-41 35.8-54.5 58.4C6.8 170.8 0 194.5 0 219.2c0 28.5 8.6 55.3 25.8 80.2 17.2 24.9 40.8 45.9 70.7 62.8 -2.1 7.6-4.6 14.8-7.4 21.7 -2.9 6.9-5.4 12.5-7.7 16.9 -2.3 4.4-5.4 9.2-9.3 14.6 -3.9 5.3-6.8 9.1-8.8 11.3 -2 2.2-5.3 5.8-9.9 10.8 -4.6 5-7.5 8.3-8.8 9.9 -0.2 0.1-1 1-2.3 2.6 -1.3 1.6-2 2.4-2 2.4l-1.7 2.6c-1 1.4-1.4 2.3-1.3 2.7 0.1 0.4-0.1 1.3-0.6 2.9 -0.5 1.5-0.4 2.7 0.1 3.4v0.3c0.8 3.4 2.4 6.2 5 8.3 2.6 2.1 5.5 3 8.7 2.6 12.4-1.5 23.2-3.6 32.5-6.3 49.9-12.8 93.6-35.8 131.3-69.1 14.3 1.5 28.1 2.3 41.4 2.3 46.4 0 89.3-8.1 128.5-24.4 39.2-16.3 70.2-38.4 93.1-66.5 22.8-28.1 34.3-58.7 34.3-91.8C511.6 186.1 500.2 155.5 477.4 127.4z'/%3E%3C/g%3E%3C/svg%3E");
}

After my disappointment with the Firefox for Android lack of proper bookmarks API implementation, I was at least happy that my Bookmark Explorer extension works well with Firefox for desktop. That quickly turned cold when I got a one star review because the extension did not work. And the user was right, it didn't! One of the variables declared in one of the Javascript files was not found. But that only happened in the published version, not the unpacked one on my computer.

Basically the scenario was this:

1. Load unpacked (from my computer) extension
2. Test it
3. Works great
4. Make it a Zip file and publish it
5. Shame! Shame! Shame!

Long story short, I was loading the Javascript file like this: <script src="ApiWrapper.js"></script> when the name of the file was apiWrapper.js (note the lowercase A). My computer file system is Windows, couldn't care less about filename casing, while the virtual Zip filesystem probably isn't like that, at least in Firefox's implementation. Note that this error only affected Firefox and not Chrome or (as far as I know - because it has been 2 months since I've submitted the extension and I got no reply other than "awaiting moderation") Opera.

I've decided the functionality of the Bookmark Explorer extension was pretty close to final and, before I refactor it to a new form, I wanted to make sure it works for all the browsers that support the WebExtensions mechanism, mainly Chrome, Firefox and Opera. Frankly, I have no idea why anyone would use Firefox or Opera, but if you do, I've got great news for you: I have published the extension for all of them:

• Chrome
• Firefox
• Opera

Haven't tested extensively, I am going to do that in the near future, but rejoice, now you can read your news at speed and comfort, then remove them from your bookmarks once you have grown tired. There are some changes to the extension that need to be addressed:

• The most significant is changing the keyboard shortcut for "Previous Bookmark" to Ctrl-Shift-O for Firefox and Opera, because changing extension key shortcuts in Firefox is really difficult and Ctrl-Shift-K is already used by the developer tools
• The default settings have been updated. Now, when you install the extension for the first time you will get:
  • 30 second wait for the "Read Later" links to autoclose, giving the browser time to cache the title and icon
  • Preload next tab is now true by default, leading to loading the content of the next news item while you read the current one
  • When creating bookmarks - from anywhere - their URLs will be stripped of some marketing bullshit
• A lot of bug fixes and speed improvements went into this aparrently minor release

I also plan to make a video of how to use the extension, since letting users read the long description and figure out what the extension does didn't quite work :) I am considering changing the name of the extension for version 3 and I am open to suggestions. I am thinking of Bookmark Surf or something like this. Please let me know of any problems with the extension. I will fix bugs and I will write new features if I agree they are good for my users. All you have to do is ask!

Enjoy!

Update: I was so happy that Firefox for Android supports addons that I just installed it immediately and expected it to work. Unfortunately, the support for the Web Extensions API is very limited for the Android version, most importantly not having a bookmarks API, so the Bookmark Explorer doesn't work. I did make the extension more robust, though, by debugging it on the Android version.

I want to let you know about the latest features implemented in Bookmark Explorer.



The version number for the extension is already 2.9.3, quickly approaching the new rewrite I am planning for 3.0.0, yet every time I think I don't have anything else I could add, I find new ideas. It would be great if the users of the extension would give me more feedback about the features they use, don't use or want to have.

Here are some examples of new features:

• Skip button - moves the current page to the end of the bookmark folder and navigates to the next link. Useful for those long articles that you don't have the energy to read, but you want to.
• Custom URL comparison scheme. Useful for those sites where pages with different parameters or hash values are considered different and you get duplicate notification warnings for no good reason.
• Duplicate remover in the Manage page. This is an older feature, but now the button for it only appears where there are duplicates in the folder and with the custom URL scheme it's much more useful.
• Option to move selected bookmarks to start or end of folder, something that is cumbersome to do in the Chrome Bookmark Manager
• Automatically cleaning bookmark URLs of marketing parameters. This is in the Advanced settings section and must be enabled manually. So far it removes utm_*, wkey, wemail, _hsenc, _hsmi and hsCtaTracking, but I plan to remove much more, like those horrible hashes from Medium, for example. Please let me know of particular URL patterns you want to clean in your bookmarks and if perhaps you want the cleaning to be done automatically for all open URLs

As always, if you want to install the extension go to its Google Chrome extension page: Siderite's Bookmark Explorer

Just when I thought I don't have anything else to add, I found new stuff for my Chrome browser extension.
Bookmark Explorer now features:

• configurable interval for keeping a page open before bookmarking it for Read Later (so that all redirects and icons are loaded correctly)
• configurable interval after which deleted bookmarks are no longer remembered
• remembering deleted bookmarks no matter what deletes them
• more Read Later folders: configure their number and names
• redesigned options page
• more notifications on what is going on

The extension most resembles OneTab, in the sense that it is also designed to save you from opening a zillion tabs at the same time, but differs a lot by its ease of use, configurability and the absolute lack of any connection to outside servers: everything is stored in Chrome bookmarks and local storage.

Enjoy!

Bookmark Explorer, a Chrome browser extension that allows you to navigate inside bookmark folders on the same page, saving you from a deluge of browser tabs, has now reached version 2.4.0. I consider it stable, as I have no new features planned for it and the only changes I envision in the near future is switching to ECMAScript 6 and updating the unit test (in other words, nothing that concerns the user).

Let me remind you of its features:

• lets you go to the previous/next page in a bookmark folder, allowing sequential reading of selected news or research items
• has context menu, popup buttons and keyboard shortcut support
• shows a page with all the items in the current bookmark folder, allowing selection, deletion, importing/exporting of simple URL lists
• shows a page with all the bookmarks that were deleted, allowing restoring them, clearing them, etc.
• keyboard support for both pages
• notifies you if the current page has been bookmarked multiple times
• no communication with the Internet, it works just as well offline - assuming the links would work offline, like local files
• absolutely free

Install it from Google's Chrome Web store.

Update 17 June 2016: I've changed the focus of the extension to simply change the aspect of stories based on status, so that stories with content are highlighted over simple shares. I am currently working on another extension that is more adaptive, but it will be branded differently.

Update 27 May 2016: I've published the very early draft of the extension because it already does a cool thing: putting original content in the foreground and shrinking the reposts and photo uploads and feeling sharing and all that. You may find and install the extension here.

Have you ever wanted to decrease the spam in your Facebook page but couldn't do it in any way that would not make you miss important posts? I mean, even if you categorize all your contacts into good friends, close friends, relatives, acquaintances, then you unfollow the ones that really spam too much and you hide all posts that you don't like, you have no control over how Facebook decides to order what you see on the page. Worse than that, try to refresh repeatedly your Facebook page and see wildly oscillating results: posts appear, disappear, reorder themselves. It's a mess.

Well, true to this and my word I have started work on a Chrome extension to help me with this. My plan is pretty complicated, so before I publish the extension on the Chrome Webstore, like I did with my previous two efforts, I will publish this on GitHub while I am still working on it. So, depending on where I am, this might be alpha, beta or stable. At the moment of this writing - first commit - alpha is a pretty big word.

Here is the plan for the extension:

1. Detect the user has opened the Facebook page
2. Inject jQuery and extension code into the page
3. Detect any post as it appears on the page
4. Extract as many features as possible
5. Allow the user to create categories for posts
6. Allow the user to drag posts into categories or out of them
7. Use AI to determine the category a post most likely belongs to
8. Alternatively, let the user create their own filters, a la Outlook
9. Show a list of categories (as tabs, perhaps) and hide all posts under the respective categories

This way, one might skip the annoying posts, based on personal preferences, while still enjoying the interesting ones. At the time of this writing, the first draft, the extension only works on https://www.facebook.com, not on any subpages, it extracts the type of the post and sets a CSS class on it. It also injects a CSS which makes posts get dimmer and smaller based on category. Mouse over to get the normal size and opacity.

How to make it work for you:

1. In Chrome, go to Manage Extensions (chrome://extensions/)
2. Click on the Developer Mode checkbox
3. Click on the Load unpacked extension... button
4. Select a folder where you have downloaded the source of this extension
5. Open a new tab and load Facebook there
6. You should see the posts getting smaller and dimmer based on category.

Change statusProcessor.css to select your own preferences (you may hide posts altogether or change the background color, etc).

As usual, please let me know what you think and contribute with code and ideas.

I've written another Chrome extension that I consider in beta, but so far it works. Really ugly makeshift code, but I am not gathering data about the way I will use it, then I am going to refactor it, just as I did with Bookmark Explorer. You may find the code at GitHub and the extension at the Chrome webstore.

This is how it works: Every time you access anything with the browser, the extension will remember the IPs for any given host. It will hold a list of the IPs, in reverse order (last one first), that you can just copy and paste into your hosts file. The hosts file is found in c:/Windows/System32/drivers/etc/hosts and on Linux in /etc/hosts. Once you add a line in the format "IP host" in it, the computer will resolve the host with the provided IP. Every time there is a problem with DNS resolution, the extension will add the latest known IP into the hosts text. Since the extension doesn't have access to your hard drive, you need to edit the file yourself. The icon of DNS resolver will show the number of hosts that it wants to resolve locally or nothing, if everything is OK.

The extension allows manual selection of an IP for a host and forced inclusion or exclusion from the list of IP/host lines. Data can be erased (all at once for now) as well. The extension does not communicate with the outside, but it does store a list of all domains you visit, so it is a slight privacy risk - although if someone has access to the local store of a browser extension, it's already too late. There is also the possibility of the extension to replace the host with IP directly in the browser requests, but this only works for the browser and fails in case the host name is important, as in the case of multiple servers using the same IP, so I don't recommend using it.

There are two scenarios for which this extension is very useful:

• The DNS server fails for some reason or gives you a wrong IP
• Someone removed the IP address from DNS servers or replaced it with one of their own, like in the case of governments censorship

I have some ideas for the future:

• Sharing of working IP/host pairs - have to think of privacy before that, though
• Installing a local DNS server that can communicate locally with the extension, so no more hosts editing - have to research and create one
• Upvoting/Downvoting/flagging shared pairs - with all the horrible head-ache this comes with

As usual, let me know what you think here, or open issues on GitHub.

Update 29 August 2017 - Version 3.0.4: The extension has been rewritten in EcmaScript6 and tested on Chrome, Firefox and Opera.

Update 03 March 2017 - Version 2.9.3: added a function to remove marketing URLs from all created bookmarks. Enable it in the Advanced settings section. Please let me know of any particular parameters you need purged. So far it removes utm_*, wkey, wemail, _hsenc, _hsmi and hsCtaTracking.

Update 26 February 2017: Version (2.9.1): added customizing the URL comparison function. People can choose what makes pages different in general or for specific URL patterns
Update 13 June 2016: Stable version (2.5.0): added Settings page, Read Later functionality, undelete bookmarks page and much more.
Update 8 May 2016: Rewritten the extension from scratch, with unit testing.
Update 28 March 2016: The entire source code of the extension is now open sourced at GitHub.

Whenever I read my news, I open a bookmark folder containing my favorite news sites, Twitter, Facebook, etc. I then proceed to open new tabs for each link I find interesting, closing the originating links when I am done. Usually I get a number of 30-60 open tabs. This wreaks havoc on my memory and computer responsiveness. And it's really stupid, because I only need to read them one by one. In the end I've decided to fight my laziness and create my first browser extension to help me out.

The extension is published here: Siderite's Bookmark Explorer and what it does is check if the current page is found in any bookmark folder, then allow you to go forward or backwards inside that folder.

So this is my scenario on using it:

1. Open the sites that you want to get the links from.
2. Open new tabs for the articles you want to read or YouTube videos you want to watch,etc.
3. Bookmark all tabs into a folder.
4. Close all the tabs.
5. Navigate to the bookmark folder and open the first link.
6. Read the link, then press the Bookmark Navigator button and then the right arrow. (now added support for context menu and keyboard shortcuts)
7. If you went too far by mistake, press the left arrow to go back.

OK, let's talk about how I did it. In order to create your own Chrome browser extension you need to follow these steps:

1. Create the folder

Create a folder and put inside a file called manifest.json. It's possible structure is pretty complex, but let's start with what I used:

{
    "manifest_version" : 2,

    "name" : "Siderite's Bookmark Explorer",
    "description" : "Gives you a nice Next button to go to the next bookmark in the folder",
    "version" : "1.0.2",

    "permissions" : [
        "tabs",
        "activeTab",
        "bookmarks",
        "contextMenus"
    ],
    "browser_action" : {
        "default_icon" : "icon.png",
        "default_popup" : "popup.html"
    },
    "background" : {
        "scripts" : ["background.js"],
        "persistent" : false
    },
    "commands" : {
        "prevBookmark" : {
            "suggested_key" : {
                "default" : "Ctrl+Shift+K"
            },
            "description" : "Navigate to previous bookmark in the folder"
        },
        "nextBookmark" : {
            "suggested_key" : {
                "default" : "Ctrl+Shift+L"
            },
            "description" : "Navigate to next bookmark in the folder"
        }
    }
}

The manifest version must be 2. You need a name, a description and a version number. Start with something small, like 0.0.1, as you will want to increase the value as you make changes. The other thing is that mandatory is the permissions object, which tells the browser what Chrome APIs you intend to use. I've set there activeTab, because I want to know what the active tab is and what is its URL, tabs, because I might want to get the tab by id and then I don't get info like URL if I didn't specify this permission, bookmarks, because I want to access the bookmarks, and contextMenus, because I want to add items in the page context menu. More on permissions here.

Now, we need to know what the extension should behave like.

If you want to click on it and get a popup that does stuff, you need to specify the browser_action object, where you specify the icon that you want to have in the Chrome extensions bar and/or the popup page that you want to open. If you don't specify this, you get a default button that does nothing on click and presents the standard context menu on right click. You may only specify the icon, though. More on browserAction here.

If you want to have an extension that reacts to background events, monitors URL changes on the current page, responds to commands, then you need a background page. Here I specify that the page is a javascript, but you can add HTML and CSS and other stuff as well. More on background here.

Obviously, the files mentioned in the manifest must be created in the same folder.

The last item in the manifest is the commands object. For each command you need to define the id, the keyboard shortcut (only the 0..9 and A..Z are usable unfortunately) and a description. In order to respond to commands you need a background page as shown above.

2. Test the extension

Next you open a Chrome tab and go to chrome://extensions, click on the 'Developer mode' checkbox if it is not checked already and you get a Load unpacked extension button. Click it and point the following dialog to your folder and test that everything works OK.

3. Publish your extension

In order to publish your extension you need to have a Chrome Web Store account. Go to Chrome Web Store Developer Dashboard and create one. You will need to pay a one time 5$ fee to open it. I know, it kind of sucks, but I paid it and was done with it.

Next, you need to Add New Item, where you will be asked for a packed extension, which is nothing but the ZIP archive of all the files in your folder.

That's it.

Let's now discuss actual implementation details.

Adding functionality to popup elements

Getting the popup page elements is easy with vanilla Javascript, because we know we are building for only one browser: Chrome! So getting elements is done via document.getElementById(id), for example, and adding functionality is done via elem.addEventListener(event,handler,false);

One can use the elements as objects directly to set values that are related to those elements. For example my prev/next button functionality takes the URL from the button itself and changes the location of the current tab to that value. Code executed when the popup opens sets the 'url' property on the button object.

Just remember to do it when the popup has finished loading (with document.addEventListener('DOMContentLoaded', function () { /*here*/ }); )

Getting the currently active tab

All the Chrome APIs are asynchronous, so the code is:

chrome.tabs.query({
    'active' : true,
    'lastFocusedWindow' : true
}, function (tabs) {
    var tab = tabs[0];
    if (!tab) return;
    // do something with tab
});

More on chrome.tabs here.

Changing the URL of a tab

chrome.tabs.update(tab.id, {
  url : url
});

Changing the icon in the Chrome extensions bar

if (chrome.browserAction) chrome.browserAction.setIcon({
    path : {
        '19' : 'anotherIcon.png'
    },
    tabId : tab.id
});

The icons are 19x19 PNG files. browserAction may not be available, if not declared in the manifest.

Get bookmarks

Remember you need the bookmarks permission in order for this to work.

chrome.bookmarks.getTree(function (tree) {
  //do something with bookmarks
});

The tree is an array of items that have title and url or children. The first tree array item is the Bookmarks Bar, for example. More about bookmarks here.

Hooking to Chrome events

chrome.tabs.onUpdated.addListener(refresh);
chrome.tabs.onCreated.addListener(refresh);
chrome.tabs.onActivated.addListener(refresh);
chrome.tabs.onActiveChanged.addListener(refresh);
chrome.contextMenus.onClicked.addListener(function (info, tab) {
    navigate(info.menuItemId, tab);
});
chrome.commands.onCommand.addListener(function (command) {
    navigate(command, null);
});

In order to get extended info on the tab object received by tabs events, you need the tabs permission. For access to the contextMenus object you need the contextMenus permission.

Warning: if you install your extension from the store and you disable it so you can test your unpacked extension, you will notice that keyboard commands do not work. Seems to be a bug in Chrome. The solution is to remove your extension completely so that the other version can hook into the keyboard shortcuts.

Creating, detecting and removing menu items

To create a menu item is very simple:

chrome.contextMenus.create({
  "id" : "menuItemId",
  "title" : "Menu item description",
  "contexts" : ["page"] //where the menuItem will be available
});

However, there is no way to 'get' a menu item and if you try to blindly remove a menu item with .remove(id) it will throw an exception. My solution was to use an object to store when I created and when I destroyed the menu items so I can safely call .remove().

To hook to the context menu events, use chrome.contextMenus.onClicked.addListener(function (info, tab) { }); where info contains the menuItemId property that is the same as the id used when creating the item.

Again, to access the context menu API, you need the contextMenus permission. More about context menus here.

Commands

You use commands basically to define keyboard shortcuts. You define them in your manifest and then you hook to the event with chrome.commands.onCommand.addListener(function (command) { });, where command is a string containing the key of the command.

Only modifiers, letters and digits can be used. Amazingly, you don't need permissions for using this API, but since commands are defined in the manifest, it would be superfluous, I guess.

That's it for what I wanted to discuss here. Any questions, bug reports, feature requests... use the comments in the post.