Here at Smartson, our business is based entirely on web interactions. Fredrik Westermarck, CTO at Smartson, shares with us how to build a simple browser extension that will help you simplify your digital lifestyle.
- Our campaign producers use a majority of web-based software when we create a sharevertisingcampaign. That's one of the reasons why browser add-ons suits us. Today we'll share with you a simple tool that saves times for us._
How to do itThe application for the extension is a relatively common case; we need to generate a link with a set of parameters where one of the parameters is generated by a predefined algorithm. An example of a similar case that many can identify with, is when you want to track an URL (for example GoogleAnalytics) which allows you to accurately track the source from where a visitor came and from which campaign.
Why did we choose to create a browser extension to Chrome you ask? Well there's a few good reasons for that.
- Our campaign producers are used to the web and the browser, and think of them as a common tool in their work.
- You will find the parameters provided for the URL through your own browser.
- Chrome extensions have a simple software distribution through Chrome Web Store.
- The programming is done in JavaScript, HTML and CSS. They are recognisable technologies and it's easy to adjust if the requirements change and it's quick to implement a new function.
We used Yeoman and Yeomans generator-chrome-extension to get started with developing extensions for Chrome. Yeoman and the generator creates a project for a Chrome extension in no time and adds functionality through the building system Grunt, in order to monitor changes in the code. That way it will automatically update the extension you're developing in Chrome.
Yeoman and its building system Grunt saves time and facilitates a fast paced development because it's quick to install and test the code in Chrome. If you want to use a finished code from a third party, you can easily add the code to the package manager Bower.
So how do you use Yeoman, Bower and Grunt to develop extensions for Chrome? When you have finished installing Yeoman, you use the following command:
yo chrome-extension
After some initial questions about the project, its name and what description you wish to create, it will generate all the files you need to get started.
You then need to enable Chrome in developer mode and also download the extension in Chrome. Follow the instructions How can I set up Chrome for extension development, and then you open a tab and go to chrome://extensions and click on the 'Load unpacked extension'. You will then see the file dialog; select the directory apps for your project.
In order to ease and speed up the development you should let Grunt automatically update the Chrome extension when Grunt discovers that one or more files in the project have changed. This is done by running the command:
grunt watch
When the Chrome extension is done and working you create a file that is redistributable through the Chrome Web Store. You build that extension with the command:
grunt build