In an earlier article, I talked about placing your Javascript code snippets as bookmarks. I used this technique to get a list of books on Goodreads and to enhance the user experience on Safari Books Online for their video section. In both examples, I dumped the code directly into the URL section of the bookmark right after typing javascript:. If you need a refresher on how to do this, please check out my earlier article.

Now, can we do a better job than dumping the code there? And, why? Because it’s tiresome to keep pasting the code again and again when I make changes to it. Because the code already lives in a Gist, so it only makes sense that we trigger the Gist code when the bookmark is requested.

Liven Up

Since we are running javascript code in our bookmark, can we actually run something more complex than simply invoking style changes and adding new DOM elements? Why not pull the code from our Gist and execute it. I normally use axios for Ajax calls but let’s give fetch a try since we wouldn’t want to install a library beforehand to do what we want to do.

fetch(
  "https://gist.githubusercontent.com/kubarium/9a8243fd4fba8ca8a915b7be0e4084bb/raw/8a1f6ff4ac3a6870bff3ae4dfd4bb6f0bf73092d/safari-books-online-video-interface.js"
)

The URL we are fetching is slightly different than the URL I shared as the repo for one of the examples I’ve presented. The Gist URL is the page’s URL, you need to hit that Raw button to generate a URL that goes to the pure Javascript code. Once we fetch this, then

fetch(
  "https://gist.githubusercontent.com/kubarium/9a8243fd4fba8ca8a915b7be0e4084bb/raw/8a1f6ff4ac3a6870bff3ae4dfd4bb6f0bf73092d/safari-books-online-video-interface.js"
)
  .then(response => response.text())

Most examples you’ll see for fetch will use json method in the promise. That’s because, most likely, you’ll be hitting an API that returns a JSON response so you’d want to format the returned value to valid JSON. In this case, if you do try json then you’ll be left with a SyntaxError. What we need is the actual text so use text method instead.

It’s All In Your Head

fetch(
  "https://gist.githubusercontent.com/kubarium/9a8243fd4fba8ca8a915b7be0e4084bb/raw/8a1f6ff4ac3a6870bff3ae4dfd4bb6f0bf73092d/safari-books-online-video-interface.js"
)
  .then(response => response.text())
  .then(text => {
    const script = document.createElement("script");
    script.text = text;
    document.head.appendChild(script);
  });

We want to run this code as if it was part of the page so let’s inject it into the head. Start by creating a script element. Again, at this point, you’ll see the src property used instead of the text for the newly created element. That’s when you want to pass the URL as the source to the script element you created. Why are we not doing that? Because, when you do that, the code gives an error due to crossdomain policies and restrictions from Github. Think about it, if the raw code URL was available for executing, we’d all place script tags in our pages and they would be hosting our code just like a CDN. I don’t think they are in that kind of business. No worries though.

The text we pull is enough for us to execute. We do that when we add the script tag into the head of DOM on line 8. The text property that we used was nothing different than using the src attribute if this script line was manually added to page code.

Conclusion

What’s here to take away? The then parts of the code are never going to change for you will want to pull some piece of code so you can execute. Only, the URL you use in the fetch call will be pointed to a Javascript source. This way, you can keep your code somewhere accessible, easily editable, possibly with proper indentation, unlike the code dump we had from before.