The most annoying Chrome Extension

The hardest part of any new project is just getting started. Whenever a task seems overwhelming the best way forward is to break it into smaller tasks. For programming tasks that means getting started with basic bootstrapping activities, and since they’re the same for every project, they can be pretty easily templated.

With that in mind I wrote this step by step guide to create the most annoying Chrome Extension ever. On roughly half of the pages you load it pops up an image overlay with a close button. You can use whatever image file you have, but I used this SpongeBob image

Use it to quickly get a Chrome Extension project up and running. Once that’s done, you can begin customizing the project to do whatever you want.

Create a project folder directory on your local file system
Add the following sub directories
- images
- scripts
Under the top project directory create the following file
- manifest.json
Under the scripts directory create the following file
- content.js

Copy this text to manifest.json

{
    "manifest_version":3,
    "name": "Project Name",
    "version": "1.0",
    "description": "Your description here",
    "icons":{
        "16": "images/icon-16.png",
        "32": "images/icon-32.png",
        "48": "images/icon-48.png",
        "128": "images/icon-128.png"
    },
    "content_scripts"[
        {
            "js":[scripts/conent.js"],
            "matches":[
                "*://*/*"
            ]
        }
    ],
    "web_accessible_resources":[
        {
            "resources":["/images/*.png", "/images/*.jpg"],
            "matches":["*://*/*"]
        }
     ]
}

Copy this text to content.js

var myz_index = 12000;
let randNum = Math.floor(Math.random() * 10);
imgSrc = chrome.runtime.getURL("images/spongebob.jpg")

window.addEventListener('load', function(){
    if(randNum > 4)
    {
        overDiv(imgSrc, 2);
    }
});

function overDiv(imgSrc, category){
    var overlay = document.createElment('div');
    overlay.id = "ahOverlay";
    overlay.style.position = 'fixed';
    overlay.style.left = '0px';
    overlay.style.right = '0px';
    overlay.filter = "blur(10px)";
    overlay.style.width = window.innerWidth;
    overlay.style.minWidth = '100%';
    overlay.style.minHeight = '100%';
    overlay.style.height = window.innerHeight;
    overlay.style.backgroundColor = 'rgb(255,255,255,0.9)';
    overlay.style.zIndex = myz_index; 
    body = document.getElementByTagName('body');
    document.body.prepend(overlay);
 
    var closeButton = document.createElement('button');
    closeButton.id = "ahCloseButton";
    var getWidth = overlay.clientWidth/2;
    closeButton.setAttribute('style':'left:'+getWidth+'px !important');
    var closeButtonPos = getWidth + 'px';
    closeButton.value = 'Close';
    closeButton.zIndex = myx_index + 1;
    closeButton.backgroundColor = 'green';
    closeButton.setAttribute("style", "background-color:green !important; color: white; padding: 8px; font-size: 1.3rem; margin-left:"+getWidth+"px; margin-top: 50px;");
    closeButton.onclick=function(){
        document.body.removeChild(document.getElementById('ahOverlay'));
    }
    overlay.appendChild(closeButton);
    closeButton.textContent = 'Close';

    var br = document.createElement("br");
    overlay.appendChild(br);

    var ahad = document.createElement("img")
    ahad.id="ahad";
    
    
    margins = getWidth/2;
    ahad.setAttribute("style", "width:"+getWidth+"px;margin-left:"+margins+"px;");
    overlay.appendChild(ahad);
    ahad.minWidth = '80%';
    ahad.src = imgSrc; 
}

Make sure Developer mode is turned on in Chrome (Settings -> Extenstions -> Manage Exstensions -> Developer Mode
Load the extension by clicking the Load Unpacked button at the top of the Manage Extensions screen and selecting your project’s root directory.