Skip to content

Install styles from other sites

泷涯 edited this page Dec 22, 2017 · 6 revisions

xStyle does not depend on userstyles.org. You can let users install styles from your own web pages. However, in order not to affect the speed of more pages, currently only allow the URL for https://*.github.io and https://*.gitee.io to guide user installation style. Method three (link method) is not subject to this restriction.

Where the code file is the result of a single style export, md5 file contains the latest version of the originalMd5 text file, id is used to distinguish between different styles (same as the Url in code), please ensure that the style file id is different

Method one: Meta

First, put the basic information of the style into the HTML source in meta. E.g:

<link rel="xstyle-code" href="https://userstyles.org/styles/chrome/130991.json">
<link rel="xstyle-id-url" href="http://userstyles.org/styles/130991">
<link rel="xstyle-md5-url" href="https://update.userstyles.org/130991.md5">

xstyle-code is used to distinguish the style, usually the URL of the style details page, xstyle-md5-url is used to quickly verify that the user has installed the latest version of the style.

After that, place a button that the user clicks to trigger the xstyleInstall event.

If you plan to display multiple styles for a user installation, set the value of xstyle-name and xstyle-code before each event. E.g:

document.querySelector("link[rel='xstyle-name']").setAttribute('href', 'Style Name');
document.querySelector("link[rel='xstyle-code']").setAttribute('href', 'https://userstyles.org/styles/chrome/130991.json');
var newEvent = new CustomEvent('xstyleInstall', {detail: null});
document.dispatchEvent(newEvent);

Method Two: JS

For compatibility reasons, this method is deprecated, please use method one

Method three: links

This method is useful for situations where no HTML permissions are modified, or no JS code is available. You can only install one style for a single request. How to use:

Add the code link to https://ext.firefoxcn.net/xstyle/install/open.html?code=, for example: https://ext.firefoxcn.net/xstyle/install/open.html?code=https://userstyles.org/styles/chrome/130991.json

Then let the user open this link

Clone this wiki locally