UBC LaTeX Transcript Chrome Extension

Add to Chrome here.

Description

Transform your UBC Grades Summary into a LaTeX transcript using this Chrome extension!

Currently, the unofficial transcript at UBC is a poorly formatted printout of the student Grades Summary page. While other solutions exist for improving the appearance of the Grades Summary page, this extension provides a transcript that looks professional and resembles the official version.

The resulting transcript is loaded into Overleaf, a popular online LaTeX editor, using the Overleaf API. From there, it can be downloaded as a PDF or customized further by editing elements such as the table column names and line/table spacing.

How to use this extension

1. Sign up for a free Overleaf account if you don't have one already.
2. Navigate to Your Grades Summary in the Student Service Centre.
3. Click on the extension and adjust any options (e.g., title, layout, filter W & Cr/D/F courses).
4. Click on Generate Transcript.
5. Click on View Transcript in Overleaf to load your transcript into Overleaf.

How it works

1. A LaTeX transcript is generated using the information from the 'Your Grades Summary' page.
   • Most course titles are found in ./public/data, which was created from ubc-pair-grade-data. Otherwise, the UBCGrades API is used.
2. When the View Transcript in Overleaf button is clicked, an HTML form POST request containing your Base64-encoded transcript is sent to the Overleaf API:

   <form action="https://www.overleaf.com/docs" method="POST" target="_blank">
      <input type="hidden" name="snip_uri[]" value="data:application/x-tex;base64,[your_base64_encoded_transcript]">      
      <input type="hidden" name="snip_uri[]" value="[url_to_ubc_logo_png]">
      <input type="hidden" name="snip_name" value="transcript.tex">
      <input type="hidden" name="snip_name" value="ubc-logo.png">
      <button type="submit">View Transcript in Overleaf</button>
   </form>

How to run locally

1. Clone the repo
2. Run npm install
3. Run npm run start for development mode or npm run build for production build
4. Go to chrome://extensions/ and click on Load unpacked
   • make sure Developer mode is switched on
5. Load the dist folder

Images

Extension popup

Transcript generated with Group courses by session selected