Check on HumbleBundle whether you own the game on Steam already

check-steam-owned-games-on-humble-bundle.js

// ==UserScript==
// @name         Steam Owned HumbleBundle Games
// @namespace    kevinbatdorf
// @version      0.1
// @description  Will check whether you own the humble bundle game in your steam library already
// @author       You
// @match        https://www.humblebundle.com/*
// @icon         https://www.google.com/s2/favicons?domain=humblebundle.com
// @grant        none
// ==/UserScript==


// Follow me! https://twitter.com/kevinbatdorf

// Requires Tampermonkey
// Chrome - https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=en
// FF - https://addons.mozilla.org/en-US/firefox/addon/tampermonkey/

(function() {
    'use strict';

    // TODO: Could expand this maybe to get mre info from steam like rating maybe??

    // https://steamcommunity.com/dev
    const steamApiKey = ''

    // https://store.steampowered.com/account/
    const steamId = ''


    // Choose your style to add to the parent box
    const styling = 'box-shadow:0 0 5px 5px #c368ff'
    const ownedStyles = 'display:block;margin:-0.25rem 0 1rem;padding-top:0;color:rgb(195 104 255)'

    // Remove some special characters
    const normalizeText = (str) => {
        return str.toLowerCase().replace(/[^a-zA-Z ]/g, "")
    }

    // Some checks to make sure we have games ont his page
    let humbleGames = []
    try {
        humbleGames = Array.from(document.querySelectorAll('.content-choice-title, .tier-item-view .item-title'))
    } catch(e) {
        console.error('Error', e)
    }
    if (!humbleGames || !humbleGames.length) return

    // Just FYI
    console.info(`Found ${humbleGames.length} games on this page`)

    // Call the API!
    fetch(`https://test.cors.workers.dev/?https://api.steampowered.com/IPlayerService/GetOwnedGames/v0001/?key=${steamApiKey}&steamid=${steamId}&format=json&include_appinfo=1`)
        .then(r => r.json())
        .then(({ response }) => {

            // Let the user know their worth
            console.info(`Tou have ${response.game_count} Steam games`)

            // Just check which games match
            const games = response.games.map(game => normalizeText(game.name))
            const owned = humbleGames.filter(g => games.includes(normalizeText(g.innerText)))

            // Add some styling!
            owned.forEach(node => {
                node.insertAdjacentHTML('afterEnd', `<strong class="content-choice-title" style="${ownedStyles}">owned</strong>`)
                if (node.closest(`.js-item-details`)) node.closest(`.js-item-details`).querySelector('.img-container').style.cssText += styling
                if (node.closest(`.content-choice`)) node.closest(`.content-choice`).style.cssText += styling
            })
        })
})();

They updated the class name and design so I updated the code

How do you use this?

Hey, so first you need an extension that will run userscripts, like TamperMonkey
Chrome - https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=en
FF - https://addons.mozilla.org/en-US/firefox/addon/tampermonkey/

Then fill out in the code above:

https://steamcommunity.com/dev
const steamApiKey = ''

https://store.steampowered.com/account/
const steamId = ''

The cors proxy limited their access a couple months ago so there's one more step. You need to open the devtools and click through to the cors proxy server and request temporary access. Then reload the page,

Here's a video walkthrough:

Screen.Recording.2022-12-31.at.3.46.57.PM.mov