Bookmarklet Creator

Title

Code

//? <script>
/// export
class MediaPageOverride {
  constructor(url) {
    this.url = url;
  }

attach(document) {
    let $$ = ((...args) => (this.escapeTextContent(...args)));

// Markup obtained by referring to `document.documentElement.outerHTML` on
    // a "native" clip player page.  If this bookmarklet gets out of sync with
    // the look and feel of the internal player (e.g. future Firefox
    // releases), then it should not be much more difficult that re-syncing...
    const markup = (`
      <!DOCTYPE html>
      <html>
        <head>
          <meta name="viewport" content="width=device-width; height=device-height;">
          <link rel="stylesheet" href="resource://content-accessible/TopLevelVideoDocument.css">
          <link rel="stylesheet" href="chrome://global/skin/media/TopLevelVideoDocument.css">
          <script class="http://stallman.org/#MediaPageOverride-script:dummy">
          window.addEventListener("DOMContentLoaded", {
            handleEvent(event) {
              const namespace = (
                "http://stallman.org/#MediaPageOverride-script:dummy"
              );

let dummy = document.querySelector("script[class]");
              { assert: dummy.className == namespace }

const src = "chrome://global/content/TopLevelVideoDocument.js";

let replacement = document.createElement("script");
              replacement.setAttribute("type", "text/javascript");
              replacement.setAttribute("src", src);
              window.removeEventListener("DOMContentLoaded", this);
              dummy.parentNode.replaceChild(replacement, dummy);
            }
          });
          </script>
          <title>${$$(this.getClipName(this.url))}</title>
        </head>
        <body>
          <video autoplay="" controls="" style="height: 40px; width: 66%;"
                 src="${$$(this.url)}"></video>
        </body>
      </html>
    `);

document.open();
    document.write(markup);
    document.close();
  }

getClipName(url) {
    return url.substring(url.lastIndexOf("/") + 1);
  }

escapeTextContent(text) {
    const dangereux = (/[\x3C\x3E\x26\x22]/g);
    return text.replace(dangereux, function(c) {
      switch (c) {
        case "\x3C": return "\x26lt;";
        case "\x3E": return "\x26gt;";
        case "\x26": return "\x26amp;";
        case "\x22": return "\x26quot;";
      }
      // This should be unreachable:
      throw new Error("wat.  c: " + c);
    });
  }
}
//? </script>
//? <script>
void function main() {
  if (typeof(window) == "undefined") throw Error("panic!");

if (String(window.location).startsWith("about:blank")) {
    var url = window.prompt("Enter URL of media clip");
    let override = new MediaPageOverride(url);
    override.attach(window.document);
  }
} ()
//? </script>

Bookmarklet Use inline media element

Usage:

Enter your code into the form
Press the button to generate a bookmarklet
Drag and drop the bookmarklet to the bookmarks toolbar

Examples:

Inject CSS style sheet from a given URL into current page

var link = document.createElement("link");
link.href = prompt("Style sheet URI:", "");
link.type = "text/css";
link.rel = "stylesheet";
document.head.appendChild(link);

Bookmarklet inject CSS

Check for the current page in the Wayback Machine

window.location = "https://web.archive.org/web/*/" + document.URL

Bookmarklet check the Wayback Machine

Reveal the unescaped contents of a bookmarklet link (selected by clicking)

window.addEventListener("click", {
  handleEvent(event) {
    if (event.target instanceof HTMLAnchorElement &&
        event.target.href.startsWith("javascript:")) {
      event.stopPropagation();
      event.preventDefault();

      let xi = this.escape(
        decodeURIComponent(event.target.href.substr(("javascript:").length))
      );
      window.history.pushState(null, "unescaped bookmarklet contents");
      window.location = (
        "javascript:`\x3C!doctype html\x3E\x3Cpre\x3E" + xi + "\x3C/pre\x3E`"
      );
    }
  },
  escape(text) {
    return encodeURIComponent(
      text.replace(new RegExp("[\x3C\x3E\x26\x22]", "g"), function(ch) {
        switch (ch) {
          case '\x3C': return "\x26lt;";
          case '\x3E': return "\x26gt;";
          case '\x26': return "\x26amp;";
          case '\x22': return "\x26quot;";
        }
        throw new Error("wat.  ch: " + ch);
      }).replace(new RegExp("\x5C\x5C", "g"), function() {
        return "\\\\";
      }).replace(new RegExp("`", "g"), function() {
        return "\\`";
      })
    );
  }
}, true);

Bookmarklet unescape bookmarklet