Skip to content

How it works

Ethan Huang edited this page Sep 28, 2023 · 9 revisions

Overview

  1. Service worker executes upon installation or update. It starts listening for messages that were sent by the chrome.runtime API, likely from the content script. We are using chrome.identity.getAuthToken to get OAuth2.0 tokens for authorization to the user inboxes.
  2. Offscreen documents are created solely for accessing the DOMParser API to query the HTML contents of emails for unsubscribe hyperlinks.
  3. When the user navigates to their gmail inbox page, the content script will load the inboxsdk npm module for injecting elements into the UI. This creates a new route on the left-hand nav menu for viewing email subscriptions. It's also what allows us to display status messages in the bottom left bar, or display a modal widget for alerts.
  4. On the Subscriptions route, users can do things such as click the buttons to Sync Now or Reset and Trash X threads in the table, which will send a message that gets picked up by the service worker. The worker starts sending API requests to the Gmail API to do said things, and based on whether it is processing, successful, or errored, it would send more messages to the content script.
    1. Token authorization and retrying requests according to query rate limits or request timeouts are purely handled through axios interceptors.
  5. Other operations like selecting the checkbox and button or trash icon to delete the subscriptions in the table, clicking the sender address to auto-search for all addresses, is purely handled by the content script.

How do I run, test, and develop it?

  1. Go to chrome://extensions/ and load the unpacked extension, using the /dist folder
  2. npm start
  3. If not done already, click Inspect views service worker (Inactive), which opens the console for debugging the service worker.
    1. Can view storage by entering chrome.storage.local.get(console.log)

Repeatedly:

  1. Edit code, save changes, let webpack re-bundle and output to dist
    1. If editing webpack configuration, stop and redo npm start.
  2. Click Update on chrome://extensions/, optional to clear error logs
  3. Navigate to the Gmail inbox page and/or refresh the page, because the chrome context would be invalidated
  4. Be on the subscription route and do whatever, test things. Look at the dev console here as well, for debugging content script

Optional: (As of v0.1.0)

  • Go to chrome://identity-internals to revoke all identity access tokens.
  • Delete and reload the extension to reset the account selection process (prompt-select).
  • Create, resolve, re-prioritize issue as you go in the project backlog.
  • Write and update notes as you go in the versioned dev diaries.

Relevant links, documentation, etc.

Clone this wiki locally