Hacking the library

GLAM hacking 101...

  • learn to read urls
  • look beneath the hood to see how things work
  • experiment (change things and see what happens)

looking under the hood

right click
→ Developer tools
→ Inspect

  • bookmarklets

  • userscripts (& userstyles)

  • extensions

changing websites

all ways of running javascript in your browser to change the content or behaviour of websites

bookmarklets

  • good for modifying urls
  • nothing to install
  • need to be initiated
javascript:let%20handle=document.querySelector("input.handle");window.open("https://commons.wikimedia.org/w/index.php?title=Special:LinkSearch&target="+handle.value.replace("http://",""));
//Get the handle url from the input box
let handle = document.querySelector("input.handle");

// Construct a search url, then open it
window.open("https://commons.wikimedia.org/w/index.php?title=Special:LinkSearch&target=" + handle.value.replace("http://", ""));

create a bookmarklet

spaces and linebreaks removed or replaced

tells the browser to run this as code

javascript:let%20handle=document.querySelector("input.handle");window.open("https://commons.wikimedia.org/w/index.php?title=Special:LinkSearch&target="+handle.value.replace("http://",""));

add a bookmarklet

  1. right click on Bookmarks bar, select 'Add bookmark'
  2. give it a name
  3. copy and paste the code into the url field
  4. go here and try it!

userscripts

  • can change many aspects of a web page
  • need a userscript manager such as Tampermonkey or Violentmonkey
  • create/change userscripts using the built-in editor
  • install userscripts from sources such as GitHub Gists
  • share your userscripts!
  • be aware of security risks

added by a userscript

insert Commons links


// ==UserScript==
// @name        SLV add Wikimedia Commons links
// @namespace   wraggelabs.com/slv_add_wikimedia_commons_links
// @match       *://viewer.slv.vic.gov.au/?entity=*
// @connect     commons.wikimedia.org
// @grant       GM_xmlhttpRequest
// @version     1.0
// @author      -
// @description 29/09/2025, 10:37:18
// @require https://cdn.jsdelivr.net/gh/CoeJoder/waitForKeyElements.js@v1.3/waitForKeyElements.js
// ==/UserScript==
waitForKeyElements("#handleURL", (handleInput) => {
  // Get the handle url
  const handle = document.querySelector("input.handle");
  // Create a url to search for the handle in Wikimedia Commons
  const searchUrl = "https://commons.wikimedia.org/w/api.php?action=query&format=json&list=exturlusage&euquery=" + handle.value.replace("http://", "");
  const headers = {"User-Agent": "Userscript/SLV add Wikimedia Commons links (tim@timsherratt.au)"}
  // Query the Wikimedia API
  GM_xmlhttpRequest({
    method: "GET",
    url: searchUrl,
    responseType: "json",
    headers: headers,
    onload: function(response) {
      // Extract page ids from the results (if any)
      let pageIds = [];
      for (let page of response.response["query"]["exturlusage"]) {
        pageIds.push(page["pageid"]);
      }
      // If there are results, we'll get more info using the page ids
      if (pageIds.length > 0) {
        // Create a url using the page ids to get more info
        let infoUrl = "https://commons.wikimedia.org/w/api.php?action=query&pageids=" + pageIds.join("|") + "&prop=info&inprop=url&format=json";
        GM_xmlhttpRequest({
          method: "GET",
          url: infoUrl,
          responseType: "json",
          headers: headers,
          onload: function(response) {
            // Get the titles and urls from the results and put them in an HTML list
            let linkList = document.createElement("ul");
            for (const [key, value] of Object.entries(response.response["query"]["pages"])) {
              let pageUrl = value["canonicalurl"];
              let pageTitle = value["title"];
              let listItem = document.createElement("li");
              listItem.innerHTML = "<a href='" + pageUrl + "' style='color: #1779ba;'>" + pageTitle + "</a>";
              linkList.appendChild(listItem);
            }
            // Add a new row in the further details section of the page and add the list
            // New heading in dt
            let dt = document.createElement("dt");
            dt.className = "cell small-6 medium-2 large-2";
            dt.innerHTML = "Wikimedia Commons";
            // New dd to contain list
            let dd = document.createElement("dd");
            dd.className = "cell small-6 medium-10 large-10";
            dd.appendChild(linkList);
            // Get the current dl list
            let infoList = document.querySelector("dl#moreInfoList");
            // Add the new row
            infoList.appendChild(dt);
            infoList.appendChild(dd);
          }
        });
      }
    }
  });
});

To install:

more userscripts

seeing people in the archives