In the last months I have been playing with a lot of projects that involve scraping data from websites. No matter whether you’re filling databases with data from online reviews or coding a Twitter that posts abstract GIFs hourly, at some point you will need to lookup the CSS paths of the web elements you want to scrape or interact with.

Both Chrome’s and Firefox’s Dev Tools include a function to do this: right-clicking any element of the DOM tree displays a Copy selector option that saves the element’s path into the clipboard.

Of course, to do this it’s necessary to (1) open the Dev Tools, which takes 2 clicks, (2) select an element of the page, (3) right-click the element on the tree and (4) hit the Copy selector option, taking a total of 5 clicks. This may not seem like a big deal, but once you’ve implemented a few scraping projects it becomes obvious that this mechanical task is actually quite unconvenient and time-wasting.

Continue reading “Writing a Chrome Extension to extract CSS paths faster” →