It seems that you're using an outdated browser. Some things may not work as they should (or don't work at all).
We suggest you upgrade newer and better browser like: Chrome, Firefox, Internet Explorer or Opera

×
high rated
This add-on to GOG improves usability and adds functionality.

What it does (see attached images)
- shows game title in green with a big check mark if you own it.
- adds links to search for the game on YouTube, Steam and metacritic

It helps you avoid purchasing games that you already own and helps find more information about a game.
I find this especially helpful during sales.

You need a css/js injector for this to work e.g. https://goo.gl/SJWKyv
Below is the css and js code you need.

Enjoy!

gog.css
======
.header__title,.inj-quick-links {
display:inline-block;
}

.inj-quick-links a {
padding:0 0 0 15px;
font-size: 14px;
}

.inj-quick-links a:hover {
text-decoration:underline;
}

.owned {
color: rgb(55, 87, 1);
xborder-bottom: 1px dotted;
position:relative;
}

.owned:before {
content: " ";
display: block;
border: solid 0.4em rgba(55,87,1,0.9);
border-radius: 50%;
height: 0;
width: 0;
position: absolute;
left: -0.95em;
top: 50%;
margin-top: -0.35em;
}

.owned:after {
content: " ";
display: block;
width: 0.15em;
height: 0.35em;
border: solid rgba(255, 255, 255, 0.9);
border-width: 0 0.12em 0.12em 0;
position: absolute;
left: -0.7em;
top: 50%;
margin-top: -0.225em;
transform: rotate(45deg);
}

gog.js
=====
// wrap in function - runs when page is ready - same as calling Handler for .ready()
$(function() {

// quick toggle - replace with true to disable script
if (!true) return;

function main(){

// block execution until element is available
$element = $('.header__title');
if (!$element.length) {
setTimeout(main,500);
return;
};

// main
colorOwned($element);
var title = ' ' + $element.html().toLowerCase();

var queryHead = "https://duckduckgo.com/?q=\\";
var queryTail = "";

var youtubeURL = encodeURI(queryHead+'youtube pc gameplay'+title+queryTail);
var steamURL = encodeURI(queryHead+'steampowered'+title+queryTail);
var metacriticURL = encodeURI(queryHead+'metacritic pc game'+title+queryTail);

var youtubeHTML = '<span><a href="'+youtubeURL+'">Youtube</a></span>';
var steamHTML = '<span><a href="'+steamURL+'">Steam</a></span>';
var metacriticHTML = '<span><a href="'+metacriticURL+'">MetaCritic</a></span>';
var containerHTML = '<div class="inj-quick-links">'+youtubeHTML + steamHTML + metacriticHTML+'</div>';

$object = $('<div/>').html(containerHTML).contents();
$element.after($object);

}

function colorOwned($e){
if ($('*[ng-show="productStatus.isOwned"]').is(":visible")) {
$e.addClass('owned');
};
}

// delay exectuion to wait for page JS to finish
var delayTime = 0;
setTimeout(function(){main();}, delayTime);
});
Attachments:
before.jpg (73 Kb)
after.jpg (40 Kb)
Hmm, I do something similar by simply specifying the plain text file to use for the "Style sheet" in Safari's preferences in the "Advanced" tab.

I have the games I own highlighted in blue, and the heart icon for wishlisted items made red. I also emphasize the Mac icon so I can discern it more readily since that's the system I'm currently using. Just five rules.

In addition to that, I've recently added styles for the mosaic of items on the main page of the current summer sale. Just six rules. I'll likely remove those from my file after the sale.

No Javascript at all, no extensions necessary. Just a few CSS rules in a plain text file and then selected in the web browser's preferences as the style sheet (I'm using Safari).

Curiously, I had to use "!important" with most of the properties to enforce an override for GOG's website. (Admittedly, I've gotten use to CSS so I write it rather compact nowadays, though I usual keep the rules to one per line as I have below.)

—————

.icon-heart{color:red!important}
.icon-mac{font-size:11px!important;line-height:11px!important;border-radius:11px;border:2px solid white;background-color:white;color:black;background-image:none!important}
.icon-mac::before{content:"\e003" !important}

.product-row.is-owned{background-color:LightSkyBlue!important}
.product-row.is-owned .product-row__title{color:black!important}


/*2016 Summer Sale*/
.mosaic__product.is-owned .summer-product__img{box-shadow:0 0 0 2px rgb(63,63,63),0 0 4px 4px rgba(0,223,255,.8)!important}
.mosaic__product.is-owned .ultimate-price__btn{background-color:rgba(0,223,255,.24)!important;box-shadow:inset 0 0 0 1px rgba(0,223,255,.6)!important}
.mosaic__product.is-owned .ultimate-price__owned-label{color:rgb(0,223,255)!important}

.mosaic__product.is-wishlisted .summer-product__img{box-shadow:0 0 0 2px rgb(63,63,63),0 0 4px 4px rgba(255,0,0,.8)!important}
.mosaic__product.is-wishlisted .ultimate-price__btn{background-color:rgba(255,0,0,.24)!important;box-shadow:inset 0 0 0 1px rgba(255,0,0,.6)!important}
.mosaic__product.is-buyable:hover .ultimate-price__btn{box-shadow:0 0 0 1px rgba(0,0,0,.45),0 1px 3px 0 rgba(0,0,0,.45)!important}
Thanks for sharing.
Nice choice of colors for the sales page.

p.s. JavaScript is not required, you can use the css alone. JavaScript is used to add the extra research buttons for games.
It is always nice to see people contributing to the community. Thank you.
avatar
Gede: It is always nice to see people contributing to the community. Thank you.
You're welcome.
Only so much you can do with css and js. Would be harder to improve GOG search, which could do with an update.
avatar
Gede: It is always nice to see people contributing to the community. Thank you.
avatar
shadi.lahham: You're welcome.
Only so much you can do with css and js. Would be harder to improve GOG search, which could do with an update.
If you mean the forum search, then my script takes a stab at that (it's not perfect but it does add some extra features)

And if you mean the game search then MaGog has you covered :)
avatar
shadi.lahham: You're welcome.
Only so much you can do with css and js. Would be harder to improve GOG search, which could do with an update.
avatar
adaliabooks: If you mean the forum search, then my script takes a stab at that (it's not perfect but it does add some extra features)

And if you mean the game search then MaGog has you covered :)
I wonder if there is some central thread where all these tools are mentioned.
avatar
shadi.lahham: You're welcome.
Only so much you can do with css and js. Would be harder to improve GOG search, which could do with an update.
avatar
adaliabooks: If you mean the forum search, then my script takes a stab at that (it's not perfect but it does add some extra features)

And if you mean the game search then MaGog has you covered :)
yeah MaGog is great. I use several external tools to find games on GOG.
also check out isthereanydeal https://goo.gl/jg5bci
and cheapshark https://goo.gl/UKvzUm

I'll checkout your script for forum searches. Thanks for sharing :)