Allysun · Transcript · · Updated
I Turned My Browser Into an Operating System – Transcript
Video by Allysun · Watch the original on YouTube
Use this video with Pro
Reading, copying and transcript downloads are free. Create saved AI results for this video with a signed-in Pro account ($9/month).
Transcript
Search ignores accents. All transcript text stays visible.
Recently, I was browsing the internet,doing very important research, and suddenly, I saw this. "Save computermemory by turning your browser into an operating system." Hmm, soundsinteresting. In Google Chrome, you can get at your web apps by typingchrome://apps.
So, their idea is basically use web appsinstead of normal apps. So, naturally, another completelyunnecessary idea came to mind, and it's probably going to torture me for thenext few days. I'm going to take this thing way too far. I don't just wantsome shortcuts in Chrome. I want all operating system features. So, can webring them all and see if this thing
actually saves RAM? So, let's openHelium. I'm using Helium because I don't really want to use Chrome, and Helium isChromium-based. So, we still get basically everything we need for thisexperiment. So, this is just a normal browser with default settings. So,first, we need somewhere to put our operating system. Let's make a folderand call it BrowOS.
Why BrowOS? So, browser plus OS gives usBrowOS. Yeah, very creative. Inside this folder, the first thing we need is afile called manifest.json.
Now, if you have no idea what a manifestis, basically, it's like an ID card for the extension. It tells the browser,"Hey, this is what I am. This is my name. This is my version, and this iswhat I'm supposed to do." So, here, we put the manifest version, the name,BrowOS, version 1, a little description, and most importantly, we tell Heliumthat whenever we open a new tab, instead
of showing the normal new tab page, openour page, which brings us to index.html. This one is basically the actual pagewe're going to see. And yes, this one is a little longer. I'm not going to spendan hour explaining HTML to you. Go study it yourself. I'm not your universityprofessor. I'm barely qualified to be doing this. But basically, we'recreating a page, giving it a background,
setting its size, and giving ourselves anice empty space where we can start building our pretty operating system.That's it. Now, let's close this, go back to Helium, open extensions, turn ondeveloper mode, and here we have load unpacked, which basically lets us loadour extension directly without putting it on the Chrome Web Store. So, chooseBro OS, and there it is. Now, if I open
a new tab, we should seeNo, not this. Let me fix that. Okay. Now, if I open a new tab, nice, weshould see this. But now, there is absolutely nothing here. But that'sactually good, because right now, we've only built the base. Now, we can startturning this thing into an actual desktop. So, next, wallpaper andtaskbar, and Bro OS might start look
like Windows, or let's say Linux,because it's more privacy-friendly. And speaking of privacy, let me introduceyou to today's sponsor, GoLogin. The internet today isn't as simpleas it used to be. Some stuff is restricted, depending on where you live.Websites collect a lot of information about you. And if you managemultiple accounts or workspaces, things can get messy really fast. That's whereGoLogin comes in. GoLogin isn't just
about privacy. It's aboutfreedom, security, and control. You can create completely separate browserprofiles, and each one can have its own settings, cookies, browser fingerprint,and its own proxy and IP. So, your different accounts and workspaces don'tall get mixed together. It also gives you more control over tracking andfingerprinting by letting each profile have its own browser identity. Andbecause each profile can use a proxy,
you can choose the network location aprofile connects from, which is useful for regional websites, internationalwork, and testing content from different locations. And if you work with a team,you can share profiles without literally sending people your passwords. Everyuser also gets 2 GB of free proxy traffic, plus 40% off your firstpurchase. Just download GoLogin using the link in the description, opensettings, go to billing plans, find
the coupon field, enterallyson40 at checkout, hit apply, and there you go, 40% off. Thanks to GoLoginfor sponsoring the video. Back to Brow OS. So, next, wallpaper and taskbar.First things first, the wallpaper. And with this one, we have a small problem.If we go into helium customization, there's no change background anymore.And that's probably because we messed with the home page. So, we'll figure itout our way. We're going to bring our
wallpaper here, and in the code, we justtell it where the image is, its position, and its size. Pretty simple.Now, if we go back to helium, reload the page, and there it is, our prettywallpaper. Nice. And before we move forward, let me just turn on framelessmode. Yeah, much better. Okay, second thing, the taskbar. And for the taskbar,we need a few things. First, a start
menu button, then some app icons and thedate and time. We could also add tray icons and all that stuff, but we'regoing to stick with the essentials for now. And for the start menu button, weneed an icon. So, I guess our operating system needs a logo now. Okay,Photoshop. I'm not a designer, but I'm going to try making something.
So, that's the logo. And if you'rewondering why it looks like this, the OS is called Brow OS. So, these arebasically two bros hugging. I know, very stupid idea. Let me just do some tweaks. Actually, you know what? Let's just giveit to ChatGPT and tell it to refine it.
And this is actually pretty cool. Allright, now let's make the taskbar. So first, we create a taskbar class andinside it we start giving it its size, position, all that stuff. And we alsoneed one for the start button. So, let's create another class and this is wherewe control the size of the button and how the logo sits inside it. And after alot of tweaking, writing stuff, deleting
it, we finally have a taskbar. But thisis way too basic. I want it centered, floating a little bit with roundedcorners. So, back to the code. Let's see. Bottom 16 pixels, left 50% and thentranslate X minus 50%. Padding, let's keep it 0 12 for now. And afteralign items, let's add justify content
center. Okay, let's see.It moved up a little bit and why is the start button in the middle?I'm already getting a headache. Okay, let's add a border radius and mayberemove the width and left. Let's see if that works.Nope, definitely not. Let's bring left back. See? This is exactly why I toldyou I'm not going to teach you HTML. And
let's make the width 320 pixels. Okay,that's better. But it's still not rounded properly, the button doesn't doanything and somehow the start button is still in the middle. Great. Okay, nowthis should work. Yep, it's rounded.
Nice. There's a tiny problem with thelogo placement, but that's easy enough to fix. Now we need to make the startbutton actually do something. For that, we need JavaScript. So, I made a littlescript and now if I click the start button, we get a tiny start menu. And ifI press turn off, the whole browser closes. I don't know why, but that'sactually pretty satisfying. All right, start button done. Now let's go to theother side and add the time and a little
JavaScript so it actually keepsupdating. And there we go. We've got the time, the date, and our taskbar ispretty much done. Next is explorer. So for this one, we need a header, asidebar, and obviously somewhere for the actual files to go. Looks simple enoughto do.
Bro, why do I keep putting myself inthese situations? But I think you can see something now. Our explorer is here.There we go. We've got a header, home, documents, pictures, downloads. Look atthis. We even have a definitely not a virus.exe.Seems safe. Let's click it.
Yeah. And one last thing I did, this issupposed to be a window. So I made it draggable. Not very smooth. But theimportant thing is it works. So yeah, our explorer looks pretty basic, butit's a file explorer. Now comes the part I've been avoiding for basically thewhole video. Making this feel like an actual desktop. So first, we need aproper desktop grid. Basically, every
app gets its own little spot on thedesktop, just like Windows. And then, I want to be able to grab the icons, movethem around, and when I let go, they snap back into the grid. Then, when wedouble-click an app, it opens inside its own window. Now obviously, we're stillinside a browser. So we can't just install Photoshop and other apps.Instead, we're going to use the web versions, which means we're basicallyturning websites into desktop apps. So I
made the grid. This grid isn't going toshow in the final version. It's just here so you guys can actually see what'shappening. Then, I made a little test app, and now we can drag it around, andwhen we let go, it snaps back into the grid. Nice. Okay, first actual app. Imade a fake browser, and of course, I made it helium. Helium inside helium.Nice. And we can actually type in the search bar, too.
So now for the other apps. First,Photopea, which is basically the web version of Photoshop. And yeah, we cando most of the stuff we'd normally do in Photoshop here. Second, a video editor.For this one, I used a website called Polotno. And yep, we can actually editvideos inside brow OS, too. And finally, Spotify with a very beautiful playlist.>>
>> So yeah, I think that's pretty much itfor today's video. There's still a lot more we could add, but this video hasalready taken way too much time. So maybe we keep that for a part two. Wecould even try running Minecraft inside brow OS or something, which sounds likea terrible idea. So obviously, I kind of want to do it. And for RAM usage, here'sthe RAM with all the apps running on
Windows. And here's the RAM with theirweb versions running inside brow OS. So yeah, we actually saved some RAM. But isit practical for everyday use? Uh, I don't know. I guess that depends onyou. Anyway, let me know what you think of brow OS, and I'll see you in the nextvideo. >>