Challenge Overview
Our client has a lot of engineering documents, datasheets, images, web-pages, etc, on the equipment used in their industry. To get information on any of the equipment, stakeholders have to manually open an IIoT platform & manually search by entering required details of an equipment.
To simplify this process, we will be developing a web browser extension that would analyse the web-page data based on the stored dictionary of regular expressions and keywords - after this it should be able to highlight the matching text, links & keywords. On selecting any highlighted keywords a context menu should appear. Clicking/selecting an option from the context menu should open a new browser tab & display the information about the highlighted keyword.
To get the keyword information the extension should make a REST API call. The NodeJS mock API will serve as the datasource.
In this Challenge, we will be creating a browser extension.The search matching feature of the extension should have the ability to read number-letter combinations whilst ignoring any symbols within the keyword and/or expression.
Technology Stack
-
JavaScript
-
HTML & CSS/SCSS
-
NodeJS
-
REST
General requirements
Code formatting
-
Make sure code is well documented, all classes, methods, variables, parameters, return values must be documented in every single code file, and appropriate inline comments should be provided too where the code is not straightforward to understand.
-
Please use clean INDENTATION for all the code so future developers can follow the code.
-
Use appropriate linter to validate your code.
JavaScript Specific
-
Code written in JavaScript should pass the EsLint Validation.
What’s allowed:
-
JQuery
-
Lodash
-
MIT license libraries.
What’s NOT allowed.
-
JavaScript frameworks like: React, Angular, Vue etc
-
3rd party CSS libs like Bootstrap.
-
Non-MIT license code or libraries.
HTML Specific
-
HTML should be valid HTML5 compliant.
-
All HTML code naming should not have any conflicts or errors.
-
Element and Attribute names should be in lowercase and use a '-' or camel naming to separate multiple-word classes (i.e.. 'main-content', or 'mainContent)
-
Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
-
No inline CSS styles- all styles must be placed in an external stylesheet.
Layout
We don’t have a storyboard/design for the extension. You can use your best judgement for the layout. Please refer to the wireframe images listed in the specifications below to get an idea on what elements should be added.
Platform
An extension should be created for each of these browsers: Chrome.
References:
Business Requirements
1. Create Regular Expressions
Create a list of regular expressions that should match the following pattern:
S7-2-1051/3, Space Beam-2(2), BR.1.2.555, BEAM STAIR-2(2), COLUMN STAIR-2(2), BEAM HANDRAIL 2(2), COLUMN HANDRAIL 2(2), BR1-2-B-560/2, S7-2-1050-500-2, BR1-2-A-300/2, BR1-2-E-500/2, SB4-A-2-250(2).
Update the ...data/db.json file in the given Mock-API by removing all existing regEx & adding new regular expressions (RegEx) that meet the above criteria please also add some sample keywords.
The browser extension should have the following abilities:
-
Highlighting matching text, links & keywords.
-
Extension Dictionary update.
-
Context menu
-
Opening new browser tab with equipment information
-
Adding new keywords to the extension dictionary
2. Highlighting matching text, links & keywords
On opening a web-page the extension should make an API request (GET .../GetDictionary), this response returns the dictionary saved in the mock API server.
Save the dictionary in local-storage & based on the dictionary saved in the localstorage analyze the content of the web-page. After processing the content the matching text, links or keywords should be highlighted. You can use your best judgement to style the highlighted text/link.
The dictionary has two types of expressions: regEx & keywords. Regular expression is for pattern matching & the keywords are for exact match.
By default the extension should be active on all the web-pages. In this challenge please use these webpages for a reference:
2. Extension Dictionary update
The dictionary in this plugin should be a collection of regular expressions & keywords used for highlighting keywords, links or text on a web page.
The extension should be able to update it’s dictionary of regular expressions & keywords by making a REST API call ( GET .../GetDictionary ). Upon getting the data the dictionary should be saved in localstorage of the browser.
To update the dictionary, a user can go to the options window of the extension & click the “Update Dictionary” button. Upon clicking this button REST API call to pre-configured endpoint (GET .../GetDictionary) should be made & the dictionary should be updated.
On clicking the “Add a new keyword” a popup should appear allowing the user to add a new keyword. Refer the section below “5. Adding new keywords to the extension dictionary” for detailed info.
3. Context menu
When a user clicks any highlighted keyword a context menu should appear. This context should have these options:
-
“View Equipment Details”
-
“Add new keyword” &
-
“Not a keyword”
The context menu should disappear when the user clicks somewhere else on the page. For an example you can refer to the highlighting feature of this extension https://chrome.google.com/webstore/detail/1-web-pdf-highlighter-lin/bmhcbmnbenmcecpmpepghooflbehcack
Note that in our plugin highlighting should be done automatically.
4. Opening new browser tab with equipment information
On the context menu if the user clicks “View Equipment Details” then a new tab appears that lists the equipment details. To get the equipment details an API request should be sent to the end point (GET .../EquipmentDetails/<highlighted_keyword>). Here highlighted_keyword should be dynamic, it’s value should be the clicked highlighted_keyword text.
The new tab layout should be similar to the image below:
5. Adding new keywords to the extension dictionary
When a user clicks “Add new keyword” then a popup should appear. The popup should have a text field to add keyword(s) & a button to send add keyword.
On clicking the “Submit” button a (POST .../AddKeyword) request should be sent to the Mock API. The body of the request should contain the keyword.
{
“keyword”: <Value of the enter keyword field>
}
On Success, the response of this request sends the new dictionary & on receiving the response the dictionary save in localstorage should be updated.
If the “Enter keyword” textbox is empty the “Add Keyword” buttons should remain disabled. It’s enabled when some text is entered in the “Enter keyword” textbox.
On clicking the “X” button, the modal should close.
6. Rejecting a keyword
It may be possible that the plugin highlights a keyword that’s not to be highlighted. So on clicking the “Not a keyword” option from the context menu, a confirmation popup should appear asking users for confirmation “Are you sure you want to reject this keyword?” with options “Yes & No”.
Clicking “Yes” should send a POST request (POST .../RejectKeyword) with body
{
“keyword”: <Value of the clicked keyword>
“type”: “keyword”
}
Show success confirmation message once the request is sent.
Clicking “No” should dismiss the popup.
Final Submission Guidelines
Submit a zip container containing:- Source code
- Mock API
- Readme/Instructions to run the code.