The heading above is populated by the 3rd party API, this can be used to create APis where the information is stored locally but accessed from other websites.

It uses Comlink a light weight RPC library to run commands on a different web page using an iframe and return the value.

The API on the 3rd party has been exposed using comlink like so:

import {Comlink} from 'comlinkjs/comlink.es6.js';

Comlink.expose({
  myFn () {
    console.log('Hello World');
    return 'Message from the API!';
  }
}, window.parent);

The script /client.js can be used to load an api over an iframe. Like so:

<script src="https://comlink-template.glitch.me/client.js" data-src="https://comlink-template.glitch.me/demo-api.html" data-as="myComlinkApi" async="true" defer></script>
<script async="false">
  (async function () {
        
        // Wait incase the script has not loaded. HACK!!
        var i = 0; while(!window.myComlinkApi && i++ < 20) await new Promise(a => setTimeout(a, 20));
        
        // Wait for the connection to be made to the iframe
        const api = await window.myComlinkApi;
        
        // Use the API to do something
        target.textContent = await api.myFn();
  }());
</script>