Achievements Tracker

Twitch Extension

 

Overlay extension for achievements hunters

Twitch Achievement Tracker shows your current achievement progression for the game you are playing, live on top of your Twitch stream.

 

Features

  • Steam and XBox achievements support
  • Game artwork
  • Guided setup on the extension configuration panel
  • Live extension panel
  • Mobile support, Android and iOS
 

Guide

Requirements

This extension is a hobby project and doesn't have any monetisation, as such it requires you to "Bring Your Own Token" to access the supported platforms APIs.

On token security
Access tokens are confidential, and need to be treated as such. The extension configuration panel will hide it by default to guard against accidental leaks in case of last minute configuration while on-stream.
During operations, your API key is stored in the Twitch extension configuration service in an encrypted form. The extension backend does not store any information.

Steam: get your API key

On Steam the extension fetches your achievements from the Steam API, and as such requires you to provide your own Steam API Key.

Anyone with a Steam account can request an API Key, as long as you have spent more than 5 USD on the store (or the equivalent in your local currency).

Go to the Steam dev API Key page:

Steam API Key

The page will ask for a domain name, if you do not have one you can use "localhost" or "127.0.0.1".

You will have to read and agree to the Steam API Terms of Use to obtain your key.

XBox: register for an xApi key

On XBox, the extension currently relies on an external service, XAPI (https://xapi.us/) to access your achievements on the XBox network.

This service recently removed their free tier, offering a free trial instead and making it less practical for use in the extension.
I am currently investigating other options in order to continue support for XBox users without relying on a paid subscription service.

In order to get your API Token:

  • Create or log into your account on https://xapi.us
  • Connect your XBox account on the "Xbox Live Accounts" page
  • Then go to your account's API Tokens page and generate a new one
  • Copy and save your token to a safe location

Configuration

Once installed, you have to configure the extension in order to set your account and the game you want to show achievements from.

The extension will guide you through a step-by-step setup.

  1. Choose your platform
  2. Enter your API Key
  3. Search and select your profile
    1. On XBox, enter your Gamertag
    2. On Steam, enter your profile URL, you can access the page through the following menu and copy the URL from your browser or by a right-click in Steam.
  4. Select the game you are going to play
  5. Select the language in which to display the achievements names and descriptions.
    The language list is based on the game supported languages.
  6. Review your configuration, after this step it will be pushed live to viewers.
  7. You are done !
    The panel will show a summary and let you go through the configuration again if needed.

Live Panel

When the extension is active and you are on stream, you can find a live panel in your Stream Manager view.

This view allows you to force-push an update to the viewers, for instance when you just completed a new achievement.
For services where the API quotas are available (currently XAPI) you can also monitor that you are not exceeding the limit.

Source code

Both the frontend and backend are open-sourced under the MIT license.

GitHub

Issues and suggestions

If you encounter any issues, you can contact me at twitchext@conceptoire.com, or create an issue on the GitHub project.

Issues tracker

 

Gallery

Privacy Policy

This article was updated on 31/10/2024