Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/obsidianmd/obsidian-clipper
Highlight and capture the web in your favorite browser. The official Web Clipper extension for Obsidian.
https://github.com/obsidianmd/obsidian-clipper
brave browser-extension chrome chrome-extension chromium edge firefox firefox-addon obsidian obsidianmd safari safari-extension
Last synced: 4 days ago
JSON representation
Highlight and capture the web in your favorite browser. The official Web Clipper extension for Obsidian.
- Host: GitHub
- URL: https://github.com/obsidianmd/obsidian-clipper
- Owner: obsidianmd
- License: mit
- Created: 2024-08-29T17:44:26.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-01-04T18:58:34.000Z (16 days ago)
- Last Synced: 2025-01-10T13:29:00.417Z (11 days ago)
- Topics: brave, browser-extension, chrome, chrome-extension, chromium, edge, firefox, firefox-addon, obsidian, obsidianmd, safari, safari-extension
- Language: TypeScript
- Homepage: https://obsidian.md/clipper
- Size: 4.42 MB
- Stars: 1,386
- Watchers: 20
- Forks: 91
- Open Issues: 88
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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