Anna Sedlar

Creating a Chrome Browser Extension

Anna Sedlar | Jul 09, 2018

Chrome Browser Extensions are a quick and easy ways to enhance and extend browser functionality using everyday web languages - HTML, CSS, and Javascript.

This screencast walks through the basics of loading a custom or hand-made extension onto the browser. We'll also create our own distraction-preventing extension that reroutes us back to The Frontier whenever we try to visit Twitter.

For the More Curious...

BNR Guide to Front-End Web Development
Full Stack Courses

Subscribers Only

Transcripts are for subscribers. Create an account today to access our collection of screencasts, skill packs, and more.

Subscribers Only

Project files are only available for subscribers. Create an account today to access our collection of screencasts, skill packs, and more.

Need Help?

If you get stuck, try starting a discussion with Big Nerd Ranch experts in the community tab.

Related Screencasts

Explore other screencasts related to this topic.

Creating a HTML5 Erasing Tool

3 minutes

As a native HTML5 element, canvas is a powerful tool to create engaging, unique web pages. Using just HTML, CSS, and Javascript, we explore a lesser-known property in this screencast called globalCompositeOperation, which allows us to composite new content atop existing content on a Canvas element among many other interesting effects. In this screencast we'll use this property to create a layer-sensitive eraser tool in a drawing app.

Extracting a React Component

8 minutes

Sometimes we don’t realize we should make a custom child component until it’s too late. In this screencast, we'll teach you how to extract a React component from an app.

Load Screens in React

5 minutes

Load screens provide a visual indicator to users that data is being fetched and a useful reminder that the app isn’t frozen. They also can prevent unwanted user interaction with your site. This screencast walks through building a simple load screen in React that will improve user experiences

Lazy Loading Code in React

6 minutes

In this screencast, we're going to look at how to speed up your React app by lazily loading code. By the end of this video, you’ll be able to configure Webpack to let you defer loading code until it’s needed so that your initial page load is as fast as possible.

Minimizing Bundle Size in React

5 minutes

In this screencast, we’ll be looking at how to speed up your React app by shrinking JavaScript bundle sizes. By the end of this screencast you’ll be able to configure Webpack to minimize how much data your users need to download.

HTML5 Drag and Drop

8 minutes

Improve user experiences on your web site by adding drag and drop functionality without any external libraries or frameworks. The Drag and Drop API is part of the core HTML5 spec and allows developers to make their sites more interactive and natural. In this screencast, we'll help you build an HTML5 Drag and Drop tool.