Skip to main content

Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines

Add an option to exclude owned games when searching.

A topic by Dio Kyrie created Feb 01, 2024 Views: 8,243 Replies: 20
Viewing posts 1 to 10
(+4)

So Just a little option on left side when searching for a games, so I do not see all games in my collections and library.

Ignore Installed Games
Ignore Games in my Collections
Ignore Games on Wishlist

This would be great to not scrool through lots of games, especially, when I have thousands of games in collections.

(4 edits)

So, as a side project I already made an extension to give more usability to the old tag exclusion feature https://redonihunter.itch.io/itch-browse-tag-exclude It adds a box to enter a tag to ignore in browse.

For the feature requested in this thread, another extension is coming along, capable of doing just as it says in the thread title. Currently doing testing and polishing, and waiting for OP to give more input. The gist is, you add items on your collection to a list* and when you add items to a collection the extension will even try to add that new item to the list*. All items on that list will henceforth be not  shown* anywhere except your library.

* It is more than one list, and not shown is freely chooseable. You can even highlight the games with a yellow border or any css styles. You can also add developers instead of games projects. And at the press of a key at that.

And yes, that means you can simulate multiple tag exclusion with this thingy - to a degree. Go visit an unwanted tag, add the most popular 10 pages or so to one of the lists, go to another unwanted tag, rinse repeat. Give those lists the display none style, and activate those lists. It won't update new items of course, but you can put items to ignore on lists with a key press while hovering over the game link. So weeding out the popular page is a matter of seconds.

---

I feel you.

It would be possible to do this on user side with some css, but I lack the prowess to make a browser addon. Ignoring things from browse section is trivial, see css below.

Managing the ignore list, is not. And manually adding a thousand game links is no fun. One could try to grab the urls to games from a collection page with some regex and generate a list a bit quicker, but the list would still need to get updated.

@-moz-document url-prefix("https://itch.io/games") {
div.game_cell:has(a[href*="paste_full_link_to_game_inside_quotes"]) { display: none !important }
div.game_cell:has(a[href*="//or_ignore_a_publisher.itch"]) { display: none !important}
div.game_cell:has(a[href*="itch.io/or_ignore_games_starting_with"]) { display: none !important}
}
(1 edit)

Hahah I just started to make such browser extension. Well I as well have no knowledge but I get the gist on how to start.
Here is what I come with:

[[Step 1 Make an Extension]]

[[Step 2 Gather Links from Collection]]

Early on ask users to scroll to the end of their collection as extension is still under development.

At start here we should provide auto scroll and write links to Database.

Later on we can as well delete links that are already written in DB.


[[Step 3 Store Links from Collections]]

We should as well store permalink to collection. If link is already in Database then we only updating it and not writing new Collection.

[[Step 4 Clear Link Database functionality]]

[[Step 5 Compare links from DB to those on Page]]

Should be done on each new loading of new elements. Like scrolling down.

[[Step 6 Delete elements on match]]

I briefly thought about trying to make an extension. For that I tried to do it by hand. Like saving a collection and extracting the links somehow. If I can do that manually, it should be a matter of automating the process.

First I noticed that you need to have infinity scroll enabled to even see the whole collection - and possibly scroll it down. The content seems to be generated on the fly by javascript. And for some reason I could not save the webpage. Only as a full html with image download I got the html to parse later, wich I did not try so far.

There might be more elegant things to filter for, but the link to the game seems rather unique. So what is the regex for a link to an itch game.

"\"https://[-a-z0-9]+.itch.io/[-a-z0-9]+\"" or something similar.

So the extension would grab from the current page and populate a list, and present it to the user to verify and maybe edit, and then save to the ignore list.

After that, bells and whistles, like give ability to igore single game by providing a button similar to the add to collection button already present in browse for each game if you hover on the thumbnail. And of course, editing the list

Javascript is a headache. And extensions also. With my zero knowledge I came up with this. It will put all the links to games on a page in your log. But it already fails if you have infinity scroll active. So in theory you would grab the links from your library pages, and create a filter css out of it and save that css, and inject it onto the browse pages. You could do filtering with js, but I believe it is better to let the browser handle it with the css mechanism.

var cells = document.getElementsByClassName("game_cell");
for (var i=0;i<cells.length;i+=1) {
    var links = cells[i].getElementsByClassName('title game_link');
    console.log(i, links[0].href)
    }
(+1)

You do not need "game_cell" when parsing for links in collection. to reduce that impact of infinite scroll we can actually, ask users to turn on infinite scroll and then extension would simply block all media for a time, ask users to scroll to bottom and then we can parse "game_grid" for href content. Thus without media content it will be fast as they need no huge files download(previev images) and then, we just gather links in database.

(2 edits)

Now that you mention it, yeah, there is a more direct way. And now I feel stupid for not knowing you can execute js in console directly. I was fixated on the game cell because that is what you need to hide for filtering. I did not understand the method with the game grid. The links are under title game_link ready for grabbing.

For doing it manually, that would already work. Grab the collections, merge the files, format them together in a css and import the css in something like Stylus.

But there is bad news as well. It will not work like this, if you have dynamic loading on (infinity scroll). The css will be ignored for the dynamically loaded content of second page.  {display:none !important} or {opacity:0.07 !important} deals with infity scroll.

@-moz-document url-prefix("https://itch.io/games") { 
div.game_cell:has(a[href="grabbed link"]) { display: none !important}
var uniqueHrefContents = new Set();
var games = document.getElementsByClassName("title game_link");
for (var i=0;i<games.length;i+=1) {
    if (!uniqueHrefContents.has(games[i].href)) {
    uniqueHrefContents.add('div.game_cell:has(a[href="'+games[i].href+'"]) { display: none !important}');
    }
}
var combinedHrefContents = Array.from(uniqueHrefContents).join('\n');
var blob = new Blob([combinedHrefContents], { type: 'text/plain' });
var a = document.createElement('a');
a.href = window.URL.createObjectURL(blob);
a.download = 'unique_href_contents.txt';
a.click();

This does the stringing for the css already, but obviously saved data for appending new items should not include those.

And maybe the "data-game_id" could be used, instead of the link to the game. That looks like it is a counter that is a lower number for old games. But I guess you can not retrieve games by it, only recognise them again for filtering. And that number is way shorter than a link, so css filtering might be slightly faster. For human inspection, the game title or complete link should still be saved though.

Here is my code, it seems to work as of now. I hope this will be usefull for you or others who see this.
So what does it do.
User needs to manually scroll page to the end to have all games in collection displayed on the current page.
The we paste this code in console. and as result .txt file downloaded with all liks leating to game page.

// Get all anchor elements with the class 'game_link'

var anchorElements = document.querySelectorAll('.game_link');

// Initialize a set to store unique href contents

var uniqueHrefContents = new Set();

// Iterate through each anchor element

anchorElements.forEach(function (anchorElement) {

    // Check if the element has the correct data-action attribute

    if (anchorElement.getAttribute('data-action') === 'game_grid') {

        // Get the href content

        var hrefContent = anchorElement.getAttribute('href');

        // Check if the href content does not contain "game_grid" and is not a duplicate

        if (hrefContent && !hrefContent.includes('game_grid') && !uniqueHrefContents.has(hrefContent)) {

            // Add the href content to the set

            uniqueHrefContents.add(hrefContent);

        }

    }

});

// Convert the set to an array and join the contents

var combinedHrefContents = Array.from(uniqueHrefContents).join('\n');

// Save the combined href contents to a file (e.g., using Blob and a link)

var blob = new Blob([combinedHrefContents], { type: 'text/plain' });

var a = document.createElement('a');

a.href = window.URL.createObjectURL(blob);

a.download = 'unique_href_contents.txt';

a.click();

So, now we suucceded at one step. We have two major left:
1. Read data and hide elements.
2. Pack the code in extension.

(+1)

I am working on extension and seems like it is good. Have all the buttons and can execute scripts.

(1 edit) (+1)

See the part about headache ;-)

Manually compiling your collections into an ignore css already works. But see above. If you keep dynamic loading on, there seems to be trouble with that method of filtering. Also, I really think, filtering could be done with the number of the game. It is a number that is counting up and is currently about 2.5 million. That many projects exist or did exist on itch.

Edit. Actually, with the filtering, since it would only hide and not replace it with new items not filtered, it might be better to overimpose a transparent image or some other style that highlights or rather "greys out" the game, so you would still have access to it and see it appear in the browse list, just not as prominent. While you might have it in your library, even in a collection, you might have put it there and forgot it. Maybe a later option for customizing the way the thingy does it's thing.

I am currently stuck at how to save info in such a way that extension could use it. I have problems with samewing data to local storage of browser so, I dont know how to do that. The best way seems to be do as it is to download data as txt file and then user manually open it in extension as a list.

(+1)

Me neither. I was fumbling through some tutorials and have problems with elementary stuff, mostly because the logic of javascript is alien to me. And stuff like the popup of an extension having its own console.

That would be the doc for storage.

But for starters, exporting the list is a good idea. That can be used for other things as well. Also, if you can import lists you can sync to other browsers.

I am currently stuck at how to save info in such a way that extension could use it.

Yeah. Certain items cannot be saved directly. Would be too easy. I do it with JSON.stringify(Array.from(xxx))

Current headache inducer is event listeners and url filter for me. And why it does not work on new tabs. 

(1 edit)

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(); }

So. Are you still working on this? Any obstacles to overcome? Maybe I can help, as I tackled quite a few of those. It works frighteningly well so far. Though I have no buttons. Not sure how to make use of the extension popup. I activate the stuff with context menu.

Oh I have even not thought about context menu. At the moment I am more concerned about making my cource work for Universitiy so I have no time, but will return to this extension as soo as I am free.

It will be fun to compare different methods of problem solving. The context menu stuff was just the first things I stumbled over - also I lack knowledge in html.

I am stumbling over beginner's pitfalls and idiosyncracies all the time. Like needing to put the script tag in the popup.html at the bottom, instead of the header - or I cannot dynamically change html elements. Or that I cannot reliably use a button in the context menu to load things. Maybe I am using the wrong loading method, but I think it is a bug or idiosyncracy of chrome. The click to indicate a user action is not given when selecting the context menu item, but when opening the context menu... urgh.

Currently adding bells and whistles. The core functionality works - I can style items and they stay styled untill unstyled.

I even had zipping of the data at one time. Which was fun in a sick way. Blobbing, streaming, zipping, converting to base64 and writing to storage. It worked. But it was too slow for page opening and changes. But that's what you get, if you stresstest with literally millions of items to ignore. Yes, it worked. But I changed from that to operate on the storage directly and just ask unlimited storage permission. There is a 10MB barrier. And if you do not use Set or Map or Arrays, but Objects, it is rather straightforward to store and update. 

As a bonus, while working on this, I thought to myself, it should actually be trivial to make a button for that exclude feature, so many people are asking about. And it was. I figured, if the extension would work, people would use it to ignore games with tags. That is why I tested with very big lists. Better to also give that exclusion functionality as well, so there is less lists to do.

I made a separate extension out of it. https://redonihunter.itch.io/itch-browse-tag-exclude

We should as well store permalink to collection. If link is already in Database then we only updating it and not writing new Collection.

I managed to "hook" into the mechanism you use to add new items to a collection. It does not work on all subpages, but a new button appears when you add an item to a collection. It is a checked checkbox that says it will add the item to the extension's list. So if you should not want to add it, just uncheck the checkbox.

So in theory you should only populate your collection list once and then just browse and use itch regularly. 

I am currently concerned about game ids. I saw some that seemed to be recycled. If that is possible, I might have to switch to gamelinks, instead of ids. The ids at least seemed to have been recycled by the developer. But maybe I am mistaken. It was "old" ids that have recently been published. The problem with game links, developers sometimes change their name or the link of the game. It is a problem for the regular collections too, but I think this is because they create a new project with the old name.

Even if you have no time to code, maybe you could provide some feature whishes that would be cool to have. Or anyone else for that matter. I think this thread maybe got spammed by bots, the view count is way too high for only us two talking here.

I am not exactly promoting it, but for anyone willing and able to use custom browser extensions and tampermonkey scripts, there are two working client side solutions to two wanted features on my project page https://redonihunter.itch.io/itch-browse-tag-exclude

The search mods are capable of removing horror and visual-novels at the same time. This is possible, because vn are a genre. And of course there is this old feature of adding a search query to exlclude a single tag. The extension adds a box to comfortably use that exclude feature. And the tampermonkey script adds buttons to exclude any of the genres.

And as a bonus I uploaded the bare bone tampermonkey version of the exclude games feature to the project. The script features two lists. Any item on a list will by modified by a css style. Like display: none to hide (exclude) the item. It can switch to an alternative style for both lists. The alternative style is used on library pages or when toggled. You can add items or developers to the lists. And you can export and import the lists.

So the use case for the feature in this thread, just add all the owned games to list 1 and that's it.

It uses keybindings and you need to hover your mouse over the item in a browse view like library or search or browse. Default is key 1 and 2. 3 and 4 will add not the game, but it's developer. And 5 switches between the two styles.

Use list 2 for things you already know or you want to ignore or whatever. You can also export your owned games and clear the lists to do some special browsing sessions with ignore lists and later reimport your owned games. Also you do not need to ignore things. You can highlight them. It is just css styles. Stuff like scale: 0.5 does work too. Configuration is done by editing the tampermonkey script's constants near the beginning of the script.