​
About Extension

MrScraper Selector Helper Extension helps you quickly find CSS Selectors targeting single and multiple selectors by selecting an element. This article will guide you through the extension’s features and how to use them.

Currently, the extension is only supported on Chromium-based browsers.

​
Features

  • Toggleable target mode between target single element and multiple elements.
  • Customizable root element.
  • Manual selector input for selector testing.

​
Using the Extension

To use the extension, follow these steps:

1

Install the extension

Install the extension from this page or search for MrScraper in the Chrome Web Store.

MrScraper Chrome extension store page

2

Go to any page

Go to any page that you want to scrape. For example, this guide’ll use the eBay product page.

Scraped page example

3

Activate the extension

Click on the extension icon or use the Ctrl + Shift + V shortcut to turn on the extension. Repeat the same process to deactivate the extension.

Activate the extension

4

Select any element

Try to hover over any elements. You’ll see a dashed purple border when hovering on any elements. To select that element, press Right Click. Any selected elements will have a solid green border.

Elements that can be selected during hover (dashed purple border boxes)


Selected elements (solid green border boxes)

5

Extension elements and controls

Extension elements and controls

The extension consists of various controls, such as:

  • The input field in the middle for manual input or input results.
  • The trash/ clear button. When clicked, this button will reset the CSS selector and root element.
  • The dashed window button is used to select the root node.
  • The multi/single square button. The button switches the selector mode between single and multiple select modes. By default, it uses multiple select modes.
  • The copy button is used to copy the input result.
6

Single and multiple select modes

You can choose between single and multiple select modes when selecting elements.

  • Multiple select modes will generalize a CSS selector that works on various elements. The multiple-select mode will be useful if you want to select all title elements.

Multiple select mode selection result example

  • Single select mode is useful when you want to target only one element, as it tries to find a unique selector for that element.

Single select mode selection result example

Based on the above examples, a single select mode will try to find a unique selector by utilizing the element ID and element position. Meanwhile, multiple select modes will try to avoid it to ensure the selector is general.

7

Changing root node

You can limit the element by changing the root node when selecting elements. Changing the root node can be useful when if you try to target multiple elements, but there are some other elements that you don’t wish to select.

Element selection with root node

Click on the dashed window button to select the root node. Any element selected during this mode will be marked as a root element that has a solid blue border. Click on the button again to cancel (before selecting any root element) or clear the button to reset the root element.

8

The input field

The input field will be filled with the generated selector when selecting an element. You can also type any CSS Selector to test if it works as intended by comparing it with the green-bordered elements.

Copy or edit the selector on input field

Once you have followed through the steps, you’re ready to utilize the extension to help with your scraping process.

How to Setup WebhooksManual Scraper