Way around to hide parent if :visited link

Question

I am currently working on a small Google Chrome extension to display the YouTube subscription page like it was before, on a grid.

I had no problem tweaking the CSS to have a look close to the previous one, but I am stuck with something else: I am trying to find a way to hide videos that have already been seen by the user.

There seem to be no difference at all in the CSS or HTML hierarchy between visited and un-visited videos, so I guess I am stuck trying to find a way using the :visited property.

BUT: the browser only allows to change color/border-color/background-color of :visited property, and jQuery cannot filter/select the :visited property.

Do anyone have any idea of a way around this problem ?

Answer 1

you may not be able to directly select the :visited pseudo-class, but you should be able to check whether an attribute set by that pseudo-class exists, providing the :visited has at least one difference.

say for example the :visited pseudo-class sets the background to red, you should be able to check for that like so

if ($(element).css('background', 'red')){
    // do something
}

so i guess that in your case, the css property that is different would perhaps be

display:none;

so you should be able to check that against

display:block;

or something along those lines.

Answer 2

Edit

As I read over the first paragraph that the questions is actually about a Google Chrome Extension and it wasn't tagged for that, I answered it for the request of using using jQuery. Here are some more information on how to access the visited pages in a Google Chrome extension using the chrome.history API.

Google chrome.history API

In a Google Chrome extension you can access all the visited links if the user grants permission. You have to include this code in your Extension manifest:

"permissions": [
    "history"
],

This will result in a Permission warning during the installation, informing the user what information your extension might want to access.

Finally you can now use the search-method to request visited pages. You can even request all pages if the text attribute of the query object is empty:

chrome.history.search(object query, function callback)

This will result in an array of historyItems, which holds a bunch of information for every page, like the URL, the page title, the last time visited …

JavaScript

Unfortunately it is not possible to select the links a user has visited using a combination of CSS and JavaScript. This is due to privacy settings. It's even written in the CSS2 specification "5.11.2 The link pseudo-classes: :link and :visited"

UAs may therefore treat all links as unvisited links, or implement other measures to preserve the user's privacy while rendering visited and unvisited links differently.

You can read more about it here: "Plugging the CSS History Leak".

Possible work arounds for your problem could be:

• store the links a user clicks in the Local Storage or
• redirect each link through a script that stores the link in the user's session or
• subit newly clicked links using AJAX and also store the values in the session