User:Fred Gandt/userResourceManager

 User resources are not loaded on user preferences pages. This is for our security.

userResourceManager

Video demonstration and explanation of the purpose of the subject userscript
Description	Drag-and-drop user JavaScript and Stylesheet manager
Author(s)	Fred Gandt
Status	Stable
First released	July 23, 2014 (2014-07-23)
Updated	March 4, 2021 (2021-03-04)
Browsers	Any
Skins	Vector
Source	User:Fred Gandt/userResourceManager.js

The Resource Manager creates an intuitive drag and drop GUI in the personal account menu of the Wikipedia Vector UI, allowing users to manage their resources (JavaScript and CSS) easily and quickly without any need to edit their common.js.

How and Why?

User resources are usually added to the common.js page with commands like importScript( "User:Example/someScript.js" ); which is an instruction to create an HTML element in the head of every visited Wikipedia page. Each of these elements cause a request for the named resource. If the response is successful, the resource is included in the page, and its functionality is made available to the user.

In this case, every resource we want to use, even if we only want to use it occasionally, is included every time a page is loaded. If we want to use one on rare occasions, these inclusions are mostly unnecessary, slow page loading down, and chew up bandwidth for both us and The Wikimedia Foundation which has to serve every resource requested. If we want to simply try a script out, we must add the import... code to our common.js then try the script, then undo the addition if we don't want to continue using it. To continually change the resource requests we must continually edit our common.js to comment out or add or remove resource imports.

The Resource Manager reduces the number of requests and resource management requires NO editing of ANY page(s) - manually or automatically.

It stores the addresses of managed resources to the user preferences but requests only those we specifically want to use.

During any continuous session, the complete resources to be included are stored temporarily to the browser's sessionStorage. By this method, only one API query is made at the start of the session, with no more queries required to include the resources thereafter. Any changes to the configuration will require minimal further API calls in the background.

Functionality

A single button marked User Resources is added to the personal navigation bar at the far top/right of the UI. Clicking this button opens and/or closes the Resource Manager interface.

Resources are divided into two categories, the viewing of which can be switched between by clicking the JavaScripts / StyleSheets button in the open manager.

Including or Excluding Resources

The managed resources of either category (JS or CSS) are displayed in an intuitive split panel - Green for those we want to use, and Red for those we don't.

When the user visits any JavaScript or CSS resource page, the manager will show an extra button marked Manage this. By clicking this button, we will open the manager, and if the resource is already managed, it will be highlighted. If the resource is not already managed, it will be added to the red section. To keep the resource under management, simply Save the configuration.

Users can also add resources by typing or pasting the full title (e.g. User:Example/someScript.js) into the manager's included text input and submitting by pressing ↵ Enter. In this case, the resource will also be added to the red section, and again, to maintain the configuration, click Save.

To manage the resources, just open the manager, and drag resources from red to green, or vise-versa to activate or deactivate that resource, then Save the changes. If any resources are newly activated when the new configuration is saved, they'll be immediately added to the page. All the resources in the green sections (of JS and CSS) will be included on every page visit from then on (until changed).

The resources will be included in the order they are displayed in the manager, so we have full control over how our resources are loaded.

To remove a resource from management, simply drag it to the bin icon, drop it in and Save. Before saving, anything added to the bin can be reinstated by clicking the bin icon to open it, and dragging the resource(s) back into the manager's red or green sections.

The manager will close automatically after clicking Save, or can be closed explicitly by clicking User Resources or Close.

Purging the Session Cache

The option to Purge the session cache will initialize a fresh request for your managed resources on the next Wikipedia page load, by wiping the related sessionStorage. On the next page load, the session cache will be rebuilt, and used thereafter. This functionality is included for technical reasons which boil down simply to rebooting.

Temporary Inclusion

Managed resources in the red sections can be loaded temporarily at any time without changing the configuration, by clicking the resource name. A browser dialog will show asking if you're sure (just in case your click was an accident), and if confirmed, the resource will be loaded - just that one time.

This allows infrequently used resources to be included on demand quickly and easily without any editing, dragging and dropping, saving or changing the configuration in any way.

Resource Link

Each resource is appended with a link to its page.

Especially when using resources developed by other users, it is advisable to add the resource to your watchlist, and familiarise yourself with the code. If the resource is changed, you'll want to be aware of how that affects you as a user.

Also, if the resource isn't working properly, or you want to ask the developer to add a feature or have any other questions, you may want to visit the resource's talk page.

In Constant Development

I, Fred Gandt, am continuously working to improve this and other resources for use on Wikipedia.

Please, if you have any feedback, negative or positive - let me know :-)