[Tools] Create a Chrome Extension

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.

manifest.json:

{
    "name": "Back to Work!!",
    "version": "1.0",
    "manifest_version": 2,
    "content_scripts": [{
        "js": ["inject.js"],
        "matches": [
            "https://twitter.com/*",
            "https://*.reddit.com/*"
        ]
    }]
 }

inject.js:

document.body.innerHTML = `
  Back to Work!!
`

Go to chrome://extensions .

Click "Load unpacked" folder.

Then when you visit twitter, it will show "Back to Work!!" in html.