Custom bookmarklet

Create your own custom bookmarklet powered by jsDelivr. This is exactly how the official bookmarklet is maintained.

Step 1

Create a fork of Sa11y on GitHub. Give a ⭐️ while you're there. 😉

Step 2

Navigate to /bookmarklet/sa11y-en.js within your fork.

Step 3

Modify the file as needed.

  1. Refer to Props to customize your bookmarklet.
  2. Optional: Replace ryersondmp with your username if you customize your fork.
  3. Optional: Replace 2.3.2 with the text latest so your bookmarklet automatically updates to the latest version of Sa11y.
  4. Once you are done modifying, commit your changes.
const sa11ycss = document.createElement("link");
sa11ycss.setAttribute("rel", "stylesheet");
sa11ycss.setAttribute("href", "https://cdn.jsdelivr.net/gh/ryersondmp/sa11y@2.3.2/dist/css/sa11y.min.css");
sa11ycss.setAttribute("type", "text/css");

const bodyheader = document.getElementsByTagName("head")[0];
bodyheader.appendChild(sa11ycss);

const combine = document.createElement("script");
combine.src = `https://cdn.jsdelivr.net/combine/gh/ryersondmp/sa11y@2.3.2/dist/js/lang/en.umd.js,gh/ryersondmp/sa11y@2.3.2/dist/js/sa11y.umd.min.js`;

document.body.appendChild(combine);
combine.onload = combine.onreadystatechange = function() {
    Sa11y.Lang.addI18n(Sa11yLangEn.strings);
    new Sa11y.Sa11y({
        detectSPArouting: true,
    });
};

Step 4

  1. Using any text editor as a scratch pad, copy and paste the following snippet below.
  2. Replace YOURUSERNAME with your GitHub account username.
  3. Then select the entire snippet of code again, copy to clipboard.
  4. Go to your browser, create a new bookmark or favourite.
  5. Paste the modified snippet of code in the URL field. Provide a name for your custom bookmarklet.
javascript:void((function(doc)%7Bdocument.body.appendChild(document.createElement(%27script%27)).src%3D%27https://cdn.jsdelivr.net/gh/YOURUSERNAME/sa11y%40latest/bookmarklet/sa11y-en.min.js%27%3B%7D)(document))

Short note on CDN

When using @latest within the CDN link, any changes you make to your fork will take time to propogate. You can manually purge the cache by replacing https://cdn.jsdelivr... with https://purge.jsdelivr... - however, this does not always work instantly either, nor is it recommended. We recommend publishing new Releases on GitHub, and replace @latest or Sa11y's release tag 2.3.2 with your own.