Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

flutter.social

Post reply on HN
Print view View original

1–10 of 10 posts

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

#2

Post by petercooper »

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.

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

#3

Post by GFuller »

petercooper wrote: post #2

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 mo…

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.

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

#5

Post by GFuller »

malditojavi wrote: post #4

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

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.

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

#7

Post by GFuller »

guiporto wrote: post #6

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

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.

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

#8

Post by eterm »

malditojavi wrote: post #4

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

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.

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

#9

Post by werber »

GFuller wrote: post #7
guiporto wrote: post #6

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

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.

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!
Post reply on HN