DEV Community: Shamin

How third-party integrations use a script snippet to inject their components to a webpage?

Shamin — Thu, 19 Nov 2020 18:31:53 +0000

Ever wondered how chatbots and other pop up apps inject their components into your website. Usually what they do is they will ask you to add a script snippet to your website and the component pops up. In this post, I want to explain how I did manage to create a script that does this.

Let's start with a script snippet that you can ask a user to put on their website. You don't want to ask them to add 100 lines of javascript code to their website. Instead what you can do is create a script that injects a javascript file served from your CDN, that can have 100 or more lines. This is what most of the small scripts that you add to your website do, they load more scripts. So let's start with a small javascript code that adds a new script to your DOM.

var scriptElement = document.createElement('script');
var firstScriptElement = document.getElementsByTagName('script')[0];
scriptElement.src = "<https://yourcdn.com/script.js>";
scriptElement.async = 1;
firstScriptElement.parentNode.insertBefore(scriptElement, firstScriptElement);

It is not a good idea to add this to your snippet instead what you can do is to create an IIFE. These are functions that are executed immediately. And the good thing about this is the variables you declare in this function are only going to have function scope. So it won't cause any other issues if any other script uses the same variable names. Let's encapsulate this in an IIFE.

( function() {
    var scriptElement = document.createElement('script');
    var firstScriptElement = document.getElementsByTagName('script')[0];
    scriptElement.src = "<https://yourcdn.com/script.js>";
    scriptElement.async = 1;
    firstScriptElement.parentNode.insertBefore(scriptElement, firstScriptElement);
} )()

Let's make use of this newly created function to accept some useful parameters like tag name, script url, etc.

( function(document, tagName, scriptAddress) {
    var scriptElement = document.createElement(tagName)
    var firstScriptElement = document.getElementsByTagName(tagName)[0];
    scriptElement.src = scriptAddress;
    scriptElement.async = 1;
    firstScriptElement.parentNode.insertBefore(scriptElement, firstScriptElement);
} )(document, 'script', '<https://yourcdn.com/script.js>')

Since we have a script let's make the most out of it. Usually what most people do is add a global object which can hold some functionalities for our later use. Also, we will need something to figure out which webpage is calling this.

( function(window, document, tagName, globalName, scriptAddress) {
    window['MyAppObject'] = globalName;
    var scriptElement = document.createElement(tagName)
    var firstScriptElement = document.getElementsByTagName(tagName)[0];
    scriptElement.src = scriptAddress;
    scriptElement.async = 1;
    firstScriptElement.parentNode.insertBefore(scriptElement, firstScriptElement);
} )(window, document, 'script', 'myapp', '<https://yourcdn.com/script.js>')

Let's consider we want to call an initialize function that starts rendering a chatbot. Now that we have a global object that can be called from anywhere we can use it to initialize our app like,

myapp('init', 'some_unique_id');

To do this we are going to create a queue that holds all these functions and arguments until our main script is loaded. Also, add an id to our script so that it is easy for us to later find it.

( function(window, document, tagName, globalName, scriptAddress) {
    window['MyAppObject'] = globalName;
    window[globalName] = window[globalName] || function () {
        (window[globalName].queue = window[globalName].queue || []).push(arguments);    
    }
    var scriptElement = document.createElement(tagName)
    var firstScriptElement = document.getElementsByTagName(tagName)[0];
    scriptElement.id = globalName;
    scriptElement.src = scriptAddress;
    scriptElement.async = 1;
    firstScriptElement.parentNode.insertBefore(scriptElement, firstScriptElement);
} )(window, document, 'script', 'myapp', '<https://yourcdn.com/script.js>')

myapp('init', 'some_unique_id');

Hooray, now we have a queue at myapp.queue that can be later used in our function to do some initialization.

Unfortunately, our script snippet got bigger and we don't want our users to copy this big script. Also, we don't want our users to understand what we are doing, I am kidding. So let's reduce the script size and mess it a little up. Why do we even need such long variable names? (Spoiler Alert)

((function (w, d, s, o, f) {
  w['MyAppObject'] = o;
  w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
    var js = d.createElement(s);
  var fjs = d.getElementsByTagName(s)[0];
  js.id = o;
  js.src = f;
  js.async = 1;
  fjs.parentNode.insertBefore(js, fjs);
}(window, document, 'script', 'myapp', '<https://yourcdn.com/script.js>'))

myapp('init', 'some_unique_id');

Let's make it smaller by removing those var declarations by getting them as functional parameters. Also reducing the lines.

((function (w, d, s, o, f, js, fjs) {
  w['MyAppObject'] = o; w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
    js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
  js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
}(window, document, 'script', 'myapp', '<https://yourcdn.com/script.js>'))
myapp('init', 'some_unique_id');

That's it for now. Now we have a script snippet that injects our main script to a webpage and also initializes it. In my next post, I will be explaining how you can use the myapp.queue and inject an iframe into your user's website.

Imported from shamin.github.io.

Some really cool command line utilities which increase your productivity.

Shamin — Wed, 10 Apr 2019 18:20:06 +0000

There are a lot of command line utilities available in bash that can help you process millions of data in seconds. Some of them are

Head

Head is a command line utility to print first part of files given in standard input
head -1 data.txt - prints the first line of data.txt file

Tail

Tail is a command line utility to print the last part of files given in standard input. ie It works just the opposite of head

tail -1 data.txt - prints the last line of data.txt file

Cat

Cat is a command line utility for concatenating files and printing to standard output.

cat data.txt - prints the contents of data.txt file

Grep

Grep is a is a command line utility for printing lines that match a pattern.

cat data.txt | grep "some-data" - Search for some-data in the data.txt file and print the lines which contains the text

Shuf

Shuf is a command line utility which generates random permutations from input lines to standard output.

cat data.txt | shuf - Prints the content of data.txt shuffled

Uniq

Uniq is a command line utility which can be used for filtering repeated lines in a file.

cat data.txt | uniq - Filtering repeated lines in data.txt file and prints it.

Cut

Cut is a command line utility for cutting sections from each line of files and writing the result to standard output.

echo 'baz' | cut -b 2 - Prints a that is the secord character as specified in the cut.

Join

Join is a command line utility for joining lines of two files on a common field.

join file1.txt file2.txt - Joins the data of 2 files based on some common field.

Split

Split is a command line utility that can be used to split a file into pieces.

split -l 200 split_me.txt - Split split_me.txt to n files having 200 lines

jq

jq is a command line utility used for processing JSON.

jq '.' data.json - Pretty prints data.json file

awk

awk is a command line utility that searches for certain patterns and specified actions on that line.