We still have Firefox userChrome JS script in the 2020s (introduction, tutorial, resources)

2020-01-19 Firefox userChrome js uc script userChrome script XUL
Share on:

Overview

Today ( 2022 update ) Firefox's userChrome script (uc script, for short) can still be used. We cannot know whether Mozilla will completely kill the uc script in a far or near future. People have been fearing about that in the past two years, but since 57, it is the uc script that make some people (such as me) don’t have (or temporarily not) give up Firefox to switch to another browser. It seems that uc script is still for us ordinary users to use without worries.

I myself don't focus technical things on browsers. I'm just a browser user. This article is not of much profession

Background

In 2017, the "Quantum" version (57) of Firefox was released, discontinuing the support of all old extensions (Addon/Extension, also known as add-ons, different from "plugins"). XUL, XPCOM, XBL and other legacy technology were announced abandoned. Only webExtension is officially supported.

I believe that this change has caused many people to leave Firefox, because the customization and playability have been reduced a lot (for example, the main interface can no longer be changed at will, and extensions can no longer operate the browser about:config, a lot of old extensions are obsolete.

However, the legacy technology has not been completely stripped away. Some people still use userChrome script (uc script for short) to implement some functions that webExtension can not (or temporarily can not) do. Some people even resurrected many 100% functions of Legacy extension through uc script. It can be said that as long as the uc script is still available, the previous Firefox gameplay can continue.

In the niche user group of Firefox, the uc script is even more niche. This article will introduce some resources and some uc scripts written by me, as well as a simple scripting tutorial (if you know js) (I wrote this tutorial not very good, but found no gru is writing about it so far).

userChrome JS script is related to userChrome.css but different from it. The script is JavaScript , not CSS

How to enable uc script

Every time Firefox is updated, the method of enabling uc scripts is likely to change. The following are frequently followed up with changes in Firefox to provide enabling methods:

The method is generally to put some js, xml, css files for enabling into the Firefox program directory and profile, and then you can put your specific .uc.js file in the corresponding location for using.

In addition to the changes on the method to enabe uc script, the uc script code also needs to be updated due to the update of the Firefox version. Frequent updates are more troublesome, so I use Firefox ESR, which is updated about every 9 months.

uc scripts by me

Because I use Firefox ESR, which is updated every six months, the scripts I wrote will only update for ESR.

  1. Tabs at bottom

    Place the tab bar at the bottom of the FIrefox window. Not below the address bar, but below the content of the page, at the bottom of the entire window

  2. about:config menu

    If you need to change a setting in about:config constantly, it's bothering to open then modify. Using this short menu makes everything easy and fast. Add the item you change constantly into the code.

  3. Native external downloader

    Don't have to install addon or use native messenger, we can open external downloader on Firefox's native download ask dialog by a button. Alternative to uget-integrator.

  4. Right click tab close

    Right-click the tab button on the tab bar to close the tab. If you want to bring up the tab menu, hold shift and right-click.

    This can also be used with a only displays the close button on the active tab uc css

  5. Sidebar Switch

    Quickly open and close the sidebar byclick the left edge of the Firefox window (the left side of the screen when maximized) .

    The previous Legacy extension All in One Sidebar (AiOS) has been deprecated, but Firefox officially added the native sidebar, but there is no quick switch function through the edge. Basically the same experience as AiOS is achieved with this simple uc script.

  6. Firefox Task Monitor

    Show bars on each tab button to display CPU and memory usage by the tab. On the right of the tab bar, the CPU and memory of other tasks (extensions, etc.) are displayed.

  7. newtab-btn-menu

    You can right-click on the "plus" button which is for opening new tab, and click opening URL in clipboard in a new tab

More of my scripts and codes are at https://garywill.github.io/

Other people's uc scripts or Firefox legacy technical resources

How to use legacy XUL/XPCOM Firefox extension

Mozilla has officially deleted all extensions created by the old XUL/XPCOM technology, and ca-archive has collected them. You can find the old Firefox 52 esr or 56 to install ca-archive, and then you can browse, download, and install legacy extensions in the browser.

Moreover xiaoxiaoflood/firefox-scripts provides the possibility of enabling legacy extensions to run in new (after 57) Firefox through uc scripts.

A brief tutorial on writing uc scripts

Enabling Browser Tools

To write uc scripts, you need to use the Browser Tools to debug. You can use the mouse to select and inspect any part of the browser's main layout (navigation bar, address bar, tab bar, etc.), and you can also enter and execute the browser-level js code.

The shortcut keys for opening the Browser Tools are Ctrl+Shift+Alt+I。

Note that Browser Tools is different to the toolbox used in web development ( Ctrl+Shift+I ). What we need is one to be able to debug the entire browser, not that one only debugs the webpage in a tab

Browser Tools is disabled by default in Firefox. The way to enable:

  • First open a tab page developer tool ( Ctrl+Shift+I）

  • Three dots in the upper right corner -> Settings

  • Check the following two under Advanced Settings

    • Enable browser chrome and add-on debugging toolboxes

    • Enable remote debugging

Now you can close the web development tools and open the Browser Tools. When opened, a pop-up window will confirm that remote debugging connection is allowed.

Writing code

Those who have learned WebExtension but not Firefox Legacy technology can check out this comparison article

I will not go into many details here, nor will I teach js. I believe my readers know some basic js . Just briefly talk about some common practices. For details, please refer to the reference resources below, and the links to many specific scripts in this article can also be used as examples or turtorial.

The code of the uc script may need to be changed due to the update of the Firefox version

The components, buttons, etc. on the main interface all have DOM nodes, generally have id and class, and you can do some operations on them like you usually use js. Please study it yourself in the browser toolbox.

Some special .uc.js heads

If we open a .uc.js we usually see

1// ==UserScript==
2// @name            <script name>
3// @author          <someone>
4// @include         main
5// @onlyonce
6// ==/UserScript==

Although // lines are comments for JS, but for uc scripts, before a .uc.js file code executed, it looks for and parses the @ (this may vary depending on the uc script manager you use).

@include specifies in what Firefox windows your .uc.js file will be executed. Firefox allow multiple windows (some like download dialogs are also windows). Often, we only need the script to be executed in the main Firefox window (which can be multiple), so use @include main to exclude non-main windows such as download, about, etc. windows.

@onlyonce specifies that the uc.js will only be executed once in a Firefox instance (instead of once for each window opened). For example the code to add a custom widget (i.e. toolbar button) should only be executed once, then that widget will appear in every browser main window, In that case, @onlyonce is needed.

Note: if you use a uc script manager (e.g. xiaoxialflood's), to use @onlyonce or not affects the global object where this uc.js file is loaded and executed (read about targetObj parameter described in this page to get fully know about it).

Standard code modules

It is not enough to manipulate DOM nodes. Some built-in functions of Firefox are best used by calling some internal Standard code modules. For example, we often see

1const xxx = Components.utils.import("resource://xxx/xxx.jsm");
2const xxx = Components.classes["@mozilla.org/xxx/xxx;1"].getService(Components.xxx.xxx);

According to by Mozilla this article , use ChromeUtils.import rather than Components.utils.import

XUL namespace

The XUL namespace is often used in uc. About namespace, there here is an introduction . Common namespaces are

HTML： http://www.w3.org/1999/xhtml
XUL ： http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul
XBL ： http://www.mozilla.org/xbl

Available in script document.createElementNSTo create the elements of XUL namespace, you can also use simplified document.createXULElement. Also in CSSes we often appear

1@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

Manage the namespace of each .uc.js file

When writing uc scripts, it is a good habit to restrict js variables and object names within the namespace, for example, in a .uc.jsIn the file:

1console.log("xxx.uc.js");
2(() => {
3    your code
4})();

In addition to the above methods, you can also create a named Object as your namespace.

Documentation or other reference resources

All articles are original (except for those specially claimed) and copyrighted. Copying without permission is forbidden.

Buy me a coffee

Your donation will be an impetus for me!