docs(dev): add some information on web clipper

This commit is contained in:
Elian Doran
2026-01-24 21:35:54 +02:00
parent ada22e4966
commit e2e5d485d7
3 changed files with 70 additions and 0 deletions

View File

@@ -2839,6 +2839,40 @@
"format": "markdown",
"dataFileName": "Themes.md",
"attachments": []
},
{
"isClone": false,
"noteId": "YTAxJMA3uWwn",
"notePath": [
"jdjRLhLV3TtI",
"yeqU0zo0ZQ83",
"YTAxJMA3uWwn"
],
"title": "Web Clipper",
"notePosition": 210,
"prefix": null,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "label",
"name": "shareAlias",
"value": "web-clipper",
"isInheritable": false,
"position": 20
},
{
"type": "label",
"name": "iconClass",
"value": "bx bx-paperclip",
"isInheritable": false,
"position": 30
}
],
"format": "markdown",
"dataFileName": "Web Clipper.md",
"attachments": []
}
]
},

View File

@@ -0,0 +1,35 @@
# Web Clipper
The Web Clipper is present in the monorepo in `apps/web-clipper`. It's based on [WXT](https://wxt.dev/guide/introduction.html), a framework for building web extensions that allows very easy development and publishing.
## Manifest version
Originally the Web Clipper supported only Manifest v2, which made the extension incompatible with Google Chrome. [#8494](https://github.com/TriliumNext/Trilium/pull/8494) introduces Manifest v3 support for Google Chrome, alongside with Manifest v2 for Firefox.
Although Firefox does support Manifest v3, we are still using Manifest v2 for it because WXT dev mode doesn't work for the Firefox / Manifest v3 combination and there were some mentions about Manifest v3 not being well supported on Firefox Mobile (and we plan to have support for it).
## Dev mode
WXT allows easy development of the plugin, with full TypeScript support and live reload. To enter dev mode:
* Run `pnpm --filter web-clipper dev` to enter dev mode for Chrome (with manifest v3).
* Run `pnpm --filter web-clipper dev:firefox` to enter dev mode for Firefox (with manifest v2).
This will open a separate browser instance in which the extension is automatically injected.
## Port
The default port is:
* `37742` if in development mode. This makes it possible to use `pnpm desktop:start` to spin up a desktop instance to use the Clipper with.
* `37840` in production, the default Trilium port.
## Building
* Run `build` (Chrome) or `build:firefox` to generate the output files, which will be in `.output/[browser]`.
* Run `zip` or `zip:firefox` to generate the ZIP files.
## CI
`.github/workflows/web-clipper.yml` handles the building of the web clipper. Whenever the web clipper is modified, it generates the ZIPs and uploads them as artifacts.
There is currently no automatic publishing to the app stores.

View File

@@ -9,6 +9,7 @@ The mono-repo is mainly structured in:
* `client`, representing the front-end that is used both by the server and the desktop application.
* `server`, representing the Node.js / server version of the application.
* `desktop`, representing the Electron-based desktop application.
* `web-clipper`, representing the browser extension to easily clip web pages into Trilium, with support for both Firefox and Chrome (manifest V3).
* `packages`, containing dependencies used by one or more `apps`.
* `commons`, containing shared code for all the apps.