Tips for Writing Browser Scripts

Sometimes you’ll find that the website you are viewing is displaying ads; or some styles you don’t like; or it’s displaying error messages that hide contents.

Here are some tips for fixing them.

The tool

The main tool we use is tampermonkey.

Click the download area for installation. for example, the chrome version is accessible via this link. download tampermonkey

The steps

Once you have installed it, pin it in the menu. pin it

The demo website we use is nakae-mitsuki.net/information.

this site have an error in the main page in the time of writing this post:

alt text

(I enabled auto-translate so you will see english text instead. but the error is english anyway.)

We can dig one more step here:

the error

Category Order could not understand your category HTML. Please do the following:

Disable all plugins except for category order to see if some other plugin is causing the problem. If the problem goes away, re-enable each plugin until you find the incompatible one.
Try switching to a different theme, like the WordPress default theme.
Once you have tried the above steps, email david@coppit.org with the results of these debugging steps. Also include the following information:

Original HTML:
<li class="cat-item cat-item-3"><a href="https://nakae-mitsuki.net/information/?cat=3" >Notice</a>
</li>
<li class="cat-item cat-item-1"><a href="https://nakae-mitsuki.net/information/?cat=1" >Other</a>
</li>
<li class="cat-item cat-item-6"><a href="https://nakae-mitsuki.net/information/?cat=6" >Event information</a>
</li>
<li class="cat-item cat-item-5"><a href="https://nakae-mitsuki.net/information/?cat=5" >Live information</a>
</li>
<li class="cat-item cat-item-7"><a href="https://nakae-mitsuki.net/information/?cat=7" >Work information</a>
</li>
<li class="cat-item cat-item-4"><a href="https://nakae-mitsuki.net/information/?cat=4" >Participation/appearance information</a>
</li>

Processed HTML:
<li class="cat-item cat-item-3"><a href="https://nakae-mitsuki.net/information/?cat=3" >Notice</a>
</li>
<li class="cat-item cat-item-1"><a href="https://nakae-mitsuki.net/information/?cat=1" >Other</a>
</li>
<li class="cat-item cat-item-6"><a href="https://nakae-mitsuki.net/information/?cat=6" >Event information</a>
</li>
<li class="cat-item cat-item-5"><a href="https://nakae-mitsuki.net/information/?cat=5" >Live information</a>
</li>
<li class="cat-item cat-item-7"><a href="https://nakae-mitsuki.net/information/?cat=7" >Work information</a>
</li>
<li class="cat-item cat-item-4"><a href="https://nakae-mitsuki.net/information/?cat=4" >Participation/appearance information</a>
</li>

Category pattern:
/http\:\/\/nakae-mitsuki\.net\/information\/\?cat\=(\d+)/

Items:
Array
(
    [0] => <li class="cat-item cat-item-3"><a href="https://nakae-mitsuki.net/information/?cat=3" >Notice</a> </li>
    [1] => <li class="cat-item cat-item-1"><a href="https://nakae-mitsuki.net/information/?cat=1" >Other</a> </li>
    [2] => <li class="cat-item cat-item-6"><a href="https://nakae-mitsuki.net/information/?cat=6" >Event information</a> </li>
    [3] => <li class="cat-item cat-item-5"><a href="https://nakae-mitsuki.net/information/?cat=5" >Live information</a> </li>
    [4] => <li class="cat-item cat-item-7"><a href="https://nakae-mitsuki.net/information/?cat=7" >Work information</a> </li>
    [5] => <li class="cat-item cat-item-4"><a href="https://nakae-mitsuki.net/information/?cat=4" >Participation/appearance information</a> </li>
)

(the collapse is added via this extension by the way.)

Search for it, you can find that it’s a wordpress extension

Since this seems a misconfiguration on the server, there is not much we can do here. but at least we can hide them.

write the script

Then, on encountering a faulty website, click “create new script”: alt text

change the script name to the website name, then change the url to end with **:

alt text

Usually we can add GM_addStyle in the @grant section, but in this case, it’s not used.

Then, use Ctrl+Shift+C to open dev tools, and locate the error:

we can see this block has only a class="list01". so writing javascript is needed to locate this element.

the main functions we use is: window.addEventListener, setInterval, and document.querySelectorAll.

First check the selector in the console; the element can be found at document.querySelectorAll("ul.list01")[1].

assign a display = "none" to this element, and wrap it in a setInterval inside window.addEventListener. then we are done.

here is the full script:

// ==UserScript==
// @name         nakae-mitsuki.net
// @namespace    http://tampermonkey.net/
// @version      2025-03-23
// @description  try to take over the world!
// @author       You
// @match        https://nakae-mitsuki.net/**
// @icon         https://www.google.com/s2/favicons?sz=64&domain=nakae-mitsuki.net
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    GM_addStyle(`
    `);

    window.addEventListener("load", function() {
        setInterval(() => {
        document.querySelectorAll("ul.list01")[1].style.display = "none"
        }, 1000);
    });
})();

Another demo

This demo use the GM_addStyle function.

In this case, the website is this site. We can see it’s displaying wordpress banners:

Again, use dev tools to locate the element, and use either stylesheet or script to remove them. In this case, we can just use stylesheet since the element has unique ID or class name.

here is the script:

// ==UserScript==
// @name         wordpress.com
// @namespace    http://tampermonkey.net/
// @version      2025-03-23
// @description  try to take over the world!
// @author       You
// @match        https://*.wordpress.com/**
// @icon         https://www.google.com/s2/favicons?sz=64&domain=wordpress.com
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    GM_addStyle(`
    #marketingbar {
    display: none !important;
    }
    div.widget_eu_cookie_law_widget {
    display: none !important;
    }
    `);
})();