search

jtsec92 / webextension

0 stars 0 forks source link

readme

alt text 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 git@github.com: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