A fully-configurable Chromium, Firefox, and Safari extension to load Canvas assignments into a Notion database, at just the click of a button—unlock your full time-management and productivity potential!
- Features
- Screenshots
- Discord Server
- Setup Instructions
- Troubleshooting
- Release Notes
- Building For Local Development
- How It Works
- Contributors
- Privacy Policy
- Licence
- 💄 Simple, user-friendly interface
- 📄 Provided Notion database template
- 🔧 Configurable options, with input validation
- 🗄️
Category
database property for seamless integration into an existing tasks database - 🔍 No duplication of assignments already in the database
- 📝 Updating previously imported assignments with new Canvas changes
- ⚙️ Fine-tuning of database property names & values
- ✏️ Overriding of Canvas course names
- 😀 Emojis for Notion page icons
- 🧑💻 Open source
- 🔒 Private and secure—all data is stored locally. I do not log or save any user data.
To be notified with updates and changelogs, to get in touch, or just to lurk, join the Discord server!
Tip
A setup video is also available to follow-along with!
-
Install the Chromium extension, Firefox add-on, or Safari extension.
-
Duplicate this Notion database template (or create/modify your own!).
-
Click on the options icon to configure the extension.
-
Click
Authorise with Notion
to add the integration to your Notion workspace, and share your relevant database(s).
Important
There is a known issue when trying to sign in to Notion using the Continue with Google
option.
This is an issue with the browser and cannot be fixed by this extension.
If you encounter this issue, please try logging in directly with your email and password.
Note
for Safari
Due to browser API limitations, OAuth2 is not currently supported. As a temporary stop-gap, support for a Notion Internal Integration has been retained.
- Follow steps 1 and 2 on this page to create a new Internal Integration.
- Paste the Notion
Internal Integration Token
into the input field.
- Select the desired target database in the
Database
dropdown.
Note
Databases that have not been directly shared with the integration (ie those which are a child of a shared page) might not immediately appear. Use the Refresh
button until the desired database appears.
- Configure the
Property Names
andProperty Values
if necessary.
Tip
If you have duplicated my database template, you do not need to change the applied defaults.
- Configure the
Timezone
,Course Code Overrides
, andPage Emojis
options if necessary.
Tip
Course Code Overrides
can be found under Advanced Options.
- Open the Canvas page for the course you wish to import.
Important
You should be on a URL that looks something like https://<canvas.auckland.ac.nz>/courses/72763/**/*
.
<canvas.auckland.ac.nz>
should be your own institution's Canvas URL./**/*
means that you can be on the course home page, or any subpage—the important part is/courses/...../
.
-
Click
Copy from Canvas
. -
You should see the course appear in the
Saved Assignments
list.
1. ClickExpand
to view a list of individual saved assignments.
2. ClickClear
to remove the saved assignments from storage. -
Repeat steps 8 and 9 as desired.
-
Once you have finished saving assignments, click the
Export to Notion
button to export to your Notion database.
Warning
This is an unsigned extension that is not installed through the Apple App Store.
This means that you will not receive automatic updates, and you must repeat the below installation steps if you wish to update your extension.
This may change in a future update.
To be notified of new releases, join the Discord server.
-
Download the latest
notion-assignment-import-safari_latest.zip
archive fromreleases/safari
. -
Unzip the
.zip
archive. -
Navigate to the file
Notion Canvas Assignment Import
inNotion Canvas Assignment Import/Content/MacOS
. -
Open up the
terminal
app. Paste in this command:
chmod +x
- Drag and drop the
Notion Canvas Assignment Import
file into your terminal window. You should now have something that looks like this:
chmod +x /Users/YOUR_USERNAME/Downloads/Notion\ Canvas\ Assignment\ Import/Contents/MacOS/Notion\ Canvas\ Assignment\ Import
-
Hit
Enter
. You may now close the terminal. -
Rename the folder
Notion Canvas Assignment Import
toNotion Canvas Assignment Import.app
.This turns the folder into an app.
-
Now drag and drop the app into the applications folder.
-
Open the app.
- If you have successfully opened the app, skip to Step 11.
- If you have issues opening the app with an error message saying the app is unsafe, continue below.
-
Open
System Preferences
and go toSecurity and Privacy
->General
. There should be a prompt about applications from unidentified developers. ClickOpen Anyway
. Clickallow
for any further prompts. -
Reopen the app.
-
Go to
Safari Preferences
->Advanced
and enableShow Develop menu in menu bar
. -
Go to the
Develop menu
in the menu bar, and clickAllow unsigned extensions
. -
Go back to
Safari Preferences
and now go to theExtensions
pane. Enable the extension. -
Done!
Option | Purpose/Remarks |
---|---|
Theme |
Whether to use Light /Dark mode, or use the browser's default (System ) |
Show Advanced Options |
Whether to Show /Hide the Advanced Options |
Timezone |
The TZ timezone in which to parse and set all dates |
Assignments Without Due Dates |
Whether to Copy , or Ignore Canvas assignments without a set due date |
Internal Integration Token (Safari only) |
The Internal Integration Token of your Notion integration |
Database |
The target Notion database |
Page 'Name' Property |
The name of the database Title property, used to set the assignment name |
Category Property |
The name of a database Category property, used to allow grouping of all Canvas assignments together if using a single tasks database |
Course Property |
The name of a database Course property, used to set the assignment course code |
URL Property |
The name of a database URL property, used to set the assignment URL |
Points Property |
The name of a database Points property, used to set the assignment's points |
Unlock Date Property |
The name of a database Reminder property, used to set the assignment unlock date |
Due Date Property |
The name of a database Due property, used to set the assignment due date |
Date Span Property |
The name of a database Date Span property, used to set the date span of the assignment as unlock date –due date |
Canvas Category |
The value of a database Category property to categorise all Canvas assignments as |
Past Assignments |
Whether to Import , or Ignore assignments due in the past |
Name Changes |
Whether to Import (ie update the existing page) or Ignore Canvas changes to previously imported assignment names |
Points Changes |
Whether to Import (ie update the existing page) or Ignore Canvas changes to previously imported assignment points |
Unlock Date Changes |
Whether to Import (ie update the existing page) or Ignore Canvas changes to previously imported assignment unlock dates |
Due Date Changes |
Whether to Import (ie update the existing page) or Ignore Canvas changes to previously imported assignment due dates |
Date Span Changes |
Whether to Import (ie update the existing page) or Ignore Canvas changes to previously imported assignment date spans |
Page Emojis |
Any Notion page emojis to apply |
Option | Purpose/Remarks |
---|---|
Display 'Copy JSON' Button |
Whether to Show /Hide the Copy JSON button in the extension popup |
Course Code Overrides |
Any course code overrides to apply |
Good question—this was ultimately a design decision I made for maximum flexibility.
Property | Purpose |
---|---|
Unlock Date |
Used for the date that an assignment unlocks/becomes available. |
Due Date |
Used for the date that an assignment is due. |
Date Span |
Used for the date span Unlock –Due . |
This enables many possible use-cases, such as:
- Timelines to be created by
Date Span
; - Calendars to be set to:
Date Span
, orDue Date
only.
- Reminders to be set independent to the due date;
- Manipulation of the start/end dates on a timeline independent to the unlock/due date; and
- Sorting assignments by due date, rather than only being able to sort by unlock date.
Notion doesn't let you sort
Date
(span) properties by their end date—only their start date.
Of course, you are welcome to configure any of these property names to be ❌ Exclude
—these properties are ignored on import.
Example: The course title in the page breadcrumb on Canvas is Course Title
, but you want it to be saved in your database as COURSE 121
.
Configure Course Code Overrides
to the following:
Canvas Course Code | Notion Course Code |
---|---|
Course Title |
COURSE 121 |
Example: You want all COURSE 121
pages to have the 👨💻 emoji, and all COURSE 101
pages to have the 👀 emoji.
Configure Page Emojis
to the following:
Canvas Course Code | Notion Course Code |
---|---|
COURSE 121 |
👨💻 |
COURSE 101 |
✨ |
If your assignments are being imported into Notion in the wrong timezone, please first ensure that you have configured the Timezone
option correctly.
Important
After configuring a Timezone
, you must then Clear
and re-copy your Saved Assignments
in the extension popup.
Timezone offsets are applied when assignments are initially copied from Canvas, and not when assignments are exported to Notion.
Note
To prevent erroneous clears, the extension will automatically restore cleared assignments if the extension popup is closed before the Cleared!
success status is displayed.
Tip
For a full changelog of notable changes, see CHANGELOG.md
.
Also see Releases.
Caution
If you are an existing user, you may be affected by these breaking changes following an update.
- Support has been added to update existing pages with changed assignment details (eg name, due date, points, etc.). This requires an additional integration capability, so existing users must reauthorise with Notion.
- Support for a configurable Notion
'Status'
property has been removed, as Notion has implemented their own built-inStatus
property. To fix assignments being imported without a'Status'
value, change your database property to be of typeStatus
, and assign aDEFAULT
value.
- Assignments already imported to Notion can now be updated when details are changed on Canvas. See (#385).
- Past assignments can now be imported to Notion (#386).
- Assignments without due dates are now correctly imported (#251).
- Timezone validation now works as expected (#252).
⌘
+s
can now be used to save changes on the Options page on macOS.
- Existing users must reauthorise with Notion, as a new
Update Content
permission is required.
- Notion pages now include the assignment's Canvas description (#59).
- Added support for a new 'Points'
number
database property (#61) to tag the assignment's points value. - Changed the colour of Advanced Options headings to ease identification.
- Renamed
Available Date
toUnlock Date
.
- To leverage the new support for a
Points
property, you must create a new Notionnumber
database property, and configure it on the Options Page.
This project uses gulp
and esbuild
under the bonnet to bundle the compiled JavaScript files to be browser-ready.
-
Fork/clone this repository.
-
Run
npm ci --include=dev
to install the required dependencies. -
Run the appropriate build script:
npm run watch
to build in watch mode.npm run debug
to build source-mapped, non-minifieddist
files that are easier to debug.npm run build
for minifieddist
files.
-
A
dist/
directory will be created containing a separate extension root folder for each supported vendor.
-
The
fetch.ts
content script is injected into the active Canvas tab. -
window.location
is used to extract the institution's Canvasorigin
, as well as the specificpathname
of the active tab. -
The
pathname
is matched against a regular expression to extract the Canvas:course_id
, such as72763
. -
A same-host
fetch()
request is made from the active Canvas tab to the following Canvas REST API endpoints, with the logged-in user's cookies:GET /api/v1/courses/:id
, to get the course code.GET /api/v1/courses/:course_id/assignment_groups
, to get a list of assignments.
-
Relevant information is extracted from each
Assignment
object, and the following configurations applied:Course Code Overrides
, andPage Emojis
.
Note
Assignments without an unlock_at
date (ie are already unlocked) are set to be unlocked from the top of the next hour, relative to the current time.
- Fetched assignments are saved by course in browser local storage (see
IFetchedAssignment
andSavedAssignment
infetch.ts
).
-
The OAuth2 token is used to authorise with the Notion API.
-
The saved assignment data is retrieved from local storage.
-
The configured
Database
is queried to avoid import of duplicate assignments (by matching assignment URLs). -
The configured
Database Properties
are used to create a new database page for each assignment with the Notion API.
- Thank you to @PolarWolf314 for doing the conversion work to add Safari support!
- Thank you to @MatthewLamperski for #89!
- Thank you to @brandon-mason for #424!
In a nutshell, I store only what data is absolutely necessary. This data is stored locally, and is never transmitted back to me.
Refer to the Privacy Policy for my full privacy policy.
notion-assignment-import
is licensed under MIT modified with a Commons Clause.
Basically, don't try to re-badge and monetise this extension.
This extension began as a free, open-source hobby project to help University students save time—no adverts, no data mining, no other asterisks.
I am firm on it remaining as such.