cantino / selectorgadget Goto Github PK
View Code? Open in Web Editor NEWGo go CSS / DOM inspection.
Home Page: http://www.selectorgadget.com
License: MIT License
Go go CSS / DOM inspection.
Home Page: http://www.selectorgadget.com
License: MIT License
This is a pretty awesome tool to get the css selectors / xpath for the elements. I have a use case for which I might need to extend how selectorgadget works.
When there's a listing page, like hacker news (https://news.ycombinator.com/), and if we need to be able to choose multiple fields, the "null" values get left out. Like if a particular post does not have points or link, I need to be able to group them by a parent DOM - or find a common dom between the fields chosen.
Any suggestion on how this can be done? Or if Selector gadget has a mode supporting this?
Hi, do you think you can add support for xpath?
Happens when selecting an SVG.
TypeError: node.className.split is not a function
at window.DomPredictionHelper.DomPredictionHelper.cssDescriptor (selectorgadget_combined.js:11018:33)
at window.DomPredictionHelper.DomPredictionHelper.pathOf (selectorgadget_combined.js:10998:30)
at window.DomPredictionHelper.DomPredictionHelper.getPathsFor (selectorgadget_combined.js:11311:25)
at window.DomPredictionHelper.DomPredictionHelper.predictCss (selectorgadget_combined.js:11322:29)
at window.SelectorGadget.SelectorGadget.sgMousedown (selectorgadget_combined.js:11760:45)
at HTMLDivElement.dispatch (selectorgadget_combined.js:5430:27)
at elemData.handle (selectorgadget_combined.js:5234:28)
When I check node.className
it is not a string but an instance of SVGAnimatedString
.
SelectorGadget is not working at F6s.com (for example https://www.f6s.com/newhaircut ). It's because it's doing split on svg className, which is not a string. I solved it by changing line 7018 at selectorgadget_combined.js from:
if (node.className) {
to
if (node.className && typeof node.className.split !== 'undefined') {
But don't have time to do a pull request, sorry.
Thank you for your amazing extension. I would like to inject selectorgadget to webbrowser c#. Is there anyway I can do it with your extension?
There are no instructions listed in the read me on how to install this...the read me file on github...points to the website for info on how to install it....the website...of course...points to the github account...which point to the website...which...oh you you git now.
Thanks so much for your tool; it was part of my workflow to build my intro.js script.
Seems like it will not work on github.com at all, which makes me sad since I want to build a tutorial for their new Next interface in an hour or 2. It will load other sites just fine on my WIn7 Firefox20.
Update: Tested on Chrome Canary, on the "old Github" interface, not loged in; consistantly gets stuck at "Loading...", & will not load the bar on bottom. If you need me to check via DevTools/Firebug, please let me know.
cheers
Is there a Firefox version of this plugin?
Regards,
Zhao
I could only find this on the CVS Extracare page because I do not know of other pages that might use colons in class names. However, attempting to select the container of the coupon cards shows a CSS selector of .md\:tw-justify-between:nth-child(5)
. If you try to use it in querySelector
, it errors with Uncaught DOMException: Document.querySelector: '.md:tw-justify-between:nth-child(5)' is not a valid selector
. This is caused by the \:
not being properly escaped as \\:
.
Version: Bookmark (August 7, 2013)
Browser version: Firefox 125.0.3 (64-bit)
OS: macOS Monterey 12.0.1
Reproduction shown below:
https://github.com/cantino/selectorgadget/assets/33487725/2224a6d5-c1cd-4827-b33c-a5b465e56536
I have struggled with css selectors and tried many many tools - this is hands down the most useful I've found! I'm do drupal site building and often need to tweak css. Trouble is that selector only targets a page and not the site. any chance that can be accommodated? Please continue development of this - it's wonderful!
On the page https://www.kpu.ca/calendar/2018-19/courses/jrnl/index.html, I'm trying to select the paragraph of course description that follows each course title. For example, "Students will explore how journalism fits in a media landscape..."
I can successfully highlight the appropriate elements in SG by clicking on this paragraph, then clicking on one of the "Prerequisites" elements to prevent them from being included. This results in the correct CSS selector h4+ p
However, when I translate this to an Xpath, I get //h4+//p
which is not correct. I would expect this to translate to something like //h4/following::p[1]
, which gives the correct result.
We have been advising people to use SelectorGadget to write the expressions for the Xpath Extractor in Workbench (http://help.workbenchdata.com/steps/scrape/xpath-extractor) as a way to avoid learning the xpath syntax, so it's unfortunate that this case is mis-translated.
Hi,
Does it support hotkey to trigger?
This project is awesome!
Thanks a lot!
I've got this selector: ":content("Website:")+ .fl_l a" here https://vk.com/dorton
So I can't use it in jQuery (after injecting jQuery into this page) because of this error:
Error: Syntax error, unrecognized expression: unsupported pseudo: content
I thing this is a mandatory feature !!
Hi Andrew,
SG is super useful tool as you know already. I noticed it's not update for quite some time. Can you be honest and tell me if you have somethings on your mind which you think it need to be added to SG to make his functionality even deeper. Or do you know even other/similar tool which do same with more functionality or which have something wich SG doesn't have.
Also, do you have plans on updating SG, and if yes can u share ur vision ?
Peace,
I've modified Coffee files in lib/js/core
and started guard but nothing happens, files in build/
were not updated.
Hi
I dont want to get all tags, I just want a "a" tag or list "a,ul, h2"
How to set it?
Microsoft Edge is the second most used browser on the web, making the browsing experience more flexible, offering many more services for users and optimized for Windows devices.
Microsoft Edge supports Chromium extensions, and you can publish your extensions to Microsoft Edge Add-ons website with minimal code changes. Find out more here.
If you have any more queries about porting Chrome extension to Microsoft Edge or anything else, you can contact the relevant teams whose links are given here.
Let me know if this was helpful. I am happy to help you with more details.
gadget is not working on page http://www.buysellcyprus.com/nqcontent.cfm?a_name=v4_map_search. It stops on "Loading...", however on other pages it is working.
Hi @cantino thanks for amazing tool. But, I think it require some bug fixes or upgrade. As, I've been running some test cases and found that SG doesn't works in few sites and throw this error:
combined.js:22 Uncaught TypeError: e.className.split is not a function
For example : See this error on below URL and as I click on any element on body, it errors and doesn't return and selector
https://www.yellowpages.com/washington-dc/mip/usa-guided-tours-483856541?lid=1001440551023
Yellow background is hard to see on a white background. So what I did is changed the background-color for the selectorgadget_suggested css class to another color which had more contrast. It would be nice if the colors can be adjusted in the extension's UI.
I'm not sure if this is a bug or a feature, but I'd love to know how SelectorGadget manages to allow complex selectors inside the :not
pseudoselector.
For example, from this html:
<h2 id="heading1'> This is Heading 1 </h2>
<p> Some text in section1 </p>
<p> Some more text in section 1 </p>
<ul>
<li> Some random list in Section 1 </li>
</ul>
<h2 id="heading2"> This is Heading 2 </h2>
<p> Some text in section 2 </p>
<p> Some more text in section 2 </p>
I can give SelectorGadget the following CSS:
h2:contains("Heading 1") ~ *:not(h2:contains("Heading 2") ~ *)
And get all the nodes in between the 2 h2
elements (with the second h2
as well). My understanding of the CSS specification is that the :not
pseudoselector shouldn't allow this, and when I try using this selector elsewhere, it won't work.
When I try to get an Xpath for that selector, I get the following from SelectorGadget:
//h2//1')//~//*//2')//~//*)
And this doesn't even look like valid Xpath.
That said, I would really like to be able to select all the sibling nodes between any 2 arbitrary nodes. Is there a library or CSS specification that SelectorGadget uses to do this?
Hi, I was wondering how you guys are able to catch click events and prevent them from propagating? I'm trying to build a Chrome extension that has some similar function and I need to prevent any clicks events from my own event handler.
It isn't really clear how to use SelectorGadget as a library, instead of a full featured bookmarklet.
Specifically I want to build a more advanced workflow around the SelectorGadget functionality. I saw that you mention "Remote Interfaces", but I couldn't figure them out. Could you provide an example of an HTML page with the necessary script dependencies to do a Remote Interface?
I know the bookmarklet has been ported to Chrome so do you intend to port it to Firefox too ?
Best Regards ! ๐
Hello Guys, awesome work on your tool!
It came to me though that I am missing out on the feature of being able to select not only the minimal DOM element but also the exact one, determined by the containing text and type.
This would be great for a plugin that I am working on which lets a chrome user add/attach a hotkey to an arbitrary button or link on a specified website.
Of course i can add all the required selectors to resolve the specific element by hand but it would be great if I had a smart assistant library that can do that for me.
Any thoughts on this?
Cheers, keep it up!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.