Intro to Charles, the Bubble Chrome Extension Builder

okay so here's a quick walkthrough video through charles the bubble chrome extension plugin firstly gonna talk about what charles is and what he can do with it and then i'm also gonna take you through the detailed setup process so you know exactly what to do if you want to use charles yourself okay so first things first what is charles charles is a way for bubble builders to build and deploy chrome extensions based on bubble apps without the need to code anything and before i'm going to show you how it all works i'm just going to show you the thing in action so i've installed a basic version of charles here on my chrome browser and what this is gonna do it's just gonna render a predefined bubble app that i've built and it also has some intelligence so we can do some cool stuff with it so if i just click on the icon here we can see our bubble page is loaded we can do things from here so this is basically a chrome extension even if you don't do anything you can just basically show your web page here and then since we use the bubble plugin for child so we can also do some cool things for example we see currently we're on the page called charles this is the current url i can also select some text here then again click here and then we see our selected text and then we can do things like open a new alert open a new tab show an alert or open an iframe intermodal which is pretty cool i'm just going to show you this quickly so let's just open up opens up another bubble app in something like a pop-up here okay so basically what it is it's a way of rendering your bubble amp in a chrome extension and then it gives you two-way communication between this window here and the browser itself okay this is what charles is now how can you set it up i'm actually just going to remove this here and take you through the detail setup process if you go to the channel's website bubblex studio charles you will find pretty detailed description of the current features i'm going to add more to this in the coming weeks and we have a pretty detailed setup so the first thing that we want to do is we want to of course build our bubble app and here we need to pay attention to the dimensions because the bubble app should have the dimensions of the pop-up that i showed you previously here you don't need to use this dimension you can use any dimensions you want but 320 times 640 usually is a good start then in your bubble app it's important to allow the app to be rendered as an iframe so we go to our app we go to settings general and then make sure that allow to render the app in an iframe is allowed as all iframes okay that's the first step that we need to do otherwise the popup will just be blank and then that's optional if you need the two-way communication between your plug-in pop-up and the browser so if you want to get the current tabs information or open a new pop-up or show alerts get the selected text and so on you can install the chrome header charts chrome plug-in plug-in to your bubble app so just click here just get see the link you can also just go in your app go to plugins add plugins and find it here this is how it looks okay so this is done then the next thing that we want to do is get our chrome extension files this is really chrome extension that we can install just click here this brings us to a download page we download the latest version to our downloads let's go back here just gonna click here to see what's inside okay cool so if you're in here there's a bunch of files and then we need to do some setup on these this is also described in detail in here so the first thing that we want to do is we want to link the chrome extension with the bubble app of our choice that we want to display in the pop-up so for me if i just go to my back to my bubble app here if i click on preview that's the url that i want let's make sure not to get the debug mode a parameter in here so i'm just going to copy this then going back to my files you can really open this with any text editor i'm going to use aptum so i'm just going to open the pop-up.js or actually what i'm going to do is i'm going to open up apton and really feel free to use any any kind of text editors are all just text files regardless of the endings so i'm gonna add them which is by the way an open source project by github so if you need the text editor i can only recommend stop downloading out them so i'm just gonna drag the folder into here and voila i have my files and set the first thing that i want to adjust is popup.js so i'm going to go to popup.js and then in here that's the url of the app that is rendered i'm just gonna paste and the link that i just copied from the bubble preview that happens to be the same since this is my demo app that i'm using then the second thing that you want to do is adjust the height and width you need to do this in two places so that's the height width of the pop-up it should be the same dimensions as your bubble app this needs to happen in pop-up.js and in popup.html so going back here pop.js you can just adjust these two numbers make sure not to change anything else and then in popup.html we have the same we have the width and the height let's just adjust the numbers here i'm just going to leave them as is for now and then we're already ready to install the chrome extension maybe let's do a little bit of cosmetics first if you want this is described a bit later here so here just described a bit later in terms of adjusting your name and versioning you don't have to do that but it's good to do it at this point if you want so let's go to the [Music] to the manifest.json file in here to manifest json we can adjust the name of our extension i mean i really don't have to do this if you're just playing around this is only important if you ship it to the chrome extension store we have the description that we can adjust we can adjust the versioning it's important that every time we deploy it to the chrome extension store that this is increased otherwise it will get an error you don't really have to touch the rest for now if you want you can also adjust the images so that's basically the image that you're gonna imagine you're gonna see up here so you can go to the extension and you see there's this four images here 16 32 48 928 pixels square you can just use any image you want but you can use something like simple image resizer to resize your image just make sure you keep the names so if you replace this image keep the names or alternatively you can change the names here so you see this is pointing to the folder image and then to the file called sensor in the folder images then we have to file either leave the names or replace them here and also down here and then we're ready to go installer chrome extension that's super simple you can just click on the extension icon here say manage extensions this brings you to this window or you can simply go ahead and type chrome colon slash slash extensions in your in chrome directly in this brings it here then you can first you need to activate the developer mode and then you can say load unpacked extension inside the by the way you know save all the files here once we change them you need to save them of course and then we can just go to our downloads folder or wherever your folder is select the folder here don't click into just select it go select and voila here is our extension then it also should be here okay great i can pin this now and now i have my extension here and if i click on it it renders the bubble app that we specified in our code okay that's pretty much how to set it up on the chrome extension part let's look how to set it up in bubble and then i'm gonna give you a quick demo of the features and how to use them so in bubble i said the first thing that we want to do is install the plugin and then it comes with currently two elements and four actions so the elements serve as a way to funnel information back from chrome through our extension code into bubble i said this is important if we need something like the inputs of the current tab or the selected text if i select now i can select it on this page but i can select something here yeah that's what these elements are for to use it is pretty simple we just go to our page in the elements editor we search for charles then we have these two elements here you can just drop them on the page somewhere i've already have them here so let's select the text and the tab info and then we can use these elements and tap into their states if we want to get the information so we have a text element here it's called where i want to display the current temp title so i'm just going to select charles tabbins was a tab type tool here i can select the url and here i can select the selected texts element selected text it's pretty much everything that needs to happen there everything else is done by the plugin in the background for the actions it's the same thing if i want to do something like open your iframe in a model there is an action here i've already prepared this but if you need just search for charles and then you see the actions here here is open iframing new model this comes with two inputs i want to i need to know which url i need to open and also a title to display so url and title again if we go here we take it from here because in our setup delete this original setup just going to use these inputs so you can pretty much render any other or even the same extension that you already have in here in my case it's an other bubble arc make sure also in the other bubble app that i frames are allowed in the settings i don't click here we open this model or pop up or wherever you want to call it and then load an other bubble up the thing in here this is really just another bubble app and then the header bar is provided by charles itself we can also click here and close it so that's one thing said we have a few more comments long as let me just actually go ahead and hide the series of a bit more space by the way one important thing is in here i have a group content in my plugin page and what you can see here is i give this a max and i love scrolling if it overflows all my elements are in here just make sure that if things don't fit in here i can actually scroll up and down okay let me just go ahead and hide this quickly so you see what's underneath okay there's a few more actions here i have shown alert bulky this basically just shows a native alert whenever you want to inform the user about something so if i go here and i use this just chokes the alert and make sure to notice the title here is coming from the current website that your user is on we can open a new tab so that's the same thing just one action specify the url that it's supposed to be opened if i do destroy neural i can just specify a url here use the input open a new tab and this brings me to a new tab and then last but not least we have an action to just close the pop-up itself okay we can just close the pop-up button instead of you know we need off of me to clicking outside of it this is important if you have some actions that that need that that's it for now i'm gonna add a bunch of different features very very soon so if you want to deploy your plugins once you're done building there's a pretty detailed description in the chrome developer docs but it's actually super simple and that's pretty much it i hope this is helpful let me know what you think of charles also let me know if there's any features that you need i'm happy to add more features and let me also know if you have any questions or something doesn't work and of course um if you like the tool please feel free to give it a review yeah that's pretty much it thanks a lot see you soon

Channel: bubbleHacks

Views: 4,417

Keywords: Descript

Id: dW-L1lHSHG0

Length: 13min 58sec (838 seconds)

Published: Mon Jun 06 2022