Web Browser/Resource overriding

Resource overriding allows for a level of customization of web sites that is not achievable by user scripts, since user scripts are executed only in addition to a web page's resources, whereas resource overrides replace existing resources from the server with a local file before they are rendered by the browser.

Tools

Firefox

This browser extension allows overriding page resources. To cover URL changes that sites may do to bypass the browser cache, URLs can be matched with wildcards such as an asterisk * for prefix. The resources can be overridden by code entered within the browser extension, or by a resource from a different URL.

The menu of the extension can be accessed through the "overrides" tab which is added to the web development tools (F12), or through an icon added to the tool bar. If the icon is missing, it should be possible to add it by right-clicking the toolbar and selecting "Customize Toolbar" from the context menu.

If a resource used for overriding is hosted on a different domain, it may be necessary to force allowing cross-origin requests, which can be achieved using "allow CORS". Keep in mind that since it lets scripts on the site access resources from other sites, this should only be enabled while necessary and only on trusted sites.

Chrome / Chromium

Google Chrome has a native feature called "local overrides", which allows mounting a local directory with files that override the resources on the remote server, but it lacks wildcard matching for the server URLs to override.

Case study: Disable autoplay queue on Dailymotion

August 2022

On the video platform Dailymotion, the playback of loud, distracting, and off-topic videos starts automatically after the current video ends, which is detrimental to the user experience. A replay button appears in the player for a split-second, but the first video in the list of suggested videos opens immediately thereafter and unsolicitedly starts playing.

Unlike on YouTube, there is no delay until the playback of the next video is initiated, and there is no option to deactivate this behaviour.

How auto-play is detrimental to the user experience

The automatic playback of videos in the "Browse more videos" section, also referred to as "autoplay-next" and similar, is both distracting during work and a nuisance during presentations, and increases power consumption to the detriment for battery-powered laptops. For replaying the last video, one needs to navigate back and wait for its page to load and for the video to buffer again, which adds a delay.

If the video is playing in background, the user is forced to switch back to the browser (if using a different application) and find and open the tab with the playing video to pause it. If the user wants to prevent the next video from playing, they have to wait for the video to buffer, since the pause button can only be actuated once the playback has started. Additionally, the audio of the automatically played next video could be much louder than the current, which can be hurtful and forces the user to quickly turn down the volume or hit the mute button.

The suggested videos are typically celebrity-related news that are unrelated to the watched videos, meaning they are not of interest to many viewers. Suggested videos could even contain female celebrities in revealing clothes, which is especially not called for in a work environment.

Analyzing the code

The code responsible for this behaviour is located inside a script called runtime-app.*.js. In place of the asterisk, there is a 20-character hexadecimal value that apparently changes each time a site developer updates the script. This change of file names is done to force the browser to download the updated script instead of recalling it from the cache.

As of writing, the script file is located at https://static1.dmcdn.net/neon/prod/runtime-app.*.js. The full URL can be discovered in the page source code. It contains minified code, meaning that all whitespaces and indentations and line breaks outside of strings are removed to reduce the size of the file with the aim of slightly saving bandwidth consumption. To locate the code, the script first needs to be "pretty-printed", which is the reverse process. Whitespaces and line breaks and indentations are automatically added to make the code human-readable.

Several tools and online services exist for this purpose. One example is jsonformatter.org's tool. Paste the code from runtime-app.*.js into the site, then copy and paste the resulting code into the editor integrated in the browser extension or any other text editor.

Roughly at line 4963 (as of writing), there is this code snippet:

				return c.a.createElement(d.b, {
					playNext: e.playNext ? e.playNext : function() {
						if (h) {
							var t = Object(v.G)(p.db, {
									xid: h.xid
								}),
								n = h.isLastOfQueue ? null : e.autoNextHistoryState; 
							r = {
								pathname: t,
								search: L(window.location.search, "start"),
								state: n
							}, o = window.scrollY || window.pageYOffset, l.f.push(r), window.scrollTo(0, o)
						}
						var r, o
					},
					nextVideoIndex: null == h ? void 0 : h.indexInQueue,
					currentVideoXid: e.currentVideoXid,
					videoList: g

In order to defeat the automatic playback of the next video, replace it with:

				return c.a.createElement(d.b, {
					playNext: null,
					nextVideoIndex: void 0,
					currentVideoXid: e.currentVideoXid,
					videoList: g

After this change, the watch page appears as usual, and when the video ends, the replay button appears, but the watch page of the next video is not annoyingly opened.

This works as of August 2022. The code is subject to change in future.