ico-arrow-big-left

72h Web Scraper Dev Tools Chrome Extension

Key Information

Register
Submit
The challenge is finished.
Show Deadlines

Challenge Overview

CHALLENGE OBJECTIVES
  • Build a DevTools Chrome Extension with simple UI to help debug a web scraper backend.
 
DETAILED REQUIREMENTS
The following requirements must be covered in this challenge:
  • The extension will show in DevTools in chrome with the following features:
    • Load: read a fixed scraper script via API and display the source in the editor component on the UI.
      • Extension should show a confirmation dialog if the script has been loaded in the editor like: “Are you sure to load the script? Unsaved changes will be lost.”
      • A loading indicator should be shown while loading the script.
      • Show an alert box when some error (40x or 500) occurred when invoking API.
    • Save: the extension needs to have a simple text area where the users can edit the script (the Script Editor) and save the updated script via API.
      • Extension should show a confirmation dialog like: “Are you sure to save the script?”
      • A loading indicator should be shown while loading the script.
      • Show an alert box when some error (40x or 500) occurred in invoking API.
    • Test: run the script in the backend (via an API call) and show the response from the API. The response will either be JSON data obtained by the scraper, or an error message.
      • Extension should show a confirmation dialog like: “Are you sure to test the script?”
      • A loading indicator should be shown while loading the script.
      • Show an alert box when some error (40x or 500) occurred in invoking API.
    • Settings: the [Settings] button shows a panel where users can change the following parameter.
    • Copy CSS Selector: additional item in the context menu in the browser. It’s supposed that this is used to copy CSS selector for a pointed element to the clipboard.
  • You can refer to this guide on how to build such an extension
  • You can also check this PoC project for reference, it should give you a good start on the implementation
  • Preferably, the extension should try to maintain compatibility with FireFox by using the Web Extensions API.
  • Please register to check the PDF document with architecture diagrams and UI Mockups to better understand the scope of work and some implementation details. The doc also contains details of the publicly hosted API that you can call from the extension. 
 
OPERATING SYSTEMS
  • Chrome Latest (Mac / Linux / Windows)
 
TECHNOLOGY STACK
  • Javascript
  • Chrome Extensions
  • REST


Final Submission Guidelines

  • All original source code.
  • A detailed README in markdown format explaining how to build, configure, run and verify your submission.
  • Specifically, please include details on how to test this extension locally and publish it for others to download. Please clearly describe how to uninstall the extension in dev mode as well.

Payments

Topcoder will compensate members in accordance with our standard payment policies, unless otherwise specified in this challenge. For information on payment policies, setting up your profile to receive payments, and general payment questions, please refer to ‌Payment Policies and Instructions.

ELIGIBLE EVENTS:

2020 Topcoder(R) Open

REVIEW STYLE:

Final Review:

Community Review Board
?

Approval:

User Sign-Off
?

ID: 30117075