[UserScript] Steam Web Integration

INTRODUCTION

I originally wanted to extend this userscript, but I figured that this could be useful for broader applications. For example, a have-list on steam trades with steam links to the game, or a indie bundle page with steam links to the games. It is fully compatible with my Have List Filter userscript. All it does it check each web page for links to store.steampowered.com/app and store.steampowered.com/sub, check if you own or wishlisted it and display a little icon.

FEATURES

  • Checks the web pages for links steam games
  • Checks if those links contain games owned/wishlisted/ignored/removed
  • Displays an informative icon next to the link
  • Displays caching information when hovering over the icon
  • Option to choose the position of the icon
  • Caching of data
  • Support for dynamically generated web content

DOWNLOAD

INSTRUCTIONS

  1. Download and install Tampermonkey for your browser
  2. Download the userscript above
  3. (Optional) Configure your preferred settings in the code
  4. Hit install when asked
  5. Enjoy!

FAQ

Why do I keep getting popups?
The part of Steam API I am using is quite buggy. Just make sure you are logged in to steam in your web browser and visit this page and refresh until you can see all your data is loaded (you will see this if it is not loaded).

Why doesn't it work for me?
I don't know. Be sure to contact me and provide me the log/error from the JavaScript console, if there is any.
Post here

Can I suggest a feature?
Yes, absolutely!
Post here

CHANGELOG

Version 1.6
Added support for trading cards icon.

Version 1.5
Added support for games that were removed or delisted on Steam.

Version 1.3
Implemented caching of data and added support for dynamically generated content.

Version 1.2
Prevented alerts from showing when in incognito mode

Version 1.1
Added support for agecheck links

Version 1.0

  • initial release

CREDITS

SCREENSHOTS

View attached image.
View attached image.
View attached image.
1 year ago*

Comment has been collapsed.

Here have a bump :) btw it's a good idea to add a screenshot.

1 year ago
Permalink

Comment has been collapsed.

Works well now. Thank you.

1 year ago
Permalink

Comment has been collapsed.

Just installed both. Thanks for the scripts!

1 year ago
Permalink

Comment has been collapsed.

Thank you for whitelisting me!

1 year ago
Permalink

Comment has been collapsed.

Alright, using the main topic like you said.

You should totally have this one match the other one with the icons in the front of the link/title (and use the same icons) just for consistency. It also makes more sense to have it in the front because the length of the titles can get fairly long - having them all in one uniform row is much easier to read.

My only other suggestion (for both) would be to have a per-user file where you can omit certain games (aka I'm never going to want Absconding Zatwor, having a like gray minus sign or something for not interested would help a lot. That being said, this seems quite different from what you're currently doing, not sure how feasible it is.

(I actually really love these scripts, don't take my suggestions as criticism)

1 year ago
Permalink

Comment has been collapsed.

I made the other script as generic as possible, but I could make an option to have it more compatibility with this script / steamgifts. A game blacklist functionality should be possible. Glad you like the scripts.

1 year ago
Permalink

Comment has been collapsed.

personally i didn't care for it checking every page on the internet i went to. so i dropped the @include and added 3 @match's instead.

// @match https://www.steamgifts.com/*
// @match https://www.steamtrades.com/*
// @match http://www.dailyindiegame.com/*

it should be noted this script works well with DIG stores page though xD

1 year ago*
Permalink

Comment has been collapsed.

Thanks for this. I didn't like it checking page either.

1 year ago
Permalink

Comment has been collapsed.

thank you! I've used this trick on several scripts for multiple websites 💙

3 weeks ago
Permalink

Comment has been collapsed.

There is a bug with the game : Osiris: New Dawn !
It doesn't show the right icon. In my case it shows a red cross ❌ instead of a purple heart 💜 !

1 year ago
Permalink

Comment has been collapsed.

1 year ago
Permalink

Comment has been collapsed.

Yes it does, sir !

1 year ago
Permalink

Comment has been collapsed.

That's odd. And the error occurs to a link pointed to http://store.steampowered.com/app/402710?

1 year ago
Permalink

Comment has been collapsed.

The heart is shown here ! It's weird ...
This what i get on SteamTrades :

View attached image.
1 year ago
Permalink

Comment has been collapsed.

So the heart shows here, but the cross on steamtrades? Are you sure it's the same link? Please double check.

1 year ago
Permalink

Comment has been collapsed.

Haha, you were right ... it wasn't for Osiris Steam page but the link of another game ^^
Thanks for pointing that out mate !

1 year ago
Permalink

Comment has been collapsed.

I suspected something like that :)
Glad everything is sorted out. And thanks for the free bump!

1 year ago
Permalink

Comment has been collapsed.

Thanks, very useful script :)

1 year ago
Permalink

Comment has been collapsed.

You're welcome!

1 year ago
Permalink

Comment has been collapsed.

I added a short :not(:has('img')) to disable it on linked images, but apart from that it's a really nice and well coded script :)

1 year ago
Permalink

Comment has been collapsed.

I prefer to also check images. Sometimes image link is the only one available.
I could make a case distinction for it though and maybe add a green or red border to the image or something.
I am planning on updating this anyway. I want to remember the data from dynamic store user data, for when it's not available.

1 year ago
Permalink

Comment has been collapsed.

  1. Happy SG Birthday!

  2. Yeah, I just started my comp and as a tab messy I just had to click through tons of confirms/alerts to be able to disable the userscript. That was... fun...
1 year ago
Permalink

Comment has been collapsed.

Yeah, I hate that too. I should change that...

1 year ago
Permalink

Comment has been collapsed.

Finally changed it. It now caches the data and uses the cached data if it can't retrieve any fresh data :)
Version 1.3
Implemented caching of data and added support for dynamically generated content.

1 year ago
Permalink

Comment has been collapsed.

This is awesome, Royalgamer06. Thank you very much..

1 year ago
Permalink

Comment has been collapsed.

Cheers!

1 year ago
Permalink

Comment has been collapsed.

Any chance it could also show your badge level for the game? The number could be in red or green. :)

1 year ago
Permalink

Comment has been collapsed.

Sorry, I'd have to reject your request for that. That's not my purpose of this script.

1 year ago
Permalink

Comment has been collapsed.

Can you add an example screenshot to this thread as to how this addon looks?

1 year ago
Permalink

Comment has been collapsed.

Hmm, sure. There was already a screenshot on the greasyfork page. I actually was surprised to see that it wasn't yet added here.

1 year ago
Permalink

Comment has been collapsed.

Just wanted to say that this script is amazing at what it does before I forget again. Very much a time saver for me. Thank you very much for sharing.

Edit: Now we just have to force everyone to include actual Steam store links on their store pages. I really don't understand why so many doesn't do this already.

1 year ago*
Permalink

Comment has been collapsed.

Yeah :P
Also, a problem is content that is dynamically loaded (e.g. html that is added after page has been loaded by javascript). My script only checks for steam links once the page is fully loaded. I might be able to build in a listener for it, though. Anyway I am glad you enjoy it! It's been helpful to me as well. :)

1 year ago
Permalink

Comment has been collapsed.

I really should start doing something productive, like this, with my free time. It would be so utterly convenient to be able to at least modify existing scripts to ones liking but I'm lazy as few :D

1 year ago
Permalink

Comment has been collapsed.

I added support for dynamically generated content. :)

1 year ago
Permalink

Comment has been collapsed.

Sweet, now I have to try it out somewhere. Great work :)

1 year ago
Permalink

Comment has been collapsed.

Installed both - extension and script, but nothing happens. Do I need to modify the script?

1 year ago
Permalink

Comment has been collapsed.

No it should work. Visit http://store.steampowered.com/dynamicstore/userdata/ and tell me what you see.

1 year ago
Permalink

Comment has been collapsed.

Fixed. It would be awesome if it would check not only by link, but also by game title.

1 year ago
Permalink

Comment has been collapsed.

I don't think that would be possible. I'd have to evaluate the content for every page you visit and check for potential steam titles and then I wouldn't able to check if owned for every app, as api.steampowered.com/ISteamApps/GetAppList/v2 doesn't list all apps.

1 year ago
Permalink

Comment has been collapsed.

This is great, thank you!

1 year ago
Permalink

Comment has been collapsed.

Cheers!

1 year ago
Permalink

Comment has been collapsed.

Seems I didn't actually update it on GreasyFork. The new version is now available! Please check it out!

1 year ago
Permalink

Comment has been collapsed.

Release Update Version 1.3
Implemented caching of data and added support for dynamically generated content.

1 year ago
Permalink

Comment has been collapsed.

Seems I didn't actually update it on GreasyFork. The new version is now available! Please check it out!

1 year ago
Permalink

Comment has been collapsed.

Cant seem to go to it http://i.imgur.com/FwAKRCi.png

1 year ago
Permalink

Comment has been collapsed.

Use the direct link

1 year ago
Permalink

Comment has been collapsed.

its fixed now but both links wouldn't work because the certificate actually expired yesterday which prevented me from connecting to it

1 year ago
Permalink

Comment has been collapsed.

Yeah, you're right. Anyway, how is the script for you?

1 year ago
Permalink

Comment has been collapsed.

V1.3.2 Added support for steamcommunity.com and steamdb.info links

1 year ago
Permalink

Comment has been collapsed.

V1.3.3 The data from steampowered dynamicstore userdata will now be always up-to-date + improved the app/sub link detection.

1 year ago
Permalink

Comment has been collapsed.

Suggestion: make the forced updating of userdata from v 1.3.3 configurable, with three options:

  • update userdata every time the script runs (as it is now)
  • once every 10 minutes (potentially configurable; not hard to make it a const at the top anyway)
  • never force-update (don't use ?v=..); would be desired by people who use http://theemu.freecluster.eu/steam_userdata_hoster.php to host their userdata for them
1 year ago
Permalink

Comment has been collapsed.

Done: V1.4.0

1 year ago
Permalink

Comment has been collapsed.

Suggestion:
also show "not interested" games from "rgIgnoredApps" in the userdata JSON
make it configurable whether

  • not interested replaces the otherwise-shown icon
  • there are two instead of one characters added, i.e. wishlisted & not interested, owned & not interested, unowned & not interested

Note to readers: userdata does not list 'followed' apps, so they can't have an extra icon.

(I assume this will only be implemented if there are interested users, so if you make use of 'not interested', reply!)

1 year ago*
Permalink

Comment has been collapsed.

1.3 and later breaks it for me. I have to revert back to 1.2.1 for it to work. Can't figure out why. Same for Firefox and Chrome.

1 year ago
Permalink

Comment has been collapsed.

Define "breaks". And what does the console log say (F12 -> Console)?

1 year ago
Permalink

Comment has been collapsed.

Dear Royalgamer06, thanks for such life easing script and being so productive.

Since "Luckz" also asked for similar and not got answered, I examined your code a bit with my basic programming knowledge to how to implement Not Interested like others since it is in userdata and come up with these additions for a local copy: (dots are skipped codes to not clutter modified lines).

...
const ignoredIcon = "&#ICONNUMBER;";  // HTML entity code for ...
...
function init(jsonText) {
    var json = JSON.parse(jsonText);
    var ignoredApps = json.rgIgnoredApps;
    var ownedApps = json.rgOwnedApps;
...
    if (ownedApps.length === 0 && ownedPackages.length && ignoredApps.length === 0 && wishlist.length === 0 && cachedJson === null && !GM_info.isIncognito) {
...
        if (ownedApps.length === 0 && ownedPackages.length === 0 && ignoredApps.length === 0 && wishlist.length === 0) {
            var parsedCachedJson = JSON.parse(cachedJson);
            ignoredApps = parsedCachedJson.rgIgnoredApps;
            ownedApps = parsedCachedJson.rgOwnedApps;
 ...
        $(document).on("DOMSubtreeModified", appSelector, function() {
            doApp(this, wishlist, ownedApps, ignoredApps, lcs);
...
            $(appSelector).each(function() {
                doApp(this, wishlist, ownedApps, ignoredApps, lcs);
...
function doApp(elem, wishlist, ownedApps, ignoredApps, lcs) {
...
                if ($.inArray(appID, wishlist) > -1) { //if wishlisted
                    html = "<span style='color: WISHCOLOR; cursor: help' title='Game or DLC wishlisted on Steam\nLast cached: " + lcs + "'> " + wishlistIcon + "</span>"; //?
                } else { //else not wishlisted
                    if ($.inArray(appID, ignoredApps) > -1) { //if ignored
                        html = "<span style='color: IGNOREDCOLOR; cursor: help' title='Game or DLC ignored on Steam\nLast cached: " + lcs + "'> " + ignoredIcon + "</span>"; //?
                    } else { // else not interested
                        html = "<span style='color: NOTINTCOLOR; cursor: help' title='Game or DLC not owned on Steam\nLast cached: " + lcs + "'> " + unownedIcon + "</span>"; //?
                    }
                }

And to my luck and your good written code, it works as I tried in https://steamdb.info/sales/ page with lots of entries.

So I wrote this here if you are interested adding it for v1.4.6 and didn't pastebin since code is yours. If you do not like these to be posted here either, drop a comment so I'll edit (delete) from here.

Thanks again for great code.

1 year ago
Permalink

Comment has been collapsed.

Times like these I wish all my userscripts were on GitHub, which can handle these type of stuff better. Anyway, good job on adding functionality to the code! However, I already discussed this with Luckz, uses of IgnoredApps can vary. For example, you took for granted that ignored apps can not be also wishlisted, but actually they can. Same goes for owned and unowned apps. Ignored apps is kinda its own separate thing, whereas a game can either be owned, unowned, or wishlisted (and unowned). So, then we have to add a second icon for ignored apps. Finally I think there should be an option to not consider ignored apps at all, like it was before. Anyway, if you considered these things, I'd be glad to use your code and thanks for the interests!

1 year ago
Permalink

Comment has been collapsed.

Thanks for pointing those out. Well it was a continuation of your code which I skipped to think of precedence or mutual existence. And GitHub really would be great for you at least for collecting and having a page of your own for your codes.

But considering what they meant, using "Ignored" in combination with 'Wishlist' is pointless since I use that temporarily to remind myself, 'I should unwish that game later'. Also extending that logic, Ignored + Owned can mean 'remove this game from library later'. But those combinations are not normally used by most since unless there is a special meaning, it would be useless to mark a game that is either owned or wishlisted by "Not Interested" too. Even if there would be something else I couldn't foresee than precedence can take over like Own > Ignored > Wishlist considering script helps us about buying a game or not.

So like many, I also use Ignored as a 'stand-alone' tag without any combinations and that may explain why the modifications didn't give an error so far. I will look at the modifications again with no guarantee since while I know programming from C and Pascal, being unfamiliar with Javascript can shut me down.

Thanks.

1 year ago
Permalink

Comment has been collapsed.

Changing as you requested to consider ignored as a separate instance:

            if ($.inArray(appID, ownedApps) > -1) { //if owned
                html = "<span style='color: green; cursor: help' title='Game or DLC owned on Steam\nLast cached: " + lcs + "'> " + ownedIcon + "</span>"; //?
                if ($.inArray(appID, ignoredApps) > -1) { //if also ignored
                    html = html + "<span style='color: red; cursor: help' title='Game or DLC ignored on Steam\nLast cached: " + lcs + "'> " + ignoredIcon + "</span>"; //?
                }
            } else { //else not owned
                if ($.inArray(appID, wishlist) > -1) { //if wishlisted
                    html = "<span style='color: blue; cursor: help' title='Game or DLC wishlisted on Steam\nLast cached: " + lcs + "'> " + wishlistIcon + "</span>"; //?
                    if ($.inArray(appID, ignoredApps) > -1) { //if also ignored
                        html = html + "<span style='color: red; cursor: help' title='Game or DLC ignored on Steam\nLast cached: " + lcs + "'> " + ignoredIcon + "</span>"; //?
                    }
                } else { //else not wishlisted
                    if ($.inArray(appID, ignoredApps) > -1) { //if ignored
                        html = "<span style='color: red; cursor: help' title='Game or DLC ignored on Steam\nLast cached: " + lcs + "'> " + ignoredIcon + "</span>"; //?
                    } else { // else not interested
                        html = "<span style='color: orange; cursor: help' title='Game or DLC not owned on Steam\nLast cached: " + lcs + "'> " + unownedIcon + "</span>"; //?
                    }
                }
            }

is showing ignored as stand alone or owned+ignored and wishlist+ignored by two icons next to each other for those who marked it that way. If ignored apps wanted to be eliminated all together like you said, then there can be another boolean const for indicating such like:

const wantIgnores = True
...
                if ($.inArray(appID, ignoredApps) > -1 && wantIgnores) { //if also ignored and ignores wanted (FOR ALL INSTANCES)

to let user change all settings at once only by editing the top most const.

1 year ago
Permalink

Comment has been collapsed.

Check out the new update :)

1 year ago
Permalink

Comment has been collapsed.

Bump for this great script! :) Works everywhere as long as there is a Steam Store URL (and the website is not to terrible styled).

View attached image.
1 year ago
Permalink

Comment has been collapsed.

Thanks

1 year ago
Permalink

Comment has been collapsed.

Great work! Works nice on steamtrades, DIG, IndieGala, Groupees and eve on TremorGames, but for some reason on BundleStars and chrono it doesn't work unless i manually update the line with steamstore url.
What can be the cause?

1 year ago
Permalink

Comment has been collapsed.

what line?

1 year ago
Permalink

Comment has been collapsed.

any line containing http://store.steampowered.com/

1 year ago
Permalink

Comment has been collapsed.

Version 1.5
Added support for games that were removed or delisted on Steam.

1 year ago
Permalink

Comment has been collapsed.

Sign in through Steam to add a comment.