The main "trick" is to use a website's responsive style to hide non-essential page elements for us (by parsing & applying these rules in the CSSOM). For other annoyances there are global and site-specific blocklists based on CSS class naming.
To standardize margins, background colors, and font-sizes, the extension also applies custom CSS to text elements it finds in the DOM (with logic to detect what's the main article text). The dark mode feature uses a combination of DOM and CSSOM iterations to darken colors, change the background, or enable a website's native dark mode styles if present.
To tie these (and many more) page modifications together, they each hook into 8 lifecycle phases coordinated from transitions.ts. The major concern here is performance -- minimizing reflows while performing changes stepwise so that they look nice when animated.
Beyond this core functionality there are embedded React iframes to power the social highlights & private notes features and the extension settings page, Svelte components for the UI controls including the page outline, and background event handling code to inject scripts into visited pages and handle events.
For documentation on individual features see the docs pages.
The main way you can help is to report bugs, broken articles pages, UI inconsistencies, or ideas on how to improve the extension by creating an issue.
If you want something to be fixed faster (like a CSS bug), it may help to do it yourself. Please let me know if the docs pages and inline comments are not sufficient. Thank you in advance!
To build the extension yourself, run:
yarn install && yarn buildyarn package- Find the bundled extension code in
/web-ext-artifacts._manifest-v2is for Firefox,_manifest-v3for Chromium browsers.
I run this using node v16.14.0 on Mac, then upload the bundled code to the Chrome and Mozilla extension stores manually. The bundling uses Rollup to create a somewhat readable output -- so feel free to check the released code in your browser's profile folder if you installed the extension.
For hot reloading during development, run yarn watch and yarn web-ext run in parallel.