Show HN: Extract a unique CSS selector for any element on any page

I use Selector Gadget too and I was recommending users of Flutter use it to get selectors. However, I'm trying to make the process of getting a unique selector for any element so simple it won't put anyone off. This bookmarklet avoids the need to deselect things and once an element is selected it's just a case of CMD/CTRL + C.

The purpose of this bookmarklet is to provide a streamlined method of getting the selector without having to go into the source or use chrome tools.

There is also the problem of using ids. For example in Flutter I may want to auto tweet out the top post in a list of posts on a blog. If the posts have individual ids, and the CSS selector includes them, every time Flutter tries to scrape new content it will get the same post. I want the unique selector for the page element. i.e. the first post in the list.

This is built in to FireFox too. Right click element, "Inspect Element", Right click element which is now scrolled in view and highlighted in the tools, "Copy Unique Selector".

I guess having it directly on right click or in view would be useful sometimes.

There should be a red 'Close' button in the bottom right-hand corner of your screen. I'll add the option to use ESC as well.