How to Use Selector Helper Extension

Step-by-step guide to using the MrScraper Chrome extension for easier CSS Selector selection.

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.

   
2. Go to any page

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

   
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.

   
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.

   

   
   

   
5. 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.

   

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

   

   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.

   

   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.

   

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