Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Create a Chrome Extension in 90 Seconds


    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.



    Become a Member to view code

    You must be a Pro 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
    orLog In




    Instructor: 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.

    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.

    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.

    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."