StevensSEC/stevens-web-extension

A portable, centralized hub for collecting, analyzing, and presenting data for Stevens students.

Stevens Web Extension

A portable, centralized hub for collecting, analyzing, and presenting data for Stevens students.

Features

• Simple installation using your browser (Chrome, Firefox, etc.)
• Schedule tasks to complete automatically
• Use as a simple digital data store

Contributing

Downloads

• Visual Studio Code (VSCode): code editor, supports everything needed for this project including Git integration, TypeScript support, and more (if you already have a code editor, consider trying VSCode for this project)
• Git: CLI (command line interface) that allows you to work with other developers through repositories
• Yarn: package installer for JavaScript modules (parallelized npm)

Chrome Extensions

• Getting Started
• Chrome Extension API
• Chrome Developer Guide
• Example: Refined Github
• Example: uBlock Origin
• Example: Extension Boiletplate

Project Languages & Configuration

• TypeScript
• HTML
• Code Formatting & Linting

Using Github

• Git Model: read this article to understand how working on features affects the repository and its contributors
• Git Terminology
  • Commit: a change to the codebase described by a message
  • Branch: a collection of files that your project uses to operate (master is the default branch with the latest changes)
  • Pull request (PR): a series of commits to be merged into a branch

API / Miscellaneous

• Canvas API

Project Setup

• Install EditorConfig and Prettier, recommended extensions for VSCode
  • These extensions automatically format the code according to project specifications as you type
• If you have not already, clone (make a copy on your computer) the repository: git clone https://github.com/StevensSEC/stevens-web-extension.git
• Run yarn install to download all packages for the project
  • Use yarn run to see available commands for the project
  • You will likely be using yarn dev to run the project locally (WIP)

Running the Extension

1. Build the project using yarn build
2. Navigate to chrome://extensions in your browser
3. Ensure that Developer mode is enabled in the top right corner
4. Click Load unpacked in the top left, and select the generated /dist folder
5. Repeat to test any changes (this will be easier in the future!)

Steps to Making Changes

1. Get the latest code from the master branch: git pull master
2. Create a new branch: git checkout -b <feature_name> master (-b creates the branch, checkout switches to it)
   • Make sure you are on the master branch, and do not forget to pull from the remote (web) repository
3. Make any change(s): git add -A (alternatively, git add <filename>) followed by git commit -m <message> (the message should be one sentence describing your changes)
   • Try to do this step every time you make a change that has an impact on the project
4. Make a pull request to be reviewed: git push origin <feature_name>
   • Be sure to open the pull request using the link that shows up (https://github.com/.../pull/new/<feature_name>)
   • This will show up on the repository here
5. Allow for someone to review your code, and then the change will be merged! Congratulations!

Contact

Slack Workspace Link