Custom Extensions

Build your own local Chrome extensions to customize your experience visiting web sites and remove annoyances.

This sample walkthrough builds an extension that manipulates the DOM to hide the top and left panels from pages on Wikipedia to allow focus on the page contents.

Steps:

Create a new folder for your extension

Create a file called manifest.json with the following contents:

{
  "name": "wikipedia-focus-mode",
  "version": "1.0",
  "description": "Content-focused Wikipedia",
  "icons": {},
  "permissions": ["https://wikipedia.org/", "activeTab"],
  "content_scripts": [
    {
      "matches": ["https://*.wikipedia.org/*"],
      "js": ["wikipedia.js"]
    }
  ],
  "manifest_version": 2
}

Create a file called wikipedia.js with the following contents:

let els = ["p-personal", "mw-panel"];

els.forEach((el) => {
  let dom_el = document.getElementById(el);
  if (dom_el) {
    dom_el.style.display = "none";
  }
});

Open Chrome Extension Settings
Toggle on Developer Mode
Click Load Unpacked and select the directory for your chrome extension
Browse to a page on Wikipedia, such as wikipedia.org/wiki/SpaceX

For more information about building Chrome Extensions (docs)