chore(web-clipper): use @mozilla/readability instead of a vendored copy

The content script extracted articles with lib/Readability.js, a copy
last refreshed in February 2022 (upstream 0.4.x) and since modified
only to export itself as an ES module. Upstream has reached 0.6.0, its
file grown from 2,279 to 2,786 lines of extraction fixes the copy
lacked.

The content script now imports Readability from @mozilla/readability
0.6.0, typed by the package's own definitions, and the copy is gone.
It still parses a clone of the page with a serializer that returns the
content element, and throws when no article is found. The content
script grows from 42.6 kB to 45.3 kB.

Upstream still assigns innerHTML, so Firefox review keeps flagging
it; the README for the reviewer now names the library as Mozilla's own,
installed unmodified from npm, instead of promising an update.

Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>

.claude/skills/developing-web-clipper/SKILL.md

@@ -94,8 +94,8 @@ against older versions of the other.** Prefer changes that need nothing new from
   `new URL("")` throws, so `saveTabs()` filters them out.
 - `fetchImage()` rejects a non-OK response and a non-image `Content-Type` — otherwise an error page
   gets saved as the "image".
-- Readability (`lib/Readability.js`) is an old vendored copy that the README admits to; Firefox
-  review flags its `innerHTML` use.
+- Readability is `@mozilla/readability`, installed from npm; Firefox
+  review flags its `innerHTML` use, which the README explains to the reviewer.
 
 ## The popup and options page: Preact in the Next theme
 

apps/web-clipper/README.md

@@ -6,7 +6,7 @@ The Web Clipper is an extension for the Trilium Notes application, an open-sourc
 
 The source is extracted from the official monorepo, where it can be found under `apps/web-clipper`. The only change made to the provided source code is to have `tsconfig.base.json` in the same directory as the Web Clipper. The submitted source code is a snapshot of the following commit: [https://github.com/TriliumNext/Trilium/commit/1cf93ff0dec89ee1a80654934cb30fad74920043](https://github.com/TriliumNext/Trilium/commit/1cf93ff0dec89ee1a80654934cb30fad74920043) 
 
-There are some warnings regarding the use of `innerHTML` but they come from a third-party library (Readability). We plan to update to a newer version of that library soon, but we would like to publish the extension first (if possible).
+There are some warnings regarding the use of `innerHTML`. They come from `@mozilla/readability`, Mozilla's own article extraction library behind Firefox's Reader View, which the extension installs unmodified from npm.
 
 ## Building from source
 

apps/web-clipper/entrypoints/content/index.ts

@@ -1,4 +1,4 @@
-import Readability from "@/lib/Readability.js";
+import { Readability } from "@mozilla/readability";
 import { createLink, getPageLocationOrigin, randomString, type Rect } from "@/utils.js";
 
 export default defineContentScript({
@@ -13,15 +13,16 @@ export default defineContentScript({
         }
 
         function getReadableDocument() {
-            // Readability directly change the passed document, so clone to preserve the original web page.
-            const documentCopy = document.cloneNode(true);
+            // Readability changes the document it parses, so it reads a copy of the page.
+            const documentCopy = document.cloneNode(true) as Document;
             const readability = new Readability(documentCopy, {
-                serializer: el => el // so that .content is returned as DOM element instead of HTML
+                // Returns the content as an element rather than as HTML.
+                serializer: (node) => node as HTMLElement
             });
 
             const article = readability.parse();
 
-            if (!article) {
+            if (!article?.content) {
                 throw new Error('Could not parse HTML document with Readability');
             }
 

apps/web-clipper/package.json

@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "@boxicons/js": "1.0.1",
+    "@mozilla/readability": "0.6.0",
     "preact": "11.0.0"
   }
 }

pnpm-lock.yaml

@@ -1027,6 +1027,9 @@ importers:
       '@boxicons/js':
         specifier: 1.0.1
         version: 1.0.1
+      '@mozilla/readability':
+        specifier: 0.6.0
+        version: 0.6.0
       preact:
         specifier: 11.0.0
         version: 11.0.0([email protected])
@@ -3467,6 +3470,10 @@ packages:
       '@cfworker/json-schema':
         optional: true
 
+  '@mozilla/[email protected]':
+    resolution: {integrity: sha512-juG5VWh4qAivzTAeMzvY9xs9HY5rAcr2E4I7tiSSCokRFi7XIZCAu92ZkSTsIj1OPceCifL3cpfteP3pDT9/QQ==}
+    engines: {node: '>=14.0.0'}
+
   '@napi-rs/[email protected]':
     resolution: {integrity: sha512-0sDMvme+7fj6bHERUaBs5SvEyWaORc91VUkaB4RrtG7p6dBrBNGy1of8cyEKDxygd1FlHtW+Thunj8lSixzY7A==}
     engines: {node: '>= 10'}
@@ -14654,6 +14661,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@mozilla/[email protected]': {}
+
   '@napi-rs/[email protected]':
     optional: true