Extensions are the most heard word in the world of browsers. What would we do without extensions? There is an extension readily available for every task that you want to accomplish and you never have to get out of your browser for something.
All these are fine but how long are you just going to watch the game? Aren’t you interested to play the game and give a strike for once at least? Yes, I am speaking about creating your own browser extension.
Is it really possible to create your own browser extension without programming knowledge and setting up the required infrastructure? Yes you don’t have to be an expert to create your first extension.
So where do you create your own browser extension?
An online cloud based framework called Crossrider will help you to create your first browser extension.
I have no programming knowledge, can I still do it?
I have provided simple steps here to get your first browser extension up and running in minutes, just follow these steps and I am sure you will pat yourself on the back when it’s done. So let’s get started.
Simple Steps to Create your own Browser Extension
1) Create a free account with Cross Rider by just providing your email id.
2) In My Extensions Dashboard click on Create New Extension button to get started.
3) Provide a cool name to the awesome Extension that you are going to create and describe a little about your extension. You can always change these details later so just click on save and continue button.
4) Now you are all set to code your brand new extension, just click on the start coding button that is displayed on the screen.
5) You will now see an online code editor with three tabs displayed to you. A read me text file, extension.js and background.js
6) Click on extension.js file tab and you will see a simple alert statement written inside the appAPI.ready function()
Replace the alert statement text value with whatever text that you like. For example, the default alert statement was something like this:
alert(“My new Crossrider extension works! The current page is: ” + document.location.href);
and I have changed it to something like this:
alert(“Artic Post says Hello World! The current page is: ” + document.location.href);
7) You have coded enough for the day now to save your changes just press Ctrl+S from your keyboard or alternatively click on the Save & Publish to STAGING button. You are currently in STAGING mode which means the changes you have made so far are not yet released to the rest of the world.
8) Now click on the Sync with Production blue button found on the top of the screen. You will be prompted with a dialog box with lot of options, without making any changes just click on the Sync button. You will be again prompted with a dialog to push you changes to production, click ok.
9) Your changes should have been moved to production and the below popup will be shown to you
10) Now to quickly test your extension Click on Switch to Production button found on the top of the screen.
11) In PRODUCTION mode you will not be able make any changes to your code. You will now see Install PRODUCTION Extn button enabled. Just click on that and you will prompted with a cool installation guide for your newly created extension.
12) I could see a green button in the installation guide to install my extension (see the above image) and you also see one. Now click on that.
13) The extension may be blocked by your browser and will throw you a message stating the extension is from an unreliable source. The unreliable source is just you , so install it from your browser extensions section.
14) That’s it you have completed the mission successfully. Now whenever you open a new tab an alert message will be shown to you with your current page URL.
Congrats You have successfully created your first browser extension.
What else you should know
- If you want to change the Browser Extension Icon, customize browser buttons and create your own thank you page all these can be done from the settings page.
- You don’t have to code the extensions all by yourself there are options to bundle existing readily available plugins into your custom extension, why reinvent the wheel?
- If you want to develop the extensions locally from your computer you could just switch to the debug mode and follow the steps that the online wizard provides you.
- You can actually view the statistics on how many people have installed your extension and in which all browsers its running.
- If your extension is cool and crazy, you can make some money too.