What is Chrome control in SharePoint 2013 App model

The chrome control enables you to use the navigation header of a specific SharePoint site in your app without needing to register a server library or use a specific technology or tool. To use this functionality, you must register a SharePoint JavaScript library through standard <script> tag. You can provide a placeholder by using an HTML div element and further customize the control by using the available options. The control inherits its appearance from the specified SharePoint website.

How to Use the Chrome Control in your CSOM (client object model) SharePoint App

1. Load the Javascript SP.UI.Controls.js using below

$.getScript(scriptbase + "SP.UI.Controls.js", renderChrome) 

2. Render thr Chrome Control

function renderChrome() { 
    // The Help, Account and Contact pages receive the  
    //   same query string parameters as the main page 
    var options = { 
        "appIconUrl": "siteIcon.png", 
        "appTitle": "Chromecontrol-Crossdomain", 
        "appHelpPageUrl": "Help.html?" 
            + document.URL.split("?")[1], 
        "settingsLinks": [ 
            { 
                "linkUrl": "Account.html?" 
                    + document.URL.split("?")[1], 
                "displayName": "Account settings" 
            }, 
            { 
                "linkUrl": "Contact.html?" 
                    + document.URL.split("?")[1], 
                "displayName": "Contact us" 
            } 
        ] 
    }; 
 

3. Add Chrome control in Navigation

    var nav = new SP.UI.Controls.Navigation( 
                            "chrome_ctrl_placeholder", 
                            options 
                      ); 
    nav.setVisible(true);