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

by GFuller • 11 years ago

20 9 11 years ago

At first glance, I thought this was going to be like Selector Gadget (http://selectorgadget.com/), a tool I've used for years to get CSS selectors for elements on pages. But it gives you a unique selector for the unique element you click, which adds a different angle.

I've got to admit, I'm not sure I'd use this over SG since SG can nail down to a single element if you use it the right way, but it's great to see more tools of this nature, as it can really help when doing ad-hoc scraping.

GFuller3• 11 years ago

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.

malditojavi• 11 years ago

I don't get it - I do this in Chrome tools > magnifying glass > right click > Copy CSS path. What does it solve this ?

GFuller3• 11 years ago

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.

eterm• 11 years ago

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.

guiporto• 11 years ago

Just tested it. I can't leave the Flutter Selector once I open it. Clicking OK or Cancel keeps it. I've tried ESC as well but the selector is still present until I reload the page

GFuller3• 11 years ago

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.

werber• 11 years ago

I have one (red close button). Flutter on first use seems like a faster workflow than the normal, right click, inspect element, look at the chrome elements, find the tag. Great Job!

SchizoDuckie• 11 years ago

Super cool. I can really use this for DuckieTV's custom search engine definition form i'm working on!

http://i.imgur.com/lT7hUTj.png

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

Related Stories