base on Highlight and capture the web in your favorite browser. The official Web Clipper extension for Obsidian. Obsidian Web Clipper helps you highlight and capture the web in your favorite browser. Anything you save is stored as durable Markdown files that you can read offline, and preserve for the long term. - **[Download Web Clipper](https://obsidian.md/clipper)** - **[Documentation](https://help.obsidian.md/web-clipper)** - **[Troubleshooting](https://help.obsidian.md/web-clipper/troubleshoot)** ## Get started Install the extension by downloading it from the official directory for your browser: - **[Chrome Web Store](https://chromewebstore.google.com/detail/obsidian-web-clipper/cnjifjpddelmedmihgijeibhnjfabmlf)** for Chrome, Brave, Arc, Orion, and other Chromium-based browsers. - **[Firefox Add-Ons](https://addons.mozilla.org/en-US/firefox/addon/web-clipper-obsidian/)** for Firefox and Firefox Mobile. - **[Safari Extensions](https://apps.apple.com/us/app/obsidian-web-clipper/id6720708363)** for macOS, iOS, and iPadOS. - **[Edge Add-Ons](https://microsoftedge.microsoft.com/addons/detail/obsidian-web-clipper/eigdjhmgnaaeaonimdklocfekkaanfme)** for Microsoft Edge. ## Use the extension Documentation is available on the [Obsidian Help site](https://help.obsidian.md/web-clipper), which covers how to use [highlighting](https://help.obsidian.md/web-clipper/highlight), [templates](https://help.obsidian.md/web-clipper/templates), [variables](https://help.obsidian.md/web-clipper/variables), [filters](https://help.obsidian.md/web-clipper/filters), and more. ## Contribute ### Translations You can help translate Web Clipper into your language. Submit your translation via pull request using the format found in the [/locales](/src/locales) folder. ### Features and bug fixes See the [help wanted](https://github.com/obsidianmd/obsidian-clipper/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22) tag for issues where contributions are welcome. ## Roadmap In no particular order: - [ ] A separate icon for Web Clipper - [ ] Translate UI into more languages — help is welcomed - [ ] Annotate highlights - [ ] Template directory - [ ] Template validation - [ ] Template logic (if/for) - [x] Save images locally, [added in Obsidian 1.8.0](https://obsidian.md/changelog/2024-12-18-desktop-v1.8.0/) ## Developers To build the extension: ``` npm run build ``` This will create three directories: - `dist/` for the Chromium version - `dist_firefox/` for the Firefox version - `dist_safari/` for the Safari version ### Install the extension locally For Chromium browsers, such as Chrome, Brave, Edge, and Arc: 1. Open your browser and navigate to `chrome://extensions` 2. Enable **Developer mode** 3. Click **Load unpacked** and select the `dist` directory For Firefox: 1. Open Firefox and navigate to `about:debugging#/runtime/this-firefox` 2. Click **Load Temporary Add-on** 3. Navigate to the `dist_firefox` directory and select the `manifest.json` file ## Third-party libraries - [webextension-polyfill](https://github.com/mozilla/webextension-polyfill) for browser compatibility - [readability](https://github.com/mozilla/readability) for content extraction - [turndown](https://github.com/mixmark-io/turndown) for HTML to Markdown conversion - [dayjs](https://github.com/iamkun/dayjs) for date parsing and formatting - [lz-string](https://github.com/pieroxy/lz-string) to compress templates to reduce storage space - [lucide](https://github.com/lucide-icons/lucide) for icons - [mathml-to-latex](https://github.com/asnunes/mathml-to-latex) for MathML to LaTeX conversion - [dompurify](https://github.com/cure53/DOMPurify) for sanitizing HTML ", Assign "at most 3 tags" to the expected json: {"id":"12442","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"