User Scripts & Bookmarklets

This is a Premium-only feature, available for purchase within the app. Each Premium feature can be activated forever with a one-time purchase (no subscriptions).

Run your own custom User Scripts or Bookmarklets on any page, or pick from our own innovative features that are built entirely as User Scripts.

Configure User Scripts to Run Automatically

User Scripts can be configured to run automatically each time a page is loaded. Each User Script must have a file extension of .user.js or .user.es.

1. Launch your Hermit Lite App.
2. Tap on the icon to reveal the “Quick Settings” sidebar.
3. Tap on “User Scripts”
4. Toggle the checkbox next to each UserScript.

Run Bookmarklets via Quick Settings

Bookmarklets are launched each time you click a button, but should not be run automatically each time a page is loaded. Bookmarklets must have a file extension of .js or .es (but not .user.js or .user.es).

1. Launch your Hermit Lite App.
2. Tap on the icon to reveal the “Quick Settings” sidebar.
3. Tap on “User Scripts”
4. Select the Bookmarklet to run on the current page. (There will be no check box displayed next to a Bookmarket in Quick Settings.)

No Encoding, No Squishing onto a Single Line

Traditional bookmarklets, because they can only be accessed via the bookmarks menu, needed to be encoded and squished onto a single line. Not so with Hermit: you can use as many lines as you want, then save as a .js file.

User Script and Bookmarklet Library

For your convenience, Hermit comes with a library of User Scripts built in. Simply pick one from our pre-created User Scripts or Bookmarklets.

1. Launch the Hermit main app.
2. Press the icon in the toolbar (either at the top or bottom, depending on how you have configured it.)
3. Tap on “User Scripts”
4. Tap on “Add” –> “Library”
5. Select any User Script or Bookmarklet, and tap the button.

Create Your Own

UserScript definitions are shared across all Lite Apps, but they can be enabled independently for each Lite App. If you make changes to the source code of any UserScript, the changes apply across all Lite Apps that use that UserScript.

1. Launch the Hermit main app.
2. Press the icon in the toolbar (either at the top or bottom, depending on how you have configured it.)
3. Scroll down to User Scripts.
4. To add a new UserScript, press the button.
5. Pick a name, paste the content as JavaScript, and save.
6. To edit existing User Scripts, tap on the name, update the content, and tap Save.

Newly-added User Scripts will be available in all Lite Apps after the Lite App is re-launched.

Differences from Other Engines

On desktop browsers, there are multiple engines available to run User Scripts (GreaseMonkey, TamperMonkey, ViolentMonkey, etc.) Each engine supports a different subset of features & offers slightly different APIs.

For security & privacy reasons, Hermit does not support the @grant, @require, or @resource tags that can run unverified JavaScript and compromise your privacy. All the code necessary for the UserScript to run must be included in the UserScript source file directly.

Alternative to @grant

To make your scripts truly portable, use a polyfill such as gm4-polyfill to extend compatibility.

Alternative to @require

Use a bundling tool such as Webpack to combine all relevant JavaScript dependencies into a single file.

Alternative to @resource

Use resources inline directly instead of creating a @resource definition for it.

Content Security Policies

Android WebView (based on Chromium) does not correctly follow the W3C spec for Content Security Policies, so User Scripts may not run correctly on certain sites. The W3C spec clearly says that:

Policy enforced on a resource SHOULD NOT interfere with the operation of user-agent features like addons, extensions, or bookmarklets. These kinds of features generally advance the user’s priority over page authors, as espoused in [HTML-DESIGN].

Please complain to Google by starring or commenting on this 5-year old bug.

Samples

Insert Custom CSS

// ==UserScript==
// @name Paint It Red!
// ==/UserScript==

(function() {
  const style = document.createElement("style");
  style.textContent = "h1 { background-color: red; }";
  document.head.appendChild(style);
})();

Use Custom Fonts

// ==UserScript==
// @name Custom Fonts
// ==/UserScript==

(function() {
  const style = document.createElement("style");
  style.textContent = "font-family: 'Inter' !important; font-size: 1rem; line-height: 1.25rem";
  document.head.appendChild(style);
})();