
Show HN: Extract a unique CSS selector for any element on any page - GFuller
https://flutter.social/bookmarklet
======
petercooper
At first glance, I thought this was going to be like Selector Gadget
([http://selectorgadget.com/](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.

~~~
GFuller
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
I don't get it - I do this in Chrome tools > magnifying glass > right click >
Copy CSS path. What does it solve this ?

~~~
GFuller
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.

------
SchizoDuckie
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](http://i.imgur.com/lT7hUTj.png)

------
guiporto
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

~~~
GFuller
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
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!

