| .github | ||
| src | ||
| .editorconfig | ||
| .gitignore | ||
| esbuild.config.mjs | ||
| LICENSE | ||
| manifest.json | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| screenshot.png | ||
| settings.png | ||
| styles.css | ||
| tsconfig.json | ||
| versions.json | ||
Obsidian Custom Frames
An Obsidian plugin that turns web apps into panes using iframes with custom styling. Also comes with presets for Google Keep, Todoist and more.
⚠️⚠️⚠️ For header-heavy sites like Google Keep and Todoist to work, this plugin requires Obsidian 0.14.3. ⚠️⚠️⚠️
Usage
To use this plugin, simply go into its settings and add a new frame, either from a preset shipped with the plugin, or a custom one that you can edit yourself. Each frame's pane can be opened using the "Custom Frames: Open" command.
On Obsidian Mobile
Unfortunately, Obsidian Mobile does not run on Electron, which is what allows iframes and webviews to be displayed with very few restrictions related to cookies, cross-origin resource sharing, and so on. This means that a lot of sites won't work there, especially ones that you have to log in to. However, when you create a frame, you can toggle the "Disable on Mobile" option to hide a Desktop-only frame in Obsidian mobile.
Presets
By default, Custom Frames comes with a few presets that allow you to get new panes for popular sites up and running quickly.
- Obsidian Forum
- Google Keep, optimized for a narrow pane on the side
- Google Calendar, optimized by removing some buttons. Close side panel with top-left button.
- Todoist, optimized for a narrow (half-height) side panel by removing some buttons and slimming margins.
- Notion (it's recommended to close Notion's sidebar if used as a side pane)
If you create a frame that you think other people would like, don't hesitate to create a pull request with a new preset.
Roadmap
Allow setting a custom icon for each pane- Allow displaying custom frames in Markdown code blocks
- Allow creating links that open in a custom frame rather than the browser
- Possibly allow executing custom JavaScript in iframes (though security implications still need to be explored)
- Add a global setting that causes popups to be opened in a new Obsidian window rather than the default browser
Acknowledgements
Thanks to lishid for their help with making iframes work in Obsidian for a purpose like this. Also thanks to them for motivating me to turn Obsidian Keep into a more versatile plugin, which is how Custom Frames was born.
If you like this plugin and want to support its development, you can do so through my website by clicking this fancy image!
