Skip to content

Instantly share code, notes, and snippets.

@arantius
Last active May 5, 2026 00:45
Show Gist options
  • Select an option

  • Save arantius/83ceaed33c6957e8a7eeb76373594fb7 to your computer and use it in GitHub Desktop.

Select an option

Save arantius/83ceaed33c6957e8a7eeb76373594fb7 to your computer and use it in GitHub Desktop.
Mouseover Popup Image Viewer: Custom Host Rules

Core Entries

These entries define when and where a rule is active.

d

Domain: This rule will be active only when the location.hostname (i.e. the domain) of the current page contains this substring.

e

Element: A string CSS selector. HTML elements matching this selector can trigger this rule, even elements besides A and IMG (as used by default). For example, because a site uses let's say LI elements with CSS backgrounds as thumbnails.

Keep in mind that even so r will only be applied on href and src attributes. That means if the matching element lacks href and src attributes, you need to set html.

Can also be used as an elegant alternative to r: {"e":"a.avatar", "s":"/small/large/"}.

html

html: A boolean, default false. When true, the regular expression (r) should be evaluated against the target element's full HTML structure.

manual

manual: A boolean, default false. When true, disables automatic hover activation of this rule. (Rule will only be triggered while holding Ctrl.)

name

A label for the rule used for organization and identification in the configuration menu.

r

Regex: The primary regular expression used to match a target. Applies to: The src or href of the target element. Edge Case: If html is enabled, this matches against the element's innerHTML instead of its URL.

u

URL Check: A fast, preliminary string check used to filter target URLs. Applies to: The src or href of the target element. Behavior: If the target URL does not contain this string, the rule is skipped immediately. Supports AdBlock-style syntax: leading || for domain/subdomain matching, leading | for the start of a URL, and ^ as a part separator. Array capable: specify a single value, or an array of values. The first good value is used (skipping regular expressions that don't match).

TODO: Cover special syntax, at least leading | and leading ||. TODO: Arrays are supported?

Transformation & Retrieval

These entries define how to generate the full-sized media URL.

follow

Boolean, default false. When true, restarts rule evaluation with the result of a q or s as the input. This comes in handy for sites that don't host images themselves. If neither q nor s exists, MPIV will follow all HTTP redirections (Location header) and restart evaluation with the last URL requested. Rules with [html](#html)=true will be skipped during re-evaluation if the new input URL was taken from a different page.

s

Substitution: Defines the output URL by modifying the match from r.
Applies to: The resulting remote page or media URL. Array capable: specify a single value, or an array of values. The first successful value is used.

Function format

Specify the body of a javascript function.
Variable m is available: array, the matched groups from r. Variable node is available: the HTML element that triggered the popup. Return a string URL, an array of string URLs, or false.

Gallery format

The literal string "gallery", makes the g gallery selector target the current page.

Regular expression format

Specify, wrapped in forward slashes e.g. /find/replace/ to apply this regular expression and replacement in a format like one would use for vim or sed.

Substitution format

When for example "r": "http://www.example.com/(image).jpg" specify dollar-positional substitutions in a string such as "s": "http://www.example.com/$1-large.jpg".

Remote Data Extraction

Used when the final image is not a simple URL rewrite but is hidden on a separate page.

c

Caption: Extracts descriptive text for the popup.

Function format

Specify the body of a javascript function.
Variable doc is available: the DOM tree of the remote page. Variable node is available: the HTML element that triggered the popup (in the local page). Variable text is available: the raw HTTP response or source code of the remote page.

Selector format

A string CSS selector: identifies the full-size media element. E.g. the primary IMG on the page which this A links to.

q

Query Selector: Searches a document for the final media URL. Context: Applies to the remote page fetched via the URL in s (or the current page if s is absent). Behavior: Can be a CSS selector or a secondary regex used to find the "true" image link within a gallery or landing page.

Function format

Specify the body of a javascript function.
Variable doc is available: the DOM tree of the remote page. Variable node is available: the HTML element that triggered the popup (in the local page). Variable text is available: the raw HTTP response or source code of the remote page.

Selector format

A string CSS selector: identifies the full-size media element. E.g. the primary IMG on the page which this A links to.

Galleries

TODO! For now see tophf/mpiv#25 (comment)

The g Gallery entry allows specifying a slideshow or gallery, made up of several images. It is complex enough to get its own section.

Advanced Entries

css

Use property "css" to apply CSS styling to the page in case the rule gets chosen.

{"e":"a.user-profile", "q":"#user-pic", "css":"#user-hovercard { display:none; }"}

rect

A string CSS selector.

A few sites clip their thumbnails by putting them in containers smaller than the thumbnails themselves. As a result, MPIV's popup stays open longer than you would expect because your mouse cursor hasn't left the invisible part of the thumbnail yet. If you encounter a situation like this, write a CSS selector in property "rect" to guide MPIV to an ancestor node whose bounding rectangle makes more sense to you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment