No Images? Click here

Build a Chrome Extension with Vue

Browser extensions are small programs that can modify and enhance the functionality of a web browser. They can be used for a variety of tasks, such as blocking ads, managing passwords, organizing tabs, altering the look and behavior of web pages, and much more.

The good news is that browser extensions aren’t difficult to write. They can be created using the web technologies you’re already familiar with—HTML, CSS and JavaScript—just like a regular web page. However, unlike regular web pages, extensions have access to a number of browser-specific APIs, and this is where the fun begins.

In How to Build a Chrome Extension with Vue, you'll learn how to build a simple extension for Chrome, which alters the behavior of the new tab page. For the JavaScript part of the extension, we'll be using the Vue.js framework, as it will allow us to get up and running quicklyand is a lot of fun to work with.

You'll build a simple extension that works when a user opens a new tab. It grabs a dad joke from icanhazdadjoke, displays it in a nicely-formatted page, and then gives users the options to favorite the joke, storing any favorited jokes in chrome.storage, and view their list of favorited jokes.

How to Build a Chrome Extension with Vue

James Hibbard will show you easy it is to create a simple Chrome extension with Vue using the the vue-web-extension boilerplate. You'll also learn how to upload an extension to the Web Store and everything that involves.

Start your subscription today and you'll get access to this book, plus 300+ other web design and development books in SitePoint Premium!

Until next time,
James at SitePoint