Writing Your First Tampermonkey Script Without Making It Painful

If you have used Tampermonkey before, you probably know how magical it can feel. For students, programmers, and anyone who spends too much time in front of a browser, it is one of those tools that can quietly solve all kinds of annoying little problems. The only catch is that Tampermonkey scripts are written in JavaScript. And the moment JavaScript is mentioned, beginners often freeze: “I haven’t learned JS. How am I supposed to write a script easily?”

It is not as scary as it sounds. A very simple userscript can be put together as long as you know what you want it to do and can identify the elements on the page. Let’s use a small real example: adding a one-click evaluation button to a school educational administration system. The target page is:

http://218.197.101.69:8080/index

The page is straightforward enough: in the teaching evaluation module, there are multiple options, and in most cases the desired option is “very good.” So the script’s job is simple too: add a button, and when the button is clicked, automatically select every “A、非常好” option on the current teacher evaluation page.

What to prepare first

Before writing anything, prepare an editor. Technically, even Notepad can work, but it is better to use something with syntax highlighting, indentation, and basic code hints. That makes it much easier to see what you are writing and avoid obvious mistakes.

Then confirm the page where the script should run. Tampermonkey does not need to inject the script everywhere; it only needs to work on the matching evaluation page. That matching rule is configured in the script header.

The userscript header

Every Tampermonkey script starts with a metadata block. It tells Tampermonkey the script name, version, description, author, and most importantly, where the script should take effect.

// ==UserScript==
// @name          教务系统一键评教
// @namespace     https://willow-god.gitee.io/
// @version       1.0.3
// @description  打开教务系统，随便打开一个老师的评价页面，点击后会自动全选非常好选项
// @author       liushen
// @include      *://218.197.101.69:8080/edu/task/evaluate/*
// @include      *://218.197.101.69:8080/edu/task/evaluate/*
// ==/UserScript==

Most fields here are easy to understand: @name is the script name, @version is the version, and @description explains what the script does.

The key part is @include. It controls which website or route the script applies to. The * means “anything can match here,” so you can adjust the address according to your own target page. In this example, the script is meant to run on the evaluation pages under:

*://218.197.101.69:8080/edu/task/evaluate/*

Creating the button

Next, create a button that will appear on the page. This button is what the user clicks to trigger the automatic selection.

"use strict";
var button = document.createElement("button"); //创建一个按钮
button.textContent = "一键评教"; //按钮内容
button.style.width = "90px"; //按钮宽度
button.style.height = "30px"; //按钮高度
button.style.align = "center"; //文本居中
button.style.color = "white"; //按钮文字颜色
button.style.background = "#13bbb3"; //按钮底色
button.style.border = "1px solid #e33e33"; //边框属性
button.style.borderRadius = "4px"; //按钮四个角弧度

The first line, "use strict";, enables JavaScript strict mode. You do not need to fully understand it before writing this small script; just know that it makes JavaScript behave in a stricter and more standardized way.

The rest is easier to read. document.createElement("button") creates a new button element, and the following lines set its text, size, color, background, border, and rounded corners. These style settings are not the core of the script, but they make the button look more like something intentionally placed on the page.

Making the button do something

Now comes the important part: the click response. When the button is clicked, the script searches the page, finds all matching “A、非常好” items, clicks them, and then clicks the existing page buttons to proceed.

button.addEventListener("click", () => {
  ousetTimet(() => {
    // Find all instances of "非常好"
    const elements = document.querySelectorAll("span");

    // Click each element that contains "非常好"
    elements.forEach(element => {
      if (element.innerText === "A、非常好") {
        element.click();
        console.log(element);
      }
    });
    setTimeout(() => {
      document.querySelector(".btns-r").children[1].click();
    }, 100); //等待0.1秒后再退出
    document.querySelector(".btns-r").children[0].click();
  }, 100); // 等待 0.1 秒钟再执行评教操作
});

The first line uses button.addEventListener("click", () => { ... }). This is a standard event listener: it listens for a click on the button, and once the click happens, it runs the code inside.

The setTimeout(() => {}, milliseconds) pattern is used to delay an action slightly. In this case, the idea is to give the page a little time to refresh or respond before the next operation runs.

For this particular website, the “very good” options have slightly different data-code values, which makes it less convenient to select them using that attribute. So the script chooses a simpler approach: search by visible text.

This line collects all span elements on the page:

const elements = document.querySelectorAll("span");

If you are not sure which tag the target content uses, you can right-click the page, inspect the element, and check the HTML structure yourself. If you really do not know where to start, document.querySelectorAll('*') can collect everything, though that is much broader and less precise.

After collecting the elements, the script loops through them. Whenever it finds an element whose text is exactly A、非常好, it clicks that element:

elements.forEach(element => {
  if (element.innerText === "A、非常好") {
    element.click();
    console.log(element);
  }
});

The console.log(element); line is there for checking what was clicked. If you open the browser console, you can see the matching elements being printed, which is helpful when debugging.

Adding the button to the page

Creating a button in JavaScript is not enough. It also has to be inserted into the page, otherwise it only exists in memory and you will not see it.

var bar = document.getElementsByClassName("btns-r")[0]; //getElementsByClassName 返回的是数组，所以要用[] 下标
bar.appendChild(button); //把按钮加入到 x 的子节点中

Here, the goal is to place the new button in the top button area of the page. That area uses the class name btns-r, so document.getElementsByClassName("btns-r") is used to get it.

One small detail matters here: getElementsByClassName returns a collection, not a single element. That is why [0] is added at the end. It takes the first matching element from the collection.

Finally, bar.appendChild(button); inserts the newly created button into that button bar. After that, the page will show an extra “一键评教” button, and clicking it will run the automatic evaluation selection logic.

For a first Tampermonkey script, this is already enough to understand the basic workflow: decide what page to target, create your own control, find the elements you want to operate on, simulate clicks, and insert your control into the page. Once this pattern is clear, many small browser automation ideas become much easier to implement.