Extension UI Overview

This page contains annotated diagrams of the browser extension User Interface.

View of Main UI

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
View of Main UI
  1. Run config
  2. Save config to browser storage.
  3. Load config to from a file.
  4. Save config to a file.
  5. Add selector group. Useful for extracting different data from same page.
  6. Menu with more actions.
  7. Status indicator.
  8. Show logs.
  9. Selector definition tab.
  10. Scrape configuration tab.
  11. Saved configs library.
  12. Selector (CSS or XPath) for element containing individual items (optional).
  13. Start interactive element picker.
  14. Field name input.
  15. Duplicate field.
  16. Delete field.
  17. Field selector input (CSS or XPath).
  18. Start interactive element picker.
  19. Selector finds one element.
  20. Selector finds multiple elements.
  21. Selector finds and counts multiple elements.
  22. From found element(s) extract text, a specific attribute (href, src data-id etc) or a specific property (innerHTML, outerHTML).
  23. View results as Table or JSON
  24. Collapse result groups. See (5.)
  25. Download results in different formats.
  26. Copy results in different formats.
  27. Open full page view in new tab.
  28. Clear results.

View of Field in List mode

1
2
3
View of Field in List mode
  1. Select multiple elements using given selector.
  2. What to extract from each element, text, attribute or property.
  3. Select nested elements on each element. When defined the selector acts like a container selector and the sub-fields are fields in that container.

View of Field in List mode with Sub-fields

1
2
3
View of Field in List mode with Sub-fields
  1. Sub field name.
  2. Sub field css/xpath selector. Currently only text is extr
  3. Add another sub-field of same level.

View of Config Tab

1
2
3
4
5
6
7
8
9
View of Config Tab
  1. Main URL being scraped.
  2. Open URL in new tab.
  3. Copy URL to clipboard.
  4. Auto-generated unique id of current config.
  5. Copy ID to clipboard.
  6. Pagination section, see <pre>packages/core/src/schema.ts:ScrapeConfig</pre>
  7. Pagination section, see <pre>packages/core/src/schema.ts:PaginationConfig</pre>
  8. Pagination section, see <pre>packages/core/src/schema.ts:ExtractionOptions</pre>
  9. Variables section. <b>Not implemented</b>

Next pagination config

1
2
3
Next pagination config
  1. Selector (CSS or XPath) for next button.
  2. Maximum number of pages to navigate. Zero means unlimited
  3. Test navigation by moving to the next page.

Links pagination config

1
2
Links pagination config
  1. Input for links to navigate to. One per line.
  2. Test navigation by moving to the next page.

Template pagination config

1
2
3
4
5
Template pagination config
  1. Input for URL template. The template is used to create the URL for the next page.
  2. Start page number.
  3. Number to add to previous to get next page
  4. Maximum number of pages to scrape. Zero means unlimited
  5. Test navigation by going to next page using defined values.

Screenshot of Config Library

1
2
3
4
5
6
Screenshot of Config Library
  1. Type to search in id or url fields of configs
  2. Change config sort
  3. Rename saved configuration.
  4. Delete saved configuration.
  5. Show configuration definition.
  6. Load configuration into sidebar

Screenshot of Full Page View

1
2
3
4
5
6
Screenshot of Full Page View
  1. Results Tab.
  2. Logs Tab.
  3. Snapshots tab. Saves data when extraction runs in case session is interrupted.
  4. View results as Table or JSON.
  5. Download data in different formats.
  6. Copy data to clipboard in different formats.