A decentralized and federated way of annotating the web based on Matrix.
  • TypeScript 82.7%
  • SCSS 11.9%
  • HTML 3.5%
  • JavaScript 1.9%
Find a file
2023-04-22 20:20:28 -07:00
pictures Revert "Add demo video" 2021-12-17 00:58:28 -08:00
public Use Manifest v3 and build for both chrome and firefox 2023-04-16 20:12:12 -07:00
public-chrome Use Manifest v3 and build for both chrome and firefox 2023-04-16 20:12:12 -07:00
public-firefox Use Manifest v3 and build for both chrome and firefox 2023-04-16 20:12:12 -07:00
src Fix receiving thread relations 2023-04-22 20:20:28 -07:00
.gitignore Initialize project using Create React App 2021-10-24 21:10:21 -07:00
LICENSE Create LICENSE 2021-12-14 13:55:22 -08:00
package.json Use Manifest v3 and build for both chrome and firefox 2023-04-16 20:12:12 -07:00
README.md Update README with new build instructions 2023-04-20 15:55:55 -07:00
tsconfig.json Receive highlight events from background script 2021-11-09 00:04:48 -08:00
webpack.config.js Merge branch 'suggested-rooms' 2023-04-20 16:24:22 -07:00
yarn.lock Use Manifest v3 and build for both chrome and firefox 2023-04-16 20:12:12 -07:00

Matrix Highlight

A decentralized and federated way of annotating the web based on Matrix. Watch a quick demo video below, or read the introductory post. If you're on Matrix, come chat with us at #matrix-highlight:matrix.danilafe.com.

Image

Features

  • Current: Create and send website annotations over Matrix.
  • Current: Store data in a decentralized and federated manner.
  • Current: Share highlights with other users, including those on other servers.
  • Current: Group annotations together and create multiple annotation groups
  • Current: Leverage the new m.thread MSC to allow users to comment on and discuss
  • Planned: Use Matrix's End-to-End encryption to ensure the secure transmission and storage of highlight data. highlights.
  • Planned: Use something like ArchiveBox to cache the current version of a website and prevent annotations from breaking.
  • Planned Highlight PDFs in addition to web pages.

Screenshots

Selecting an expression to highlight Selecting an expression to highlight

Highlighted expression Highlighted expression

Highlight comments Highlight comments

Quote List View Quote List View

User List View User List View

Multi-user collaboration Multi-user collaboration

Demo Video

https://user-images.githubusercontent.com/4361282/146517732-d3205964-7d63-4f35-baae-aeab3a9d178c.mp4

See Also

Also check out Populus, which is a tool in similar spirit, but with a focus on annotating files.

Building

The project is a handful of React applications written in TypeScript. It's sufficient to run:

yarn install

# Firefox
yarn webpack

# Chrome
yarn webpack --env browser=chrome

An (unpacked) extension will be available in dist/. Then, you can follow the [Google guide] to install the unpacked extension in Chrome or Chromium.