Skip to content

Instantly share code, notes, and snippets.

@M-Miller-42
Last active November 13, 2020 14:51
Show Gist options
  • Save M-Miller-42/7a509197c479e87b6cb5f6c88d7872bb to your computer and use it in GitHub Desktop.
Save M-Miller-42/7a509197c479e87b6cb5f6c88d7872bb to your computer and use it in GitHub Desktop.

Temporary Fix for Twitch Stream Notifications

The Firefox Add-On 'Live Stream Notifier' is currently not showing any live Twitch channels. Twitch changed it's API authentification method (see here), that's why many web extensions no longer have a simple way to access data from twitch. The maintainer of the Live Stream Notifier announced, that the extensive adaption to this API change will not happen in the near future. The extension will stay broken for some time.

The Fix

We will (against Twitch's recommendations) aquire an application acces token and use it to access the API. This is not the correct flow for web extensions, but it is the simplest way to regain API access. Then we insert the token into the extension code, rebuild the xpi-package, and reinstall the modified extension.

Requirements

  • node
  • git or download the repo from github
  • email address for Twitch account verification

I tested this on Ubuntu 20.04 with Firefox 76.0.1 - 82.0.3 (64-bit). There seem to be problems with the build process on Windows. Also, check if your version of Firefox (Dev or Nightly) allows unsigned extensions (see step 4. and here).

Step by Step

1. Clean Up

  1. In the Live Stream Notifier Add On Preferences: Export configuration and back up the downloaded file.
  2. Remove the extension.

2. Obtain an app API token:

  1. Register at Twitch's Dev Console. Preferably use a new account not linked to your Twitch channel.

  2. Register a new fake application

    • Name: <AnythingWhatever>
    • OAuth Redirect URLs: http://localhost
    • Category: Browser Extension
  3. Generate and note down a Client ID and Client secret

  4. Request an app acces token

      POST https://id.twitch.tv/oauth2/token?client_id=<your client ID>&client_secret=<your client secret>&grant_type=client_credentials&scope=
    

    Instructions here. Leave scope empty. Note: this is a POST request, don't paste it in the URL bar. Use the Firefox Dev Tools or curl. It will return an access_token in JSON format. Note it down.

3. Set the tokens in the extension code

  1. In a copy of your exported extension configuration from step 1.: Replace the twitch_clientId with yours.

  2. git clone https://github.com/freaktechnik/justintv-stream-notifications.git

  3. In src/background/providers/twitch.js Line 32 replace <your_access_token> with e.g. h3h4ks829ud948f9hc9wskl leave Client-ID empty:

        headers = {
            'Client-ID': '',
            'Authorization' : 'Bearer <your_access_token>'
        }
  4. cd justintv-stream-notifications

  5. npm ci

  6. npm run build

  7. Zip the contents of the webextension folder (not the folder itself). In the resulting zip should be no webextension subfolder.

4. Reinstall the modified extension

  1. In Firefox navigate to about:config and set xpinstall.signatures.required to false.
  2. In the Firefox Add-Ons Manager: Click the gear button and Install Add-On from file. Select your zip file.
  3. Reimport the modified Live Stream Notifier configuration.

Note

The application access token is only valid for a limited period of time (~60days). After that the token has to be renewed.

Disabling Firefox's extension signature verification is a security risk.

Twitch may not approve the missuse this authentication flow or ban your account.

This does not work?

Let me know where you got stuck. Maybe I forgot a step or made a mistake. Any feedback is welcome.

@BubiBalboa
Copy link

BubiBalboa commented May 17, 2020

at the step npm ci it complains that there isn't a package.json. Is there a step missing or is my environment setup wrong or what?

Thanks for the instructions btw!

And in the step twitch.js should we just copy paste what you have there or also replace Client-ID and your_access_token? I guess replace them?

@M-Miller-42
Copy link
Author

There should be a package.json in the cloned repository folder. You have to navigate into that folder with cd justintv-stream-notifications. I added this step to the manual.

In 3.iii you add the line 'Authorization' : 'Bearer <your_access_token>' and make sure, that there is a comma at the end of the line above.
It should look like this:

        headers = {
            'Client-ID': '',
            'Authorization' : 'Bearer sldklk345kjwef90243roiw0er94m0'
        }

The Client-ID will be set automagically. It uses the ID, that you have set in the prefs.json file.

@BubiBalboa
Copy link

Thanks for the clarification.

@BubiBalboa
Copy link

BubiBalboa commented May 17, 2020

Really sorry to bother you again.

npm ci worked fine but npm run build failed with

C:\Windows\system32\justintv-stream-notifications> npm run build

> justintv-stream-notifications@3.11.1 build C:\Windows\system32\justintv-stream-notifications
> NODE_ENV=production webpack --mode production && web-ext build && npm pack

'NODE_ENV' is not recognized as an internal or external command,
operable program or batch file.

Any idea what's wrong?

E: Okay, I did what I should've done in the first place and looked at stackoverflow. Apparently this is a Windows vs Linux problem. A user wrote a npm package to translate from Linux to Windwows. npm install -g win-node-env

That works somewhat. It builds a lot of stuff, has lots of warnings about circular dependencies and exits with an error about being unable to open a json file.

I'm trying Linux directly now hopefully that'll work better.

@M-Miller-42
Copy link
Author

M-Miller-42 commented May 17, 2020

Looks like it wont build on Windows. I have three ideas that might help:

  • Do you have Git Bash or cygwin installed? Try one of these instead of the windows command line.
  • If this is the only incompatibility, try win-node-env
  • Alternatively you could try it the other way around and unzip the original xpi archive (download it, or copy it somewhere from firefox's extension folder), and make the changes in background/index.html near line 7193. And then zip it again.

@BubiBalboa
Copy link

I figured the Windows thing out myself in the meantime. I'm currently trying to make it work on WSL Linux but it doesn't know npm ci . I think I'll try to edit the xpi. That should be the most straight forward way I think. Thanks again.

@BubiBalboa
Copy link

Okay, I think I give up. I got it to build but Firefox doesn't let me install the extension despite setting signatures.required to false. I think this only works on Dev and Nightly channels anymore.

Editing the xpi didn't work it said the xpi was corrupt. I guess I'll have to wait for an official fix.

@M-Miller-42
Copy link
Author

I am sorry to hear, that after all your efforts the last step is holding you off the fruits of your work. Thank you for your feedback, I added stricter requirements to no longer waste time of people, who may try it on Windows with the release version of FF.

@BubiBalboa
Copy link

No worries. I knew that only signed addons work on the release and beta channel but I hoped that editing an existing addon might work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment