If you know Javascript and want to be able to customize how a website looks every time you visit it, you can create a chrome extension and have it handy in your chrome bar. Some use cases could be to make the font bigger, remove elements, change apperiance, change how the website works, add stuff, disable stuff, etc.

It is easier than you think, just follow this tutorial for creating an extension that uses manifest version 3. In this example we will use javascript to attach some CSS to a website in one click.

1. Add a new folder on your machine and create these 3 files inside it:

manifest.json – Will contain the info that tells Chrome how to handle your extension
backgroud.js – Will inject your script into the website loaded in current chrome tab
injectedscript.js – Will contain the script to inject

2. Add this code to your manifest.json file:

{
    "name": "Extension Name",
    "version": "1.0.0",
    "description": "This makes the font bigger",
    "manifest_version": 3,
    "action": {},
    "background":{"service_worker": "background.js"},
    "permissions": ["activeTab", "scripting"]
}

3. Now add this code to your background.js file:

chrome.action.onClicked.addListener(() => {
  chrome.tabs.query({active: true, currentWindow: true}).then(([tab]) => {
    chrome.scripting.executeScript({
      target: {tabId: tab.id},
      files: ['injectedscript.js'],
    });
  });
});

 

4. Now your injectedscript.js file and create your custom script. To begin with, lets just add and alert to test the extension:

alert("hello world")

5. Dont forget to save all 3 files. Now Open the manege extensions section in chrome and enable Developer mode on the top-right of the page.

6. Click on the “Load unpacked” button on the top-left and look for the directory you created. You should see the extension card added with what ever name you gave it. The extension icon will also be either on your chrome navigation bar or inside the puzzle icon. Open any website (because it won’t work inside the extensions page) and click your extension… you should get a “hello world” alert.

7. Go back to your injectedscript.js file and add some neat JS code of your own creation. Here is mine to make the font bigger by adding CSS to the header by using JavaScript:

var style = document.createElement('style');
style.innerHTML = '*{ font-size: 25px !important; }';
document.head.appendChild(style);

8. Save your file and go back to the chrome extensions page. Click on the reload icon inside your extension’s card. Try it again on any website. Keep changing your js, saving and reloading the extension as needed until youre happy with your script.

 

Now that your extension is working, you’ll notice it will change all websites. You can customize a list of websites where the extension is active by adding this line to you manifest.json file:

{ 
"name": "Extension Name", 
"version": "1.0.0", 
"description": "This makes the font bigger", 
"manifest_version": 3, 
"action": {}, 
"background":{"service_worker": "background.js"}, 
"permissions": ["activeTab", "scripting"] },
"host_permissions": ["*://*.google.com/*", "*://*.gmail.com/*" ]
}

Notice that you can use the wildcard * for any protocol, subdomain, domain, high level domain or path.

You can then modify this further to have diferent scripts depending on the url path by adding rules in background.js:

chrome.action.onClicked.addListener(
  function (tabId, changeInfo, tab) { if (changeInfo.status == 'complete') {
     chrome.tabs.query({active: true, currentWindow: true}).then(([tab]) => {
        var url = new URL(tab.url);
        if(url.pathname == "/path/site1.html"){
           chrome.scripting.executeScript({
               target: {tabId: tab.id},
               files: ['injectedscript.js'],
           });
        }
        if(url.pathname == "/path/site2.html"){
           chrome.scripting.executeScript({ 
               target: {tabId: tab.id}, 
               files: ['injectedscript2.js'],
           });
        }
     }); 
  }
});

 

Now say that your custom script needs to access an image, sound, ccs file, etc. This accesed files need to be inside the extension folder that you created, and declared in the manifest.json file:

{ 
"name": "Extension Name", 
"version": "1.0.0", 
"description": "This makes the font bigger", 
"manifest_version": 3, 
"action": {}, 
"background":{"service_worker": "background.js"}, 
"permissions": ["activeTab", "scripting"] },
"host_permissions": ["*://*.google.com/*", "*://*.gmail.com/*" ],
"web_accessible_resources": [{"resources": ["logo.png"],"matches": ["<all_urls>"]}]
}

Here, we are adding a file logo.jpg to the root directory of your extension. Then in your injected javascript you can get the file’s url by using this line:

var logourl = chrome.runtime.getURL("logo.png");

Thats it, use the resource file as you wish within your injected javascript.

There is a lot you can do from here like add icons, names, popup menus, data handling and saving and validations that we wont cover here (some Googleing will get you set), but this is a good starting point if you just need a quick personal extension to modify how a website looks or operates, you can even make Bing search in Google! 🙂