Extension UI Overview

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

Screenshot of Main View

1
2
3
4
5
6
7
8
9
10
11
12
13
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Screenshot of Main View
  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. Statuses are defined in `src/types.ts`
  8. Show logs.
  9. Selector definition tab
  10. Scrape configuration tab.
  11. Browser storage library tab.
  12. Collapse selector group.
  13. Rename selector group.
  14. Delete selector group.
  15. Selector (CSS or XPath) for element containing individual items (optional).
  16. Start interactive element picker.
  17. Field name input
  18. Delete field.
  19. Field selector input (CSS or XPath).
  21. Treat selector as list for this field.
  22. Results section.
  23. Show results as JSON.
  24. Download extracted data.
  25. Copy extracted data to clipboard.
  26. Show results in a new tab.
  27. Clear extracted results.
  28. Collapse results for a selector group.

Screenshot of Config Tab view

1
2
3
4
Screenshot of Config Tab view
  1. Pagination section. See `src/types:PaginationConfig` for definition.
  2. Extraction options section. See `src/types:ExtractionOptions` for definition.
  3. Metadata section. See `src/types:Metadata` for definition.
  4. Variables section. Not implemented

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 Results New Tab

1
2
3
4
5
Screenshot of Results New Tab
  1. View Results
  2. View Logs.
  3. View results as JSON
  4. Download results data in different formats.
  5. Copy results data in different formats.