Open Restlet Client from any website

Restlet Client allows you to insert a button in your website that will launch your request directly in Restlet Client.

Instruct Restlet Client with a meta tag

Create an html page that contains a meta tag that will load Restlet Client script.

<meta
name="dhc-aware-page"
data-indicator-element-id="<id_element>"
data-console-debug="true"
>
  • name - required parameter, value should always be dhc-aware-page.
  • data-indicator-element-id - optional, specifies the id of element Restlet Client will create to let the page know the availability of Restlet Client API. Default value is dhcInfo.
  • data-console-debug - optional parameter, if contains true, will print debug information into browser javascript console. Default value is false.

Call window.postMessage script

To instruct Restlet Client to open a new request, your webpage must call the window.postMessage script with the following message object (all properties are required):

{
      target : "aejoelaoggembcahagimdiliamlcdmfm",
      type : "openRequest",
      targetTab: "<name_of_target_tab>",
      payloadType: "<type_of_payload>",
      payload : "<payload>"
}
  • target:String - id of Restlet Client extension. Can be obtained from Restlet Client indicator element. E.g. JSON.parse(document.getElementById().textContent).extensionId;
  • targetTab:String (optional) - the name of the tab where request should be opened. If not specified, new tab with Restlet Client will be opened for each openRequest message. If specified, Restlet Client will try to use previously opened tab with the same name and will create it if such tab does not exist.
  • payloadType:String - the type of payload to load in Restlet Client. Possible values: dhc or systinet.
  • payload:Object - payload information, specific to each payload type.

Example:

{
    "name": "Post example on HTTP Bin",
    "headers": [
        {
            "enabled": true,
            "name": "Content-Type",
            "value": "application/json"
        }
    ],
    "type": "Request",
    "method": {
        "requestBody": true,
        "link": "",
        "name": "POST"
    },
    "body": {
        "autoSetLength": true,
        "textBody": "{\n  \"lastname\": \"Eastwood\",\n  \"firstname\": \"Clint\"\n}",
        "bodyType": "Text"
    },
    "headersType": "Form",
    "uri": {
        "path": "httpbin.org/post",
        "query": {
            "delimiter": "&",
            "items": [
                {
                    "enabled": true,
                    "name": "details",
                    "value": "full"
                }
            ]
        },
        "scheme": {
            "secure": true,
            "name": "https",
            "version": "V11"
        }
    }
}

Use case

Create a webpage that contains an input area pre-filled with your payload and a button to launch your request with Restlet Client in a new tab.

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">

    <!--This tag instructs Restlet Client to provide api to this page-->
    <meta name="dhc-aware-page"
          data-console-debug="true"
          data-indicator-element-id="testClient">

    <title>Client integration example</title>
    <style type="text/css">
        input{
            width:200pt
        }
    </style>
</head>
<script type="text/javascript">

    //short hand function for sending messages to restlet-client
    function openRequestInClient(clientInfo,targetTab,payload){
        var message = {
            target:clientInfo.extensionId, //required
            type:"openRequest",//required
            payloadType:"dhc",//required,
            targetTab:targetTab,
            payload:JSON.parse(payload)
        };
        window.postMessage(message, document.origin);
    }

    //wait until document loads so Restlet Client has a chance to create info tag
    window.addEventListener("load",function(){
        var clientTag = document.getElementById("testClient"); //lookup the tag using the id we've provided in meta tag
        var clientStatusDisplay = document.getElementById("status");

        if(!clientTag){
            //no indicator tag - no restlet-client
            clientStatusDisplay.textContent = "Restlet Client is not installed. Install Restlet Client by going to the " +
                    "chrome://extensions click on 'Enable Developer Mode' then load unpacked extension, go back here and refresh the page";
            return;
        }
        //parse restlet-client info into json
        var clientInfo = JSON.parse(clientTag.textContent);
        clientStatusDisplay.textContent = "Restlet Client is installed, click button below to open request in Restlet Client";

        //prepare ui

        var payload = document.createElement("textarea");
        payload.value = JSON.stringify({
            "name": "Post example on HTTP Bin",
            "headers": [
                {
                    "enabled": true,
                    "name": "Content-Type",
                    "value": "application/json"
                }
            ],
            "type": "Request",
            "method": {
                "requestBody": true,
                "link": "",
                "name": "POST"
            },
            "body": {
                "autoSetLength": true,
                "textBody": "{\n  \"lastname\": \"Eastwood\",\n  \"firstname\": \"Clint\"\n}",
                "bodyType": "Text"
            },
            "headersType": "Form",
            "uri": {
                "path": "httpbin.org/post",
                "query": {
                    "delimiter": "&",
                    "items": [
                        {
                            "enabled": true,
                            "name": "details",
                            "value": "full"
                        }
                    ]
                },
                "scheme": {
                    "secure": true,
                    "name": "https",
                    "version": "V11"
                }
            }
        },null,"\t");
        var send = document.createElement("button");
        send.textContent = "Open Request";


        document.body.appendChild(payload);
        document.body.appendChild(send);
        send.addEventListener("click",function(){
            openRequestInClient(clientInfo,null,payload.value);
        });



    });
</script>
<body>


<div id="status">Checking Client Status</div>

</body>
</html>