How To Monetize Chrome Extension - Make Money With Chrome Extensions - BrowserBill

hey everyone in this video i'm going to show you how to monetize your browser extension whether you want to accept you know one-time payments monthly payments yearly payments we have it all set up for you we've done the hard work for you so it's basically just a matter of copying and pasting a few lines of code and you're good to go you've got payments directly integrated into your browser extension so the first thing we're going to do is go to our site browseable.com and we're going to be using the browser build system um to do this and basically while we're on the home page we're just going to open up these two links right at the start i'm just going to leave them to the side for a minute um basically these have some code which we're going to copy for um for the tutorial um you're more than welcome to type it out but it's just going to make it so much easier if you just have this up so you can just copy and paste the code we also have the sdk here um which we're going to need to embed in the extension so once we have that all done you're just going to create a new account so click to get started here um register confirm your email and sign in then once you've done all that boring stuff now we're good to go and you're going to want to go to the dashboard which is going to be taken to after you log in so i'm on the dashboard here and right down here extensions we need to create our new extension our first extension so we can just create an extension i'm just going to call it um [Music] uh we'll call it youtube tutorial and i'll basically this code here this is a unique identifier for your extension that you'll remember it by and that you're going to use in your um in your own javascript code so this is how you'll reference the extension and say hey i want to charge um you know my users for this particular extension so i'm going to do youtube dash tutorial if i can spell it right um and then just click create so now that's created our new extension as you can see here we've got our extensions page and to start off with we need to create our first plan so this is basically what users will be charged so i'll just call it pro subscription you can have as many plans as you want and they can be you know one time monthly or yearly um i'll do a monthly um subscription actually i'll just do a one-time subscription so i'll do ten dollars um one time and just click create plan and new plan created successfully as you can see it's right here and that's pretty much ready that's all the work we need to do on the actual dashboard the two things that you'll need to note for later is this code here which you created as well as this id so basically we're just going to use this combination to say you know for this to uh for this extension i want to charge this user for this plane um that's basically all it is um you just need a unique identifiers for each of these but once we've done all the work on the dashboard now it's time to actually create the extensions code so go and create a new folder wherever you want it um i've already created a folder and open it up in your preferred text editor and so first of all we need to copy the sdk so as we opened earlier you can either open it now or if you opened it earlier then you'll have it here this is our github page and it's got documentation for everything it's got some info about everything as well as a another tutorial um but this is the main thing we need here which is the sdk itself so you can either do it the proper way um and you know download either download the zip clone it however you want to do it um for the sake of this tutorial i'm just going to um copy the code here and i'm just going to create a new one actually i will first of all i'll just copy the name of it and we'll create that here technically you don't need to keep the same name but it's going to make it slightly easier because all of the other code references this name and they're just going to paste all that code in but you can do it anyway as long as you have the sdk within your extensions code so now what we want to do is we want to create the actual manifest so if you ever created a um browser extension you need a manifest which just gives some metadata about the extension so just call it manifest.json and we're going gonna be copying the code from the um getting started tutorial now so as you can see we've got the manifest code here we've got the copy buttons to make it easy for you guys um and so uh just to give you some information about what the manifest means um this is all pretty standard stuff here you know that's just regular browser extension manifest information but in the action we have our default pop-up this is basically we're saying even though we haven't created it yet we'll create it in the next step um you know when a user clicks the browser extensions icon we want it to open up the popup.html file then also here this is another important thing to note we have the storage permissions this is required for browser build we need the storage permissions if you don't have this set then browser bill will not work so just save those and now let's get the next thing in the uh tutorial so we have the actual popup.html again just copy the code and we're going to create a file called pop up.html and so just to kind of go over this this is a pretty small and standard html file um some things to do here that we are using bootstrap just for styling um and so except for to be more specific about um information related to browser bill and our implementation as you can see here we have our paid status which is what we're going to be um we're going to be modifying this to say whether they're paid or unpaid in the next step when we create the javascript file but this is just a unique identifier so we can change this and then we also have different buttons which we'll be um setting up so um when they click this button the purchase button they'll be taken to the payment page if they do happen a current subscription then this will be shown and when they click this they'll be taken to the manage payments page and then down the bottom here we have the sdk which we created because we need this we need to have access to that code and then we have the pop-up which we'll be creating in a second um which will have all of our logic to handle you know showing the paid status and taking them to the purchase page manage page etc so now we've done that we have the popup.js i believe this is yes the last piece of code that we need um and this is where a lot of the main stuff happens so we'll say this to the end just so i can go through this and explain it all to you guys pop-up.js so to start off with let's just get this sorted we need to have the configuration set at the top so we need to set the extension code and the plan id that we mentioned earlier so extension code is what we created when we were creating the extension so we've got that and just paste that in there and the plan id is this id here so we have 18 and we will just replace this here so that's all the configuration we need to do now it's it's ready to go it's ready to work but i'll just explain what's actually happening in here so we create an instance of the browser bill um sdk with our extension code so we're saying you know we want to all our interaction with browser bill is in relation to this extension so now we have this which gets the user data and this runs as soon as the popup opens so it gets the user data and then the data has an identifier called paid which is true or false if that's false obviously that means they haven't paid if it's true that means they have paid and if it is true then we want to hide the payment button we want to show the manage button and then we want to change their paid status to paid and then so once we have the payment button handlers so basically this is what happens when a user clicks on the payment button we want to open the payment page so and then this is for that specific plan id so we want to open the payment page for that plan id in contrast if they click the manage button so oopsy daisy if they click the manage button then we want to open up the manage payment page so i need the management page but this is how easy it is it's really really simple like it's just one line for opening the management page one line for opening the payment page you know one line for getting the user details it's really really basic we've made it as simple as possible for you guys and i mean that's literally all we need to do that's done that's this extension is fully ready it has payments fully integrated so um also so basically we're going to load it up now but i should just point out that our extension is in test mode so while it's in test mode we don't actually accept any lie payments which makes it easy for testing um if you want to accept live payments which you obviously would then you just go to the accounts page and you'd connect your stripe account and then you can change edit this and change tesmo to disabled and then it's going to start accepting payments through your stripe account um but yeah now we're ready to test this extension so just want to go to the settings then extensions and then make sure you have developer mode ticked at the top here and then click load unpacked so i'm gonna just find the folder that you created just click on it and then click select folder as you can see this is the extension that we created and at the top now we should have this so when we open it up as you can see that current status is unpaid obviously because we've only just installed the extension then if i click purchase it should open up a um payment page so it's just got this identify here just to make it easy for us to know um we've got the checkout again this is our extension's name this is our plan's name this is our plant's price um and then we have purchase alternatively if they've already purchased then they can log in um but we'll just click purchase and then this should take us to the test payment page yep so it's just processing a test payment and then purchase is successful so to use the purchase return to the extension and restart it so we're gonna hop out of there and as it said restart it and now current status is paid and we have the manage button if we click the manage button then we're gonna have the manage page again this is just a test one so um it's not gonna have that much information by accident your name at top and this is the purchase that we just made for ten dollars for the pro subscription so that's how easy it is guys it's really really simple to integrate um very very straightforward uh we've taken all the guesswork out of it for you we've done everything for you so i hope this video was helpful if you have any questions feel free to leave them in the comments below or reach out to our support team we'd be happy to assist you um but thank you guys so much for watching i really hope this was helpful have a great day

Channel: BrowserBill

Views: 4,021

Keywords: how to monetize chrome extension, how to make money with chrome extensions, how to monetize browser extension, make money chrome extension, monetize chrome extension, monetize browser extension, browserbill, browser bill, chrome extension monetization, browser extension monetization, monetizing chrome extensions reddit, monetize my chrome extension, chrome extension monetization reddit, chrome extension make money, how to charge for chrome extension, stripe chrome extension, chrome

Id: ti3kksAy8cY

Length: 10min 58sec (658 seconds)

Published: Sun Jul 24 2022