jtsec92 / webextension

Nspect - Web Extension

This project houses a web extension for Nspect. Nspect is a system designed to provide consumers with better supply chain information so that they can make more informed purchasing decisions. To run the extension:

Development Environment Setup

1. git clone [email protected]:jtsec92/webextension.git
2. npm install
   1. else if on Windows:npm install --save @angular/material @angular/cdk @angular/animations
3. ng add @angular/material
4. npm run start
5. Proceed to Google Chrome Setup

NOTE: changes to the content page and service worker scripts requires you to reload the extension in chrome://extensions

Build/Package for Production

1. update version number inside ./angular/src/manifest.json
2. run npm run build:production
3. upload extension-build.zip to the chrome webstore

Google Chrome Setup

1. Navigate to chrome://extensions/
2. Enable "Developer mode"
3. Click "Load unpacked"
4. Set the path to webextension/angular/dist and make sure the dist folder is highlighted
5. Click "Select Folder" or "OK"

When making changes just use hotkey CTRL-R on the chrome://extensions/ page to reload the page. Chrome will reload the extension.

Testing

The current testing framework utilizes the Java Robot Framework due to the project's need for automated testing that supports native OS inputs (keyboard press and mouse clicks).

Java Selenium Setup

1. Install JDK from the website or IntelliJ
2. Either click the Maven update icon that shows up in IntelliJ or go to to Build, Execution, Deployment | Build Tools | Maven | Repositories and select Repositories on the left and click Update.
3. Right click the tests/src and click Run 'All tests' to add a run configuration to IntelliJ that will run all of the tests.

Note: On Mac, go to System Preferences->Security & Privacy->Privacy->Accessibility and then make sure the check mark next to IntelliJ or the IDE of your choice is checked so that Java has the correct permissions otherwise the Robot class will not run.

Google Chrome

If on Mac, Linux, or Git Bash copy the ChromeDriver binary to /usr/local/bin and run the command xattr -d com.apple.quarantine chromedriver in the /usr/local/bin directory to give the chromedriver binary the correct permissions. Test this by running chromedriver in the terminal.

Key Generation

To generate a private key with OpenSSL on Linux/Mac follow these SO steps:

# 1. Create private key called key.pem
2>/dev/null openssl genrsa 2048 | openssl pkcs8 -topk8 -nocrypt -out key.pem

# 2. Generate string to be used as "key" in manifest.json (outputs to stdout)
2>/dev/null openssl rsa -in key.pem -pubout -outform DER | openssl base64 -A

# 3. Calculate extension ID (outputs to stdout)
2>/dev/null openssl rsa -in key.pem -pubout -outform DER |  shasum -a 256 | head -c32 | tr 0-9a-f a-p

and set the key value in manifest.json to the value obtained from step 2. The value from step 3 is the extension ID used for testing.

Useful References

These links are useful for understanding the code base. The core architecture of a Chrome Extension is made up of a contentScript.js page, a popover, and a service worker script. The code base here makes use of Angular which relies on Typescript thus knowledge of Typescript is required. jQuery mixed into Typescript is the current tool of choice to extract elements from the DOM.

1. Callbacks, Promises, and Async/Await - https://javascript.info
2. jQuery DOM Manipulation - TBD
3. Chrome Extension Concepts (ContentScript, Popover, Service Worker) - 1 and 2
4. UI Library - Angular Material, Bootstrap 4, and ng-bootstrap

webextension's Issues

Nspect Popover Settings Tab Auto Detect Functionality

The Nspect Popover settings tab should have a radio button that allows users to configure the Nspect extension to auto-detect their home country. Selecting this radio button will cause the Nspect extension to notify you for all countries outside of your home country and show you a list of products for your auto-detected home country. This should support VPN - i.e. if a user is VPNed into Germany then it Nspect should assume that they are in/from Germany.

Useful Links/References:
Geolocation API - Allows the extension to use the geolocation API without prompting the user for permission.

Nspect Popover Settings Tab Manual Functionality

In the settings tab of the Nspect extension popover there should be a radio button that allows the user to manually select their "preferred countries". The preferred countries input field should be either a multi-select or combo box that allows the user to select one or more countries.

When navigating to a product page, if the extracted country of origin from the product page is on the list of "preferred countries" then the Nspect extension should notify you and provide you a set of alternative products also from the "preferred countries" list.

Automated Browser Tests

To test whether or not the extension is correctly scraping information from the product page of a website, developers need to spend time loading the extension into the browser and manually testing individual product pages. To save time we should implement selenium based browser tests that run every time a change is made to the code repository so that developers don't need to manually test every single product page that previously worked but that might not work after 1) the product page HTML has changed or 2) the code base has changed.

This will save a lot of programmer time and make the project more scalable.

Nspect Icon Product Numbers

When using an extension like AdBlocker Ultimate, the user can look at the icon on the top-right hand side of their screen to see the number of ads blocked. When using an extension like Bitwarden a user can look at the icon on the top-right hand side of their screen to see the number of passwords associated with a website.

For Nspect, the extension should tell users the number of alternative products found.

Amazon Web Scraping Functionality

When navigating to an Amazon product page e.g. Vont Bike Light the Nspect extension should extract the country of origin and pass the extracted value to the Nspect extension for analysis.

Nspect service worker script

To enable rich functionality the service worker should be utilized to when either the content script needs to pass information to a popup that hasn't loaded or the popup needs to retrieve DOM information from the content script when the DOM hasn't finished loading.

Nspect ContentScript and Popover Async Behavior

When loading a product page there is a possibility that the user might open the extension before the DOM has finished loading. This results in a scenario where the user does not see the country of origin data that he or she is looking for until she closes the extension and opens it again.

1. In the event the user opens the extension before the DOM has finished loading there should be some sort of spinner or progress bar that displays until the data is ready.

Notes
May not need service worker

Javascript Code Obfuscation

Before deploying the project to production the code should be obfuscated. This will make it more difficult to reverse engineer the code.

Configuration Setting to Filter out Products from Major Retailers

Add a configuration setting in the web extension to filter out alternative products from big retailers (Amazon, Walmart, Wayfair, Target, etc.) and if the user only wants to buy from smaller businesses.

Nspect Popover Configuration Settings Saving

After a user has set their preferred configuration settings, the popover should save those settings in the browser's local storage.

Nspect Popover Icon Text

In the Nspect Popover there is a home icon and a settings icon. The home icon should have the word home below the icon itself and the settings icon should have the word settings below the cogs icon.

Firefox Web Browser Shim

The current Nspect web extension only supports the Chrome Web Browser, to support the Firefox web browser a shim needs to be developed so that the code can support Firefox as well.