About this extension

!! In an attempt to be compatible with image sites that block hot-linking, this add-on requires additional permissions to be able to intercept image requests and set the Referer and Accept headers.

Description
Adds "View Image" context menu item for images, restoring old functionality replaced by the "Open Image in New Tab" official context menu item. Also adds "View Video" and "View Audio", functioning in a similar fashion.

Add-on contains an Options page allowing for configuration of what the various user actions can do. Default actions are:
- Left click opens selected image in the same tab.
- Shift left click opens selected image in a new window.
- Ctrl left click opens selected image in new foreground tab.
- Ctrl+shift left click opens selected image in new background tab.
- Middle click opens selected image in a new background tab.

userChrome.css
!! Here be dragons. userChrome allows a lot of customization of the UI, but is subject to unannounced changes by Mozilla over the course of Firefox releases.

If you want to hide the default "Open Image in New Tab" context menu item and move this add-on's context menu items to a more logical place, the following addition to userChrome.css should do the trick.

Note: Firefox 113 changed how the context menu is rendered. Previously iterations of provided CSS used "-moz-box-ordinal-group" which no longer works, "order" should be used instead.


#context-viewimage,
#context-viewvideo { display: none; }

/* uncomment this if you want to hide a bunch of other somewhat useless menu items
#context-openlinkintab,
#context-openlink,
#context-bookmarklink,
#context-sendimage,
#context-sep-setbackground,
#context-setDesktopBackground,
#context-inspect-a11y { display: none; }
*/

menupopup#contentAreaContextMenu > * { -moz-box-ordinal-group: 100; }

menuitem#context-openlinkintab,
menu#context-openlinkinusercontext-menu,
menuitem#context-openlink,
menuitem#context-openlinkprivate,
menuseparator#context-sep-open,
menuitem#context-bookmarklink,
menuitem#context-savelink,
menuitem#context-copylink,
menuseparator#context-sep-sendlinktodevice { -moz-box-ordinal-group: 30 !important; order: -20 !important; }

/**
* note: using CSS selectors as the full ids are very long:
* _0d20e3ac-ee5b-4db9-bd3f-8ed745f569a7_-menuitem-_view-image-context-menu-item
* _0d20e3ac-ee5b-4db9-bd3f-8ed745f569a7_-menuitem-_view-video-context-menu-item
* _0d20e3ac-ee5b-4db9-bd3f-8ed745f569a7_-menuitem-_view-audio-context-menu-item
*/
menuitem[id*="view-image-context-menu-item"],
menuitem[id*="view-video-context-menu-item"],
menuitem[id*="view-audio-context-menu-item"] { -moz-box-ordinal-group: 50 !important; order: -10 !important; }

menuitem[id*="view-video-context-menu-item"] > .menu-iconic-left { opacity: 0 !important; }
menuitem[id*="view-audio-context-menu-item"] > .menu-iconic-left { opacity: 0 !important; }
menuitem[id*="view-image-context-menu-item"] > .menu-iconic-left { display: none !important; }
/* really old ui: menuitem[id*="view-image-context-menu-item"] > .menu-iconic-left { visibility: hidden !important; } */

Quick step-by-step explanation of how to apply userChrome.css here: https://imgur.com/a/eXnuFci

Note: The way the CSS works is by setting the visual "order" of the menu items in the context menu which is a using display: flex, flex-direction: column. The order is set to -20 to menu items to that should appear before the View Image menu item, order for the View Image menu item is set to -10, and every other menu item is left at order 0. Items are rendered in ascending order, though this does not change their actual order in the html, so arrow key navigation through the menu becomes wierd.

Developer comments

Breakdown of implementation below.

Menu
The context menu items are bound to image and video contexts, and use the menus permission. The menu item implementation is mundane: a listener is bound to the click event handling the menu click and a listener is bound to the on-show event to show or hide the menu items based on options and if the image/video is already opened in the tab. Uses i18n message translation to get menu text. Hotkey is baked into the message text and changes based on browser language ('i' in English)

Normal Actions
For the actions of opening the image/video this extension relies on using:
- tabs.update() - open image/video in same tab
- tabs.create() - open image/video in new tab (background/foreground)
- windows.create() - open image/video in new window
None of those methods require special permission, but there is no way to set the Referer directly in those calls.

Referer
To support setting the Referer header, host access to all domains, along with blocking webrequest permissions is required. What the add-on does is before calling the aforementioned methods is bind a listener on web requests (blocking, request header, filtered to the destination URL) that alters the request header by adding a Referer entry based on the domain extracted from the context menu event page URL.

Accept
The Accept header can also be overriden. It follow the logic of the Referer header. If enabled it requests a more suitable MIME type, depending on the menu item used (image mime types vs video mime types and such). Some websites are sensitive to the Accept header and will serve an HTML page if served Firefox's default Accept header.

Note on loading
I'm not sure how Firefox chooses to use cached images vs fetching them, but I don't see a good way to force to use cached image when viewing the image, instead it always appears to refetch the image. After the initial load for an image by this add-on, Firefox does appear to start using the cached version - not sure why it can't do that right away.

Local images, data: and blob: Urls
Firefox has hefty restrictions on file:// URLs (and data: and blob:), including forbidding setting the current page or opening new pages with such URLs using the standard API. If this add-on detects that the image and the page are both local, it has a separate code path: it will create an anchor tag in the document and click it to navigate to the privileged URL. If it needs to create a new tab/window, it uses tabs.duplicate to create such a new tab/window that is still within the file:// scheme. Sadly that cause a brief reload of the parent page in the new tab/window.

Rate your experience

Report this add-on

Used by