Merge pull request #6 from AdoryVo/chrome-extension/main

.eslintrc.json

@@ -1,29 +1,11 @@
 {
  "root": true,
- "extends": [
- "eslint:recommended"
- ],
  "env": {
  "browser": true,
  "es6": true
  },
- "rules": {
- "indent": ["error", 2],
- "comma-dangle": ["error", {
- "arrays": "always-multiline",
- "objects": "always-multiline"
- }],
- "comma-spacing": "error",
- "no-trailing-spaces": "error",
- "object-curly-newline": ["error", {
- "multiline": true,
- "minProperties": 4
- }],
- "object-curly-spacing": ["error", "always"],
- "object-property-newline": ["error", { 
- "allowAllPropertiesOnSameLine": true
- }],
- "semi": ["error", "never"],
- "quotes": ["error", "single", { "avoidEscape": true, "allowTemplateLiterals": true }]
+ "extends": ["eslint:recommended"],
+ "parserOptions": {
+ "sourceType": "module"
  }
 }

.github/workflows/minify.yml

@@ -12,8 +12,13 @@ jobs:
 
  - name: Auto Minify
  uses: nizarmah/auto-minify@v2.1
+ with:
+ maxdepth: 0 # Only minify the root directory (where calendarize.js is)
+
+ - name: Copy script to extension
+ run: cp calendarize.min.js chrome-extension/calendarize.min.js
 
  - name: Committing minified files
  uses: stefanzweifel/git-auto-commit-action@v4
  with:
- commit_message: "GitHub Action: Minify & add calendarize.min.js"
+ commit_message: 'GitHub Action: Minify & add calendarize.min.js'

.github/workflows/zip.yml

@@ -0,0 +1,22 @@
+name: Zip Chrome Extension
+run-name: Zip chrome-extension for publishing and manual loading 📁
+on:
+ workflow_run:
+ workflows: ['Minify Calendarize Script']
+ types: [completed]
+ push:
+ paths:
+ - 'chrome-extension/**'
+jobs:
+ Zip-Chrome-Extension:
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v3
+
+ - name: Zip Chrome Extension
+ run: (cd chrome-extension && zip -FSr ../calendarize-webreg-chrome.zip *)
+
+ - name: Committing zip file
+ uses: stefanzweifel/git-auto-commit-action@v4
+ with:
+ commit_message: 'GitHub Action: Zip & add calendarize-webreg-chrome.zip'

.gitignore

@@ -1 +1,2 @@
-*.html
+# Dependencies
+node_modules/

.prettierignore

@@ -0,0 +1 @@
+**/*calendarize.min.js

.vscode/extensions.json

@@ -0,0 +1,9 @@
+{
+ // See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
+ // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+
+ // List of extensions which should be recommended for users of this workspace.
+ "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"],
+ // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
+ "unwantedRecommendations": []
+}

.vscode/settings.json

@@ -0,0 +1,13 @@
+{
+ "editor.detectIndentation": false,
+ "editor.insertSpaces": true,
+ "editor.tabSize": 2,
+ "editor.defaultFormatter": "esbenp.prettier-vscode",
+ "editor.formatOnSave": true,
+ "[javascript]": {
+ "editor.defaultFormatter": "esbenp.prettier-vscode"
+ },
+ "[json]": {
+ "editor.defaultFormatter": "esbenp.prettier-vscode"
+ }
+}

README.md

@@ -1,53 +1,81 @@
-A tool for easily exporting your WebReg schedule to your calendars (pictured below).
+**Export your WebReg schedule to your calendars in one click!**
+
+![Calendarized schedule screenshot](assets/screenshot-cropped-v1.png)
+
+Highlights:
+
 - Adds your classes as recurring events
 - Adds your finals as one time events
 - Importable into calendar apps like Google Calendar, Outlook, etc.
 - Tested on UCSD WebReg schedules
 - Usage instructions below!
 
-![Command line screenshot](assets/screenshot-cropped-v1.png)
+## 📋 Usage
+
+### Bookmarklet
 
-## 📋 Instructions (for desktop)
-1. Copy the entire code blurb below & add it as a new bookmark: `Ctrl+D` or `⌘+D`, click "More...", then paste the blurb in as the URL
-> ```javascript:(function(){const calendarize=document.createElement('script');calendarize.src='https://adoryvo.github.io/calendarize-webreg/calendarize.min.js';document.body.appendChild(calendarize);})()```
+1. Copy the entire code blurb below & add it as a new bookmark: `Ctrl+D` or `⌘+D`, click "More...", then paste the blurb in as the URL:
+ > `javascript:(function(){const calendarize=document.createElement('script');calendarize.src='https://adoryvo.github.io/calendarize-webreg/calendarize.min.js';document.body.appendChild(calendarize);})()`
 2. Visit your WebReg page & click the bookmark to download your schedule as a calendar file (.ics) 
- (`Ctrl/⌘+Shift+B` to toggle bookmarks bar)
-3. Import the calendar file into your Google Calendar [here](https://calendar.google.com/calendar/u/0/r/settings/export)
-4. Double check that the calendar events created match the times on WebReg!
- - If there are any inconsistencies or errors, fill out the feedback form in the **See Also** section below. I will try to address them ASAP!
+ (`Ctrl/⌘+Shift+B` to toggle bookmarks bar)
+3. Import the calendar file into your Google Calendar [here](https://calendar.google.com/calendar/u/0/r/settings/export). _Make sure to check your intended Google Account in the top right!_
+4. Double-check that the calendar events created match the times on WebReg!
+ - If there are any inconsistencies or errors, fill out the [feedback form](https://forms.gle/nv2LUzE4SQ3fQVmX7). I will try to address them ASAP!
+
+### Extension: Chrome, Edge, Brave (or other Chromium-based browsers)
+
+1. Download the extension from the Chrome Web Store [here](https://chrome.google.com/webstore/detail/jloojoppodnaciefbgkokahoglmgpelf?hl=en&authuser=0)
+
+- If your browser does not support the Chrome Web Store, follow these instructions to download the extension:
+ 1. Download `calendarize-webreg-chrome.zip` from the [latest release](https://github.com/AdoryVo/calendarize-webreg/releases)
+ 2. Extract (AKA unzip) the downloaded zip folder (via right click > `Extract All...`)
+ 3. Delete the `.zip` version and move your unzipped folder into a permanent, safe place
+ 4. In your browser, click the extensions icon (should look like a puzzle piece 🧩) and click `Manage extensions`
+ 5. Toggle `Developer Mode` on
+ 6. Click `Load Unpacked` and choose your unzipped folder from earlier
+ > ⭐️ Make sure you keep the extension folder in a permanent, safe place (don't delete or move the folder after loading it)
+
+1. Head to your WebReg page and click on the extension (you may have to dropdown the extensions menu 🧩). Voilà, your schedule is downloaded! 🎉
+2. Import the calendar file into your Google Calendar [here](https://calendar.google.com/calendar/u/0/r/settings/export). _Make sure to check your intended Google Account in the top right!_
+3. Double-check that the calendar events created match the times on WebReg!
+ - If there are any inconsistencies or errors, fill out the [feedback form](https://forms.gle/nv2LUzE4SQ3fQVmX7). I will try to address them ASAP!
 
 ## 🤔 How does it work?
-Essentially, when you click the bookmark, your browser runs a script (AKA a program) that I wrote 
-which simply takes the text in your WebReg table and organizes your schedule information into the format
-needed to create a .ics calendar file. 
 
-This form of bookmark tool is called a 
-[bookmarklet](https://en.wikipedia.org/wiki/Bookmarklet), an obscure technology that I found
-fitting for this project as it allows for the tool to be used across all browsers. 
+When you click the bookmark or extension, your browser runs a script (AKA a program) that takes the text in your WebReg table, organizes it into your schedule information, and creates a `.ics` calendar file.
+
+This type of script is called a [bookmarklet](https://en.wikipedia.org/wiki/Bookmarklet), an obscure technology that I found fitting to add accessibility for most browsers.
 You may take a look at some other cool bookmarklets [here](https://caiorss.github.io/bookmarklets).
 
-If you had any concerns about privacy, the program abstains from persistently storing any of the information 
-read in (you may verify this with the source code linked at the bottom of this site!).
+> ⭐️ Update: To further improve accessibility for browsers not supporting bookmarklets, we are introducing a browser extension option.
 
 ```js
 // This code will be executed upon clicking the bookmark
-javascript:(function() {
- // Fetch the script used to scrape & parse schedule information from the web page 
- const calendarize = document.createElement('script');
- calendarize.src = 'https://adoryvo.github.io/calendarize-webreg/calendarize.min.js';
+javascript: (function () {
+ // Fetch the script used to scrape & parse schedule information from the web page
+ const calendarize = document.createElement('script')
+ calendarize.src =
+ 'https://adoryvo.github.io/calendarize-webreg/calendarize.min.js'
 
- // Add the script to the current page, causing it to run!
- document.body.appendChild(calendarize);
+ // Add the script to the current page, causing it to run!
+ document.body.appendChild(calendarize)
 })()
 ```
+
 > The bookmark code blurb, formatted
 
+## 🔒 Privacy
+
+If you have any concerns about privacy, the program does not collect or store any of your information (you may verify this with the [source code](https://github.com/AdoryVo/calendarize-webreg/blob/main/calendarize.js)).
+
 ## ⭐ See also
+
 - UCSD Rocket Dev Team's web-based [WebReg Export App](https://www.webreg-export.com/), which uses OCR image scanning to parse your WebReg schedule
 - OTApps' [Chrome Extension tool](https://chrome.google.com/webstore/detail/ucsd-schedule-to-calendar/haafakimhdpglinagaadlgebflifeiho?hl=en-US)
 - Isaiah Dailey's command line tool, [Schtoics](https://github.com/isaiahtx/Schtoics)
 - [Feedback & Bug Report Form](https://forms.gle/nv2LUzE4SQ3fQVmX7)
 
 ---
-*[Source code](https://github.com/AdoryVo/calendarize-webreg) | Uses [ics.js](https://github.com/nwcell/ics.js/) for .ics generation* 
-*Created by [Adory Vo](https://github.com/AdoryVo)*
+
+_[Source code](https://github.com/AdoryVo/calendarize-webreg) | Uses [ics.js](https://github.com/nwcell/ics.js/) for .ics generation_ 
+_Created by [Adory Vo](https://github.com/AdoryVo) with contributions from [Rebecca Chen](https://github.com/chenyenru)_