How can I individualize an element to a unique identifier?

Question

I am trying to figure out a way to individualize an element to a unique identifier. What I mean by this is, for every element (Either an element that starts in the DOM or one that is created later on), I want to assign a unique identifier to that element so that when a user revisits a website, they will be able to reference that element via it's unique identifier.

I was thinking that you could possibly apply some sort of arbitrary identifier number or string to any given element based on who it's parents where, where it's placed inside of it's parent, and who it's siblings are in reference to their respective identifiers.

Does anyone have any suggestions as to how I could go about individualizing any given element in a way like this? I am asking because I wanted to write a Chrome extension that allows the user to select any element arbitrarily and apply different rules to them that would persist across multiple site visits.

Answer 1

You can use XPath. There are already existing chrome plugins which find a unique XPath for each element. example chrome xpath plugin

Answer 2

In general, your problem is not 100% solvable. A page can change a bit, and that will throw all your identifiers off, and heuristics only go so far.

Imagine that a user chose a particular word in the second news article on a site.

Later, he visits the site, and there's a new news article, pushing the others down. Now that word won't be found, or an unrelated one will be highlighted.

That said, what you describe is closest to XPath, as omer727 noted.

A single element can have multiple valid XPaths, so it's up to you how an XPath is constructed. There's a big question on this topic already.