72h Web Scraper Dev Tools Chrome Extension

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.
    • API base URL - e.g: https://scraper-stub-api.herokuapp.com/scrapers/
  • 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.