Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Create a Chrome Extension in 90 Seconds

    John LindquistJohn Lindquist

    Creating a Chrome extension requires a manifest.json file which defines how your extension will behave. With a minimal setup, you can already manipulate pages and change elements. This lesson walks you through creating a manifest.json file which will essentially "block" twitter and reddit and tell you to get back to work.

    chromeChrome
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:00 Navigate to Chrome extensions. Make sure to enable developer mode. In a directory, create a file called manifest.json. We'll define our JSON with a name. We'll call this backtowork. A version number is also required, so I'll make this 1.0A manifest version is also required, and they are in version 2 there. You can go ahead and load this in. Load unpacked and select the directory. Select, and we have our extension which does absolutely nothing. To make it do something, let's create some content scripts.

    00:37 This is an array of objects. From here, I can load an array of JavaScript files. I just want to load one file called inject.js, so I can create that inject.js and to say document body enter HTML. We'll set that to an H1 of "back to work." Then, it's also required to say where I should inject this JavaScript file.

    01:02 You define that in matches, which is another array. These are strings of URLs. I'm going to say twitter.com and any path, as well as reddit, and any subdomains, reddit.com, and any path. Let's save here and reload my extension.

    01:24 If I navigate to Twitter, it tries to load, but then fires to backtowork. If I try and go to reddit, you'll see it loads and says "back to work."

    Discuss

    Discuss