How to write user script for xbrowser

What is user script

User script is a user-defined JavaScript code, which can run automatically in the process of page loading.

User scripts can enhance the functionality of the original web pages or remove some of the restrictions on the web pages.

User scripts are compact, flexible and easy to use. They can easily expand the browser function.

First user script

As long as you understand some javascript code, you can write user scripts for your browser. Here is the simplest user script.

1
alert('hello');

In order to be compatible with bookmarklet, the following grammar is also legitimate.

1
javascript:alert('hello');

Enter user script management to add a script to your browser (Browser settings>>Browser scripts>>New script)

New script

How to run user scripts

User scripts are automatically executed when the page is loaded by default. Of course, you can set the [user script scope](#User script scope) to determine whether the script takes effect globally or under a specific domain name.

In addition to this, scripts can also be set to be manually triggered by extension points on the browser UI. There are three general extension points: “page tool menu”, “long press menu”, “main menu”.

image-20190730111305012

After setting menu extension point as script execution mode, new menu options are automatically generated as script execution entry in the corresponding menu, as shown in the following figure.

image-20190730113311151image-20190730113712928image-20190730114013643

User script scope

When you set the script to be executed automatically, we can decide whether the script will take effect globally or at a specific site by setting the scope of the user script. The following is the representation of scoping rules.

1
*

Match all sites

1
www.example.com

Match exactly the specific domain name, the script only executes under the www.example.com domain name

1
2
3
example.com
.example.com
*.example.com

Any of the above can be used to match a site whose main domain name is example.com.

1
www.example.com,abc.com,www.youku.com

Match multiple domain names, split by “,”

Meata data

Meta data, which is a descriptive mark placed at the head of the script, is used to describe and set the script. Below are some metadata description keywords supported by the XBrowser.

@name

Used to name the script

@author

Declare the script author

@description

Used to describe the script

@incluide

This tag can have multiple lines to describe the scope of the script.

@match

Similar to the @include tag, there can be multiple lines. Used to describe script scope

@exclude

This tag is used to exclude some domain names and is usually used to tell global scripts not to execute under a specific domain name.

@require

This is also a multi-line tag that specifies that the script needs to reference a third-party library or script.

@run-at

By default, the script will not be executed until the page is loaded. We can use “@run-at” to control the execution time of the script. Refer to the optional values ​​below.

  • document-start Tell the script to execute before building the DOM tree.
  • document-end Tell the script to execute after the DOM tree is built.
  • document-idel Tell the browser script to execute after the page is loaded.

These are the metadata tags currently supported by XBrowser. These tags are compatible with the metadata tags of some tampermonkey scripts. See here
for more details.

Below is an example of a script with metadata that depend on a third-party component, VConsole

1
2
3
4
5
6
7
8
9
10
11
// @name Developer debug tool
// @auth power by vconsole
// @description A lightweight, extendable front-end developer tool for mobile web page. Power by VConsole. Once installed, it will appear in the page tool menu in the top right corner.
// @require https://cdn.jsdelivr.net/npm/vconsole@3.3.0/dist/vconsole.min.js

try {
var vc = new VConsole();
vc.show();
} catch (e) {
mbrowser.showToast("load VConsole failed");
}

Some user script resources

https://www.greasyfork.org

This is currently the world’s largest user script sharing site. The scripts compatible with mobile browsers in the site can be installed directly in the XBrowser.

http://srven.xbext.com/mobile/share_scripts

This is the XBrowser officially maintained user script sharing site, where the scripts are all shared from users. Usually, it is a script suitable for mobile browsers after user testing. It is recommended that users search for the required scripts here.