itch.io

I am still dumbfounded about all that extension stuff and js.  It got a litte better. But I managed to fumble together a more elegant selector an extension. Currently ironing the wrinkles out. In the meantime, the script below should work for doing it manually if you use a user style extension.

/*
Copy and paste this to the console of an itch page containing game cells. Those are the 
thingies containing the image and link to a game.
Use inspect page feature from browswer and there the console.
Select one style by adjusting the comments. Or write your own.
Save the generated file and use in your user style extension.
Do not forget to encapsule the css or put a scope into your Style extension, like this example
@-moz-document url-prefix("https://itch.io/games")
{
content of the saved css(s) here. copy css*.txt cssall.txt in cmd if you want to concatenate files
}
*/
{
    let game_cell_style = '{opacity:0.07 !important}';
    //let game_cell_style = '{outline:auto purple !important}';
    //let game_cell_style = '{display:none !important}';
    let css = '';
    let list_of_links = '';
    let itch_cell_css_start = 'div.game_cell[data-game_id="';
    let itch_cell_css_trail = '"]';
    let link_re = '^https:\/\/[\\w-]+\.\itch\.io\/[\\w+-]+';
    let games_on_page = document.getElementsByClassName("game_cell");
    let temp_link_ar;
    let temp_game_id;
    for (let i = 0; i < games_on_page.length; i += 1) {
        temp_game_id = games_on_page[i].getAttribute('data-game_id');
        if (temp_game_id) {
            temp_link_ar = games_on_page[i].querySelector('.title').href.match(link_re);
            if (temp_link_ar) {
                css += itch_cell_css_start + temp_game_id + itch_cell_css_trail + game_cell_style + '\n';
                list_of_links += temp_link_ar[0] + '\n';
            }
        }
    }
    // you can copy from console too, if you like
    console.log(list_of_links);
    console.log(css);
    // you can use the line below to export a list of gamelinks instead
    // let blob = new Blob([list_of_links], { type: 'text/plain' });
    let blob = new Blob([css], { type: 'text/plain' });
    let filename = 'css.txt';
    let a = document.createElement('a');
    a.download = filename;
    a.href = URL.createObjectURL(blob);
    a.addEventListener('click', () => {
        setTimeout(() => URL.revokeObjectURL(a.href), 300 * 1000);
    });
    a.click();
}