Launch Restlet Client

Introduction

Restlet Client (formerly known as DHC) allows you to interact with REST services. It brings many different features that make your user experience better, save you precious time when debugging REST calls or sharing your requests with others.

Install Restlet Client

Restlet Client can be used as an online service from client.restlet.com or installed within Chrome from the Chrome Web Store.

Restlet Client online service

Restlet Client online service

Restlet Client Chrome extension

The tool is also available for offline or online use as a Chrome extension and can be installed from the Chrome Web Store.

Restlet Client Chrome app

Note: When installing Restlet Client Chrome app, a confirmation message displays informing you that Restlet Client requires permissions to "Read and change all your data on the websites you visit" and to "Communicate with cooperating websites". - Permission to "Read and change all your data on the websites you visit"
Chrome applications which need access to internet resources must declare it in their manifest. It can be a list of URLs or URL mask e.g. http:/// allowing access to any URL. Allowing access to any URL is a primary feature of Restlet Client, and the URL mask with wildcards is interpreted by Chrome Store as: This app "can read and change all your data on the websites you visit". Which is true, but in fact Restlet Client does not collect your data. - Permission to "Communicate with cooperating websites"
Restlet Client is available also as a service. This permission allows data exchange between Restlet Client Service and Restlet Client Chrome. This feature is disabled by default.

Launch Restlet Client from your website

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

Note: This process might change due to Google legacy packaged apps policy.

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. Jump to Restlet Client built-in documentation for more information.
  • 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>