Embed deeplinks.js into userscript

Recently, I came to a js libary that allows you to link to any text selection of a web page. That is deeplinks.js, which is here. It would be useful that your link points directly to the section you need especially the page is long. It would require the author of the page to use the deeplinks.js libary in order for the library to work but what if most of the pages does not include that library? So it would be nice to use the library even without the author including it. The solution is, of course, using a userscript. So I'm going to show you how to embed this library into a userscript and use it.

Deeplink.js the library

While the library can be found in the above link, it would require you to build the library. Because I'm lazy, I'm going to use the pre-built library in the example given in the repository, which is this one.

You should also note that this library can only work on pages with minimum changes. Generated page generally don't work and the library is truly useful when it comes to long pages.

Once included in a web page, you can select a text portion and the library will generate the link directly into the page url in a form of fragment identifier.

Userscripts and Greasemonkey

In order to use userscripts, you need a browser extension to do so. In Firefox, it's Greasemonkey. In Chrome, you can use TamperMonkey or the like. Userscripts would be activated on the specified pages so check your scripts before running them for security concerns.

Writing the script

The idea of writing this script is simple: create the script element, set the text content to the library and insert it into the body element. The problem with directly import this library into the userscript is that it contains the back tick character. So to circumvent this one, use base64 to encode the content and the decode it in the script.

So let's step in

The first step should be encode the content of the script in base64. You can use online tool to do the job

The second one is open a new userscript in Greasemonkey and type in some metadata

// ==UserScript==
// @name     Deeplink.js on all page
// @version  1
// @grant    none

You can change the name if you want

Next step is to write simple code below the metadata to create the script element and set the content of the element to the decoded library. Because the library use export, the type of the script element must be module. So it is

let src64 = "...Your base64 encoded library here...";
let script = document.body.appendChild(document.createElement("script"));
script.type = "module"
script.textContent = atob(src64);

Now you can use and enjoy the library on pages especially static ones, for example The storage problem of web3 by Stephen Diehl