Tampermonkey Learn Guide

The Tampermonkey Learn Guide is a Chinese-language tutorial designed to help beginners learn Tampermonkey (Userscript) development from scratch, moving from basic concepts to advanced techniques.

Online version: https://learn.scriptcat.org

A hook (also known as 劫持 or hijacking) is a technique used in Tampermonkey scripts to intercept function calls. By replacing an existing method with your own custom function, you can control the execution flow. This allows you to:

1. Modify arguments before they reach the original function.
2. Change the return value of the original function.
3. Prevent the original function from running entirely by implementing your own logic.

This concept is conceptually similar to Middleware in web backend development or a Man-in-the-Middle (MITM) attack in network security.

The value of this changes depending on how a function is invoked:

1. Object Methods: When a function is called as a method of an object, this refers to the object itself.

   var testThis = {
     showThis: function () {
       console.log(this); // 'this' is testThis
     },
   };
   testThis.showThis();

2. Standalone Functions: When a function is called directly (not as a method), this defaults to the window object.

   function getThis() {
     console.log(this); // 'this' is window
   }
   getThis();

var testThis = {
  showThis: function () {
    console.log("我的this是对象", this);
  },
};
testThis.showThis();

function getThis() {
  console.log(this);
}
getThis();

When working with a Vue3 component instance (often accessed via this in mixins), internal data is stored under the _ property. Use the following mapping to find common data locations:

Modifying Data:

• setupState: Since these are typically ref objects, modify them by setting the .value property (e.g., instance.setupState.message.value = 'new value').
• props: To trigger reactivity, you must replace the top-level object rather than a sub-property (e.g., instance.props.info = { ...instance.props.info, title: '123' };).

How you access the contents of a Shadow DOM depends on the mode used during creation:

1. open mode: You can access the shadow root directly from the host element using the .shadowRoot property.
2. closed mode: The .shadowRoot property on the host element will return null. You can only interact with the shadow DOM if you have saved the reference returned by the initial attachShadow() call.

// If mode was 'open'
console.log(document.querySelector(".wrap").shadowRoot.innerHTML);

// If mode was 'closed'
// document.querySelector(".wrap").shadowRoot is null
// You must use the original reference:
console.log(savedShadowReference.innerHTML);

When developing Tampermonkey scripts, do not attempt to build complex, general-purpose tools from scratch if they already exist. Using established libraries saves time and reduces complexity.

Recommended alternatives for common tasks:

• DOM Manipulation/Shortcuts: Use jQuery.
• DOM Listening: Refer to cxxjackie's library.
• XHR/Ajax Interception: Use the ajaxhook library.

Vue components often interact with a global state tree using Vuex. This allows components to access and modify shared data.

Accessing State via mapState

Components use mapState to map global state properties to local component properties, shortening the code. For example, mapState('visitUserInfo', ['isTaskUser']) allows the component to use this.isTaskUser instead of this. $store.state.visitUserInfo.isTaskUser.

Modifying State via commit

To change the state, components call this.$store.commit(mutationType, payload). This triggers a mutation function that updates the state tree.

Accessing State via mapGetters

mapGetters is used to map computed properties from the Vuex store to the component, such as permission checks (e.g., canCopy).

The package.json file serves as the manifest for your project, declaring dependencies and basic metadata. Key fields include:

• name: The name of the package.
• version: The current version of the package.
• description: A description of the package.
• main: The entry point file (e.g., index.js). This file is automatically loaded when using require().
• scripts: Custom command definitions for running tasks (e.g., tests).
• author: The author's name.
• license: The open-source license (e.g., ISC).

{
  "name": "pack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Every function call is essentially an implicit use of call.

• A standalone function call getThis() is equivalent to getThis.call(window).
• An object method call testThis.showThis() is equivalent to showThis.call(testThis), where the engine automatically sets this to the object preceding the dot.

Anonymous functions defined within a local scope are difficult to hook because they are not accessible via the window object or any global reference.

Workarounds:

• Rewrite the parent function: If the anonymous function is inside a named function, you can rewrite the entire parent function.
• Indirect Hooking (Curveball approach): Hook a fundamental API that the anonymous function calls (e.g., console.log or document.querySelector) to influence the logic indirectly.

Warning: Indirectly hooking fundamental APIs can cause significant performance degradation and side effects (pollution) across the entire page. Use this only as a last resort.