An Obsidian plugin that allows adding iframes with custom styling as editor tabs. Also comes with presets for Google Keep and more.

Overview

Obsidian Custom Frames

An Obsidian plugin that turns web apps into panes using iframes with custom styling. Also comes with presets for Google Keep and more.

For header-heavy sites like Google Keep to work, this plugin requires Obsidian 0.14.3 or newer due to changes in the way iframes are handled.

A screenshot of the plugin in action

A screenshot of the plugin's settings

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.

Presets

By default, Custom Frames comes with a few presets that allow you to get new panes for popular sites up and running quickly.

  • Google Keep, optimized for a narrow pane on the side

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
  • Possibly allow executing custom JavaScript in iframes (though security implications still need to be explored)

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!

Support me (if you want), via Patreon, Ko-fi or GitHub Sponsors

Comments
  • Repeated crasing until site loaded

    Repeated crasing until site loaded

    I use custom frames for amazing marvin, a task app. Since two updates ago (2.2.1 I think) whenever I open the custom frame on the sidebar or in the note it crashes obsidian, i reopen, it crashes again, I reopen, crashes, and then the third reopen makes it work. It's too quick to load the console to get an error—any ideas?

    opened by brimwats 27
  • Google calendar custom frame modification request

    Google calendar custom frame modification request

    Hi, I found the custom frame of google calendar is very helpful in the side panel for continuously tracking my time-blocked routine.

    image

    But in the side panel, the upper header seems to be big. So is it possible for you to trim the upper header(where the date is written (FRI and 17 in blue circle)? It will be good for the visual experience.

    documentation enhancement 
    opened by Gourav1910 10
  • Not able to log on on Google when trying to use Google Keep

    Not able to log on on Google when trying to use Google Keep

    Hi nice idea and plugin, tested today, it adds the plugin to the sidebar (as keep), but when I try to log-on using Google (inside frame) it goes back to the logon (Google Screen).

    opened by ccjcan 9
  • Security Concern

    Security Concern

    I'd like to know if you have adopted any procedure to prevent 3rd party Obsidian plugins to access & manipulate data on web view sessions, as it can bring serious security issues while we are signed in to our accounts. Therefore, I suppose any process in the Electron app is able to access sensitive information such as emails if they are instructed to do so.

    Other than that, I expected the sessions to be isolated between each web view as well, but that's not the case.

    And finally, I rather see the actual User-Agent in Google activity logs than "Chrome" which makes the ACL review easier.

    documentation enhancement 
    opened by 4r7if3x 7
  • Pls Add url icon in sidebar similar speed dial in browser

    Pls Add url icon in sidebar similar speed dial in browser

    Please Add url icon in sidebar similar speed dial in browser .

    image

    The advanced table plugin can show icon in sidebar. it's very convince that If use the same feature for open url .

    opened by Connor-yang96 7
  • Width 100% of the active note(Custom_Frame)

    Width 100% of the active note(Custom_Frame)

    Hi, first of all, congratulations, this is one of the most interesting plugins from Obsidian.

    Talking about my issue, I would like to know if there is a way to force the width of a custom_frame to 100%

    image

    Thanks!

    enhancement 
    opened by igorpereirabr1 6
  • Feature Request - Refresh frame button

    Feature Request - Refresh frame button

    I'd like the ability to refresh the frame contents. Perhaps in the spec of the frame you can include a "refreshbutton" item (above/below/no, default no) and then below/above the frame you have the button and when pressed can reload the frame contents.

    opened by pcause 5
  • Custom Frame does not like being beside another Custom Frame when placed on the Sidebars

    Custom Frame does not like being beside another Custom Frame when placed on the Sidebars

    Hey there @Ellpeck !! This plugin is making me smile everytime I use it. I can't thank you enough for this!! Onto the issue...

    Problem: Custom Frame does not like being beside another Custom Frame when placed on the Sidebars

    How to Replicate: Add a custom frame and put it to the left sidebar. Add another custom frame and drag it over to left sidebar to be beside the first custom frame.

    Expected Behavior: The new custom frame sits beside the first custom frame.

    Current Behavior: It is very hard to "aim" for the new custom frame to sit beside the other custom frame. It only wants to be on the top or bottom.

    I am trying to use my left sidebar as my go to search area/other tools hotspot with all the custom frames I added. Unfortunately, I can't put them all in line due to this bug.

    opened by ceciliamay 5
  • Rstudio Cloud - Cannot Read Property

    Rstudio Cloud - Cannot Read Property "desktopInfo" of Null

    Hi there,

    The plugin is great! Just one question: I'm having some issues using it with Rstudio Cloud. I manage to login and check the files on the webpage, but when I try to open one of the files on the website I get a message that "R is taking longer to start than usual".

    When I check the plugin's dev tools I get the following:

    image

    Is there anything we can do to sort this out?

    Thanks!

    opened by cervera-queiroz 4
  • Open page in default browser

    Open page in default browser

    Is it possible to install any chrome extension for Calendar?

    There is an extension that shows the duration of each event that I would like to be able to use. https://chrome.google.com/webstore/detail/event-durations-for-googl/elfoibhncineionfonglaickdliaikmj

    opened by javiavid 3
  • [Feature Request] Add

    [Feature Request] Add "force mobile view" for custom frames

    It would be nice to have a force frame to mobile dimensions for our custom frames. this would avoid us to have to put in the mobile url of the websites. Some websites dont have simple mobile urls

    enhancement help wanted 
    opened by Obadiahcruz 3
  • Weird tab behavior when using the ribbon button to open a frame

    Weird tab behavior when using the ribbon button to open a frame

    Sometimes it force-opens a new tab, and then sometimes it reuses the old tab, and I have no idea why, and it seems like all the other plugins I looked at have the same code to open their stuff but it doesn't act as weirdly there :(

    bug help wanted 
    opened by Ellpeck 0
  • Can't right-click on sidebar tabs to open additional options

    Can't right-click on sidebar tabs to open additional options

    You're meant to be able to right-click on the tab when it's in the sidebar to open options for forward, back, dev tools etc, but right now that doesn't work for some reason.

    image

    bug 
    opened by Ellpeck 0
  • Load page using a customised color

    Load page using a customised color

    I am using obsidian in the dark mode version and when showing a custom frame (reloading the page) there is a white box for a few seconds. Would it be possible to add an option to set the color of the custom frame when loading?

    opened by tecnoborder 0
  • [Feature Request] Go back and go forward using hotkeys

    [Feature Request] Go back and go forward using hotkeys

    Instead of just being able to "Go back" and "Go forward" through the right click menu image

    It would be great if the "Navigate back" and "Navigate forward" hotkeys did the same thing. image

    If it's not possible to use obsidian's default hotkeys for it, I'd love for this plugin to add its own.

    opened by Trikzon 0
  • [REQUEST] Ability to load snippets from `.css` files

    [REQUEST] Ability to load snippets from `.css` files

    Currently, to test your CSS snippet for a custom frame, you have to:

    • open settings
    • navigate to Custom Frames plugin settings
    • open settings for you custom frame
    • input code in Additional CSS box, which doesn't support any kind of code formatting or handling
    • reload Obsidian
    • see if it worked
    • if not, repeat

    And that's awful. Please give us the option to assign a .css file to be loaded for each (or all, too) frame, so we can make changes to the file and not have to navigate menus over and over.

    Thank you for your work!

    enhancement 
    opened by firinael 1
Releases(2.4.4)
Owner
Ellpeck
Ellpeck
Kuldeep 2 Jun 21, 2022
A single-page application that allows users to keep track of their books. Users can add the book details (book title and author) and also, and the books can also be removed. Built with JavaScript, HTML, and CSS

Project Name Awesome book with ES6 Description the project. This is a single page application that allows users to keep track of their books. Users ca

Micheal Oguntayo 4 Oct 13, 2022
jQuery Tabs Plugin. CSS Tabs with Accessible and Responsive Design. Lot of Tab Themes with Vertical and Horizontal Orientation.

Macaw Tabs Macaw Tabs is jQuery tabs plugin. It helps you to create accessible and responsive jQuery tabs by implementing the W3 design patterns for t

HTMLCSSFreebies 6 Dec 8, 2022
jQuery plugin to show a tabs bar for navigation. The tabs can be defined once, and shared across multiple HTML pages.

jquery.simpletabs v1.2.3 The jquery.simpletabs plugin shows a tabs bar for navigation. The tabs can be defined once, and shared across multiple HTML p

Peter Thoeny 1 Feb 23, 2022
Easy responsive tabs - is a lightweight jQuery plugin which optimizes normal horizontal or vertical tabs to accordion on multi devices

Easy responsive tabs - is a lightweight jQuery plugin which optimizes normal horizontal or vertical tabs to accordion on multi devices like: web, tablets, Mobile (IPad & IPhone). This plugin adapts the screen size and changes its action accordingly.

Samson Onna 600 Dec 8, 2022
High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.

lazysizes lazysizes is a fast (jank-free), SEO-friendly and self-initializing lazyloader for images (including responsive images picture/srcset), ifra

Alexander Farkas 16.6k Jan 1, 2023
BCash is an app to help you keep track of who you owe and who owes you money in an easy way. Split your tabs and more.

BCash BCash is an app to help you keep track of who you owe and who owes you money in an easy way. Split your tabs and more. Routes for develpment: lo

Cuitlahuac Maldonado 3 Aug 11, 2022
create custom search presets for vscode 🔎

VSCode Search Presets vscode extension to configure search presets Sometimes you want to search through a specific set of files, you can use vscode's

Ran Yitzhaki 8 Oct 14, 2022
Utility to generate adwaita presets for use with AdwCustomizer from images using Google's MaterialU color generator.

Adwaita Preset Generator using Material U Color Generation Material U Color generation is done using the material-color-utilities available here: http

Avanish Subbiah 30 Oct 31, 2022
⚡Chrome extension allows you to create lists of Google and Github dork to open multiple tabs with one click, import "scope/out of scope" from #HackerOne #Bugcrowd #Intigriti ...

FastDork v0.1 This chrome extension allows you to create lists of Google and Github dork to open multiple tabs with one click, import "scope/out of sc

skvndr 74 Dec 31, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
A plugin for Obsidian (https://obsidian.md) that adds a button to its search view for copying the Obsidian search URL.

Copy Search URL This plugin adds a button to Obsidian's search view. Clicking it will copy the Obsidian URL for the current search to the clipboard. T

Carlo Zottmann 6 Dec 26, 2022
An Obsidian plugin to paste Excel tables as Markdown tables in Obsidian editor.

Obsidian Excel to Markdown Table An Obsidian plugin to paste Excel tables as Markdown tables in Obsidian editor. Demo You can paste the copied Excel d

Ganessh Kumar 108 Jan 4, 2023
Lazyload images, iframes or any src* element until they are visible in the viewport.

Lazyload images, iframes or any src* element until they are visible in the viewport.

Vincent Voyer 938 Nov 15, 2022
This plugin allows side-by-side notetaking with videos. Annotate your notes with timestamps to directly control the video and remember where each note comes from.

Obsidian Timestamp Notes Use Case Hello Obsidian users! Like all of you, I love using Obsidian for taking notes. My usual workflow is a video in my br

null 74 Jan 2, 2023