A Chrome Extension consist of 5 crucial components
It contains all the required setup and structure to build an extension, and besides that you also have the possibility to add axios, vue-router, vuex and a Mozilla polyfill during the installation process.How to
To get up and running you will have to have the Vue CLI installed and then you just have to run the following command…
vue init kocal/vue-web-extension [NAME OF YOUR EXTENSION]
The following process looks something like this:The result
After the installation you will be presented with a folder structure like this:
Then you will have to go to the extensions page in Chrome, enable developer mode, click
Load unpacked and select the
dist folder in your extension like I did in the screenshot below. Now you can start building!
As I’m working as a Frontend Developer consultant I have to track all the time I use on projects which has to be registered in Jira. But since Jira doesn’t offer the best time tracking features I use Toggl for the actual time tracking.
After getting tired of moving entries manually to Jira I started to look for tools that could help me sync these, but unfortunately they all come at a pretty high price, and the free ones didn’t work as I wanted them to.
Since I couldn’t find a suitable tool I jumped into building my own extension with the process and tools mentioned above. It was important for me that the extension also looked nice and since Google uses Material design in Chrome it made sense for me to add Vue Material as well. It’s built with Vue.js and contains Material designed Vue components for e.g. inputs, datepicker, buttons and so on.The obstacle and the solution
The extension uses the Toggl and Jira REST API’s which means that all API calls has to be authenticated. This would normally mean that when a user installs the extension, they would have to set up auth tokens and other security measures which can be kind of a hassle for a normal user - especially if they aren’t the admin of the Jira account.
But since we are working with a Chrome extension we have access to browser wide cookies. This means, that if you have recently logged into Jira and Toggl we are automatically authenticated to use the API’S. If not, the user just have to log in again to re-authenticate. This procedure would not be possible with a normal web app since they can’t access these cookies.How does it look?
The extension pop-up
Settings page of the extensionAll in all
Chrome extensions are great tools for adding extra functionality to your browser or solve a specific issue. With Vue.js and the boilerplate it also got a lot easier to get started. With regards to my extension I think it turned out pretty well and it does exactly what I needed it to.
I created it as an Open-Source project on Github where developers are more than welcome to contribute with bug fixes and new features or just get inspired on how to build their own extension.
Chrome App Store: https://tinyurl.com/y4pj9por
I hope this short read will help you get started building your own extensions🤘
Essentially I want to have a script execute when the contents of a <code>DIV</code> change. Since the scripts are separate (content script in the Chrome extension & webpage script), I need a way simply observe changes in DOM state. I could set up polling but that seems sloppy.
Essentially I want to have a script execute when the contents of a
DIV change. Since the scripts are separate (content script in the Chrome extension & webpage script), I need a way simply observe changes in DOM state. I could set up polling but that seems sloppy.