Monkey oil scripts are developed from starter to starter

Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Environment to prepare

The biggest advantage of this site is that there is no need to climb the wall, do not need to pay attention to the public number, you can directly download a variety of commonly used plug-ins, such as ADBlock Plus, Fe-Helper, vue-DevTools and so on

Of course, the bad news is this website f12 to dry, I am not that kind of person, what to prevent 😒

Plug-in installation

Plug-in Management Page

Then drop the downloaded plugin in and click Install confirm

The new script

Script analysis

Based on the newly created script, you can see that comments declared at the beginning with a line comment are parsed by the oil monkey into relevant parameters

We add line comments between // ==UserScript== and // ==/UserScript==, followed by required comments and attribute values. These data are used to define the information of the script. These data are referred to as metadata blocks

The business logic we need to write is recommended after the line comment // ==/UserScript==

Metadata block details

Official Documents (UK)

Some annotations require more than one value, so we can assign a new value on a separate line, as shown in the following example:

// @include http://www.example.com/a
// @include http://www.example.com/b
Copy the code

Annotations that support multiple values include the following:

@exclude
@grant
@include
@match
@require
@resource
Copy the code

@description

Briefly describe what the script can do

@include

The @match annotation now provides similar functionality, but is more secure (meaning the wildcard * is treated more strictly).

@match

Which urls can be matched by this script, which urls will be automatically run; If not specified, it will not run under any site

// @include http://www.example.com/*
// @include http://*
// @include *
Copy the code

@exclude

Exclude urls that do not match in @include or @match

@grant

Oilmonkey provides some advanced apis that cannot be used directly in scripts. You must use the @grant declaration to use the corresponding method

// @grant GM.getValue
// @grant GM.setValue
Copy the code

@icon

Specify the url of an image to display on the script management list page. The recommended size is 32×32

@name

Name of script

@namespace

It is recommended to use your own domain name or your own Git domain name, plus the project name to make the difference. Ensure that the namespace is unique

@noframes

When present, this command restricts the execution of the script. The script will run only in top-level documents, not in nested frameworks. It takes no arguments, and either it exists or it doesn’t. By default, scripts are allowed to run in the framework.

@require

Help us introduce extra js files online, such as my favorite JQ, which manipulates the DOM with a thoha

When we need to introduce multiple JS files are all loaded, will be behind the function body

@resource

Import an external resource and specify a unique alias, then use gm. getResourceUrl(alias) directly to use the defined resource

// @resource resourceName http://www.example.com/example.png
Copy the code

@run-at

Define when the script should run

document-end

This value is used by default to execute scripts when the body of the document is loaded but other resources (CSS, JS, imgage, etc.) are not ready

document-start

The script will run before any documents start loading, and therefore before any scripts run or images load.

document-idle

The script will run after the page and all resources (images, stylesheets, and so on) have loaded and run the page script.

@version

Defines the version information of the script

Advanced API

GM.info

Returns detailed data for the current script, the only method in the GM object that does not require authorization

let info = GM.info();
Copy the code

GM.setValue

Allows user script writers to persist simple values across page loads and origins, with value types limited to numbers, booleans, and strings

GM.setValue('key'.'value');
Copy the code

GM.getValue

This method retrieves a value set with gm. setValue. Will return a Promise object

let val = await GM.getValue('key');
Copy the code

GM.deleteValue

This method removes existing name/value pairs from the store. Return a Promise object marked resolve or Reject, but with no value

let result = await GM.deleteValue('key');  // null
Copy the code

GM.listValues

This method retrieves an array of preference names that this script has stored. Returns a Promise object, parsed to an array of strings

This method could be changed to gm.listkeys (), which is more appropriate

let keys = await GM.listValues();
Copy the code

GM.getResourceUrl

The image resource defined with @resource + variable name can be selected and referenced in a function using this method

// ==UserScript==
// @name Image resource example
// @resource logo .. /icons/laptop.png
// @grant GM.getResourceUrl
// ==/UserScript==

(async function() {
let img = document.createElement("img");
img.src = await GM.getResourceUrl("logo");
document.body.appendChild(img); }) ();Copy the code

GM.notification

Display notifications to users using the notification mechanisms of the underlying browser and operating system

function GM.notification(text, title, image, onclick) {}
// or 
function GM.notification({
    'text': 'str'.'title': 'str'.'image': 'image url',
    onclick: function() {},
    ondone: function() {}}){}
Copy the code

GM.openInTab

Open a new TAB

GM.openInTab("http://www.example.com/");
Copy the code

GM.registerMenuCommand

Allows user scripts to add an item to the user script command menu.

For example, write gm. registerMenuCommand(‘ test title ‘, ()=>console.log(‘123’)) in a script,

/ * * *@param {String} Caption Specifies the title * to display on a menu item@param {function} CommandFunc The function to call * when the user selects this menu item@param {String} AccessKey A single character that can be used to select a command when a menu is opened. It should be a letter in the title. * /
function GM.registerMenuCommand(caption, commandFunc, accessKey) {}
Copy the code

GM.setClipboard

Sets the current contents of the operating system clipboard. The most common practice is to deal with the extra tail that occurs when content is copied on some sites

GM.setClipboard('memo');
Copy the code

GM.xmlHttpRequest

This method performs similar functionality to the standard XMLHttpRequest object, only allowing these requests to cross the same source policy boundary.

Too many parameters are passed, please refer to the documentation

unsafeWindow

This is a built-in instance in the script, equivalent to the Window object of the top-level page accessed by the browser

---

Such a detailed development document, but also to write two scripts to practice? If you really don’t know how to start, just down my automatic check-in script to change is your own good thing ~

Creation is not easy, look forward to your encouragement ❤~