An extension for Google Chrome and Firefox brought to you by Flavien and Christophe.

The Google Chrome extension is compatible with all Chromium based browsers (Edge, Brave ...) and could also be used with Kiwi Browser on Android smartphones.

If you have a problem, a suggestion, or just want to leave a nice note, you can write to us on the forum here

This extension adds the following features to the boardgamearena.com website.

List of current games

If you've activated automatic table tracking (see next chapter), then the extension icon shows you the number of games you're currently expected to play.

Click on the extension icon to open the list of your games in progress and access them quickly.

You'll also find a list of pending invitations, as well as the tournaments you've entered.

The "Friend's tables" tab allow you to search for a table opened by one of your friends with a free chair.

Settings

The "settings" tab lets you access some of the extension's parameters:

• 
  Miscellaneous parameters :
  • A parameter to enable or disable automatic tracking of the state of tables you are on. If this option is enabled, then the extension will be able to tell you when it's your turn to play at one of the tables you're at, but you'll always be seen as connected by other players. If this option is disabled, then the extension won't be able to tell you when it's your turn to play, but other players will only see you logged in if you're actually on the site.
  • When the tracking is enable, you can activate a sound notification and associate the mp3 you prefer for this notification.
  • A parameter to redirect the website links to the classic lobby instead of the new one.
  • A parameter to change the behavior of the 'Fast create' button added to the games in the lobby.
  • A parameter to replace the default "wood" background by a solid-color background.
  • A parameter to change the behavior of the newsfeed, if it's activated the newsfeed contains only the messages of my groups.
  • A setting to force player names to be displayed in chat windows (by default, player names are hidden in private chats, and your name is hidden in game chats).
• Game parameters:
  • A parameter to show / hide your friends' activity in the game logs
  • A parameter to show / hide the ELO score of the players in games.
• Home page settings : Parameters to select the elements that you want to display on the home page of the site.
• Game in progress page settings:
  • Parameters to select the elements that you want to display on the 'Game in progress' page.
  • Parameter to display the tables with more colors.
• Fast table creation. The extension adds a button in the lobby games to quickly start a table using the last settings used.
  • 
    Set whether the table should be automatically opened to other players after creation.
  • Setting whether to exclude players stronger than you
  • Setting to exclude players with bad Karma (< 75%)
• Hidden games: Offer the possibility to undo the deletion of a game (see "Deleting a game" chapter).
• Ignored players: override player blocking in chat (see “Ignoring a player in "Mute a player in game chat” chapter)

Advanced home page settings

By activating the advanced home page configuration, you can enter HTML code to place the elements you want exactly where you want them.

It is of course recommended that you have a minimum knowledge of HTML syntax to take full advantage of this option.

But by default, when you activate advanced mode, the extension offers you HTML code containing all possible elements. You can use this code as a starting point, deleting elements you don't need, moving elements around etc...

You can check your HTML code with an online tool like https://jsonformatter.org/html-validator

And if you've got an idea but can't write the HTML code for it, don't be frustrated - come and talk about it on the forum here ;)

You can potentially write any HTML code, but the extension defines the following styles to help you:

• <div class='bgaext-flex-col'> : the elements in this DIV will be placed in columns, one below the other, with a small margin to separate them.
• <div class='bgaext-flex-row'> : the elements in this DIV will be placed in line, across the entire page width, trying to respect the optimal size for each element.
• <div class='bgaext-flex-row-distribution'> : the elements in this DIV have all the same width, but you will certainly need to set a width for this DIV.

Example containing all possible elements.

A first row of three columns contains :

• First column: Tournaments
• Second column: An area with two rows
  • The first row contains a list of new games, popular games and recommended games.
  • The second row contains the "Achievments" and the "Hall of fame"
• Third column: News feed and service status

A second line with two columns contains :

• First column: The list of classic games
• Second column: “Play more!” area

<div class='bgaext-flex-col'>
	<div class='bgaext-flex-row'>
		<div id='bgaext-tournaments'></div>
		<div class='bgaext-flex-col'>
			<div class='bgaext-flex-row'>
				<div id='bgaext-games-recent'></div>
				<div id='bgaext-games-popular'></div>
				<div id='bgaext-games-suggested'></div>
			</div>
			<div class='bgaext-flex-row'>
				<div id='bgaext-achievements'></div>
				<div id='bgaext-leaderboard'></div>
			</div>
		</div>
		<div class='bgaext-flex-col'>
			<div id='bgaext-newsfeed'></div>
			<div id='bgaext-service-status'></div>
		</div>
	</div>
	<div class='bgaext-flex-row'>
		<div id='bgaext-games-classic'></div>
		<div id='bgaext-playmore'></div>
	</div>
</div>

A simpler example with fewer elements

The example contains a single line with, in order: the news feed, tournaments, new games and popular games.

<div class='bgaext-flex-row'>
	<div id='bgaext-newsfeed'></div>
	<div id='bgaext-tournaments'></div>
	<div id='bgaext-games-recent'></div>
	<div id='bgaext-games-popular'></div>
</div>

My favorite display

<style>
#bgaext-achievements { width: 600px; }
#bgaext-newsfeed .bga-homepage-newsfeed { max-height: 1050px; overflow: auto; }
</style>

<div class='bgaext-flex-col'>
  <div class='bgaext-flex-row'>
    <div class='bgaext-flex-col'>
      <div class='bgaext-flex-row-distribution'>
        <div id='bgaext-games-recent'></div>
        <div id='bgaext-games-suggested'></div>
      </div>
      <div id='bgaext-achievements'></div>
    </div>
    <div class='bgaext-flex-col'>
      <div id='bgaext-newsfeed'></div>
      <div id='bgaext-service-status'></div>
    </div>
  </div>
  <div class='bgaext-flex-row'>
    <div id='bgaext-games-classic'></div>
    <div id='bgaext-playmore'></div>
  </div>
</div>

Tips

To limit the height of the news feed, you can add CSS code like this, for example, to make a scrollbar appear:

<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
	max-height: 900px;
	overflow: auto;
}
</style>
<div class='bgaext-flex-row'>
	<div id='bgaext-newsfeed'></div>
	<div id='bgaext-tournaments'></div>
</div>

or like this to truncate the content:

<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
	max-height: 900px;
	overflow: hidden;
}
</style>
<div class='bgaext-flex-row'>
	<div id='bgaext-newsfeed'></div>
	<div id='bgaext-tournaments'></div>
</div>

To limit the height of the "Hall of fame", you can use the following code :

<style>
#bgaext-leaderboard .bga-ranked-player-list {
	max-height: 525px;
	overflow: hidden;
}
</style>

Dark Mode

This icon in the top right-hand corner of the screen activates the dark mode for the entire site.

Once activated, you can then select a dominant colour by clicking on the arrow next to the icon to change the display theme slightly.

Choosing a color for dark mode

When you are in a game, it is displayed by default with the settings you have chosen for the site, but you can customise the game theme by selecting a color.

The site will continue to be displayed with the color you chose for the site, and the game will now be displayed with the color you chose for it.

Hide friend's activities in game log

The extension allow you to stop displaying your friend's activity in the game log.

You can find this option in the options of the extension and in the settings tabs of the extension menu. This is activated by default.

Fast start button

The extension add a "Fast start" in the games in the lobby.

This button start a table with your default settings as the classic "Start" button do, but you stay in the lobby.

This button can also automatically open the created table to other players, which can be configured in the extension's options and menu.

Navigation menu

In games where this is of interest, the extension adds a vertical menu on the left-hand side for quick navigation between the players' boards. In some games, there are also shortcuts to key elements of the game, such as the main board.

This menu can be activated or deactivated in the game settings.

Floating menu

If you're playing on a small screen, it could be a good idea to save space by hiding the game log and player panels.

An option allows you to display these two elements in floating menus.

Deleting a game

The extension adds a button for 'deleting' a game. This button appears next to the button for starting the game in the list of games.

Deleted games no longer appear in the list of games or in the lobby.

It is possible to recover a deleted game by the "settings" tab of the extension popup.

Hide general chat

An icon in the top right-hand corner of the screen allows you to show or hide the general chat.

This icon is not displayed when you are in a game and only allows you to hide the general chat; it does not allow you to stop receiving private messages or to hide the conversation in a game.

Mute a player in game chat

In the game chat popup, the extension adds a new icon that lets you mute a player.

You can mute up to 10 players and manage the muted players list in "settings" tab of the extension.

This feature is designed to let you ignore a toxic player and finish the game in peace, but it doesn't report the user's behavior to Board Game Arena.