{"id":21981,"date":"2013-11-18T12:21:21","date_gmt":"2013-11-18T19:21:21","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/aspnet\/?p=21981"},"modified":"2013-11-18T12:21:21","modified_gmt":"2013-11-18T19:21:21","slug":"building-browser-link-extension-in-visual-studio-2013","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/dotnet\/building-browser-link-extension-in-visual-studio-2013\/","title":{"rendered":"Building Browser Link extension in Visual Studio 2013"},"content":{"rendered":"

Browser Link feature in Visual Studio 2013 provides APIs for you to write your own Browser Link Extension. To take a look at some of the extensions, you can download Web Essentials<\/a> for Visual Studio 2013 RTM.<\/p>\n

In this blog, I will give you a step by step overview of the various APIs that we provide.<\/p>\n

You will need the following to start with:<\/p>\n

    \n
  1. Visual Studio 2013 RTM.<\/li>\n
  2. Visual Studio 2013 SDK.<\/li>\n
  3. Go to http:\/\/sidewaffle.com\/<\/a> and download<\/a> a template for extensions.<\/li>\n<\/ol>\n

    Once you have installed all of the above, you can get started:<\/p>\n

    **Step 1: ** Go to\u00a0 File \u2013>New-> Visual C# \u2013> Extensibility and select Browser Link Extension as shown in the image below.<\/p>\n

    \"image\"<\/a><\/p>\n

    Click OK, to create MyBrowserLinkProject. The browser link project will have a C# file and a JavaScript file. In the sample project, we have MyBrowserLinkProjectExtension.cs file and a MyBrowserLinkProjectExtension.js file.<\/p>\n

    MyBrowserLinkProjectExtension.js contains the script that will be injected in every browser that is invoked after Visual Studio is launched.<\/p>\n

    Step 2:<\/strong> Open file MyBrowserLinkProjectExtension.cs.<\/p>\n

    Here you will find a MyExtensionFactory class that implements interface IBrowserLinkExtensionFactory<\/em> and MyExtension class that derives from base class BrowserLinkExtension<\/em>.<\/p>\n

    MyExtensionFactory class has a CreateExtensionInstance<\/em>() method and a GetScript<\/em>().<\/p>\n

    CreateExtensionInstance method takes in a connection object. A connection can be thought of as a link to a page being rendered. For example, if Visual Studio has IE and Chrome browser rendering a particular page, then each of these can be thought of as a unique connection. You can create a new instance of an extension object or return the same instance of the extension object depending on what you want to do per connection.<\/p>\n

    \u00a0<\/p>\n

    \n
    \n
    \n Code Snippet\n <\/div>\n
    \n
      \n
    1. \n <\/span>public<\/span> <\/span>BrowserLinkExtension<\/span> CreateExtensionInstance(<\/span>BrowserLinkConnection<\/span> connection)<\/span>\n <\/li>\n
    2. \n {<\/span>\n <\/li>\n
    3. \n <\/span>return<\/span> <\/span>new<\/span> <\/span>MyExtension<\/span>();<\/span>\n <\/li>\n
    4. \n }<\/span>\n <\/li>\n<\/ol><\/div>\n<\/p><\/div>\n<\/div>\n

      GetScript\u00a0 method just reads the script to use from MyBrowserLinkProject.js file.<\/p>\n

      \n
      \n
      \n Code Snippet\n <\/div>\n
      \n
        \n
      1. \n public<\/span> <\/span>string<\/span> GetScript()<\/span>\n <\/li>\n
      2. \n {<\/span>\n <\/li>\n
      3. \n <\/span>using<\/span> (<\/span>Stream<\/span> stream = GetType().Assembly.GetManifestResourceStream(<\/span>“MyBrowserLinkProject.Scripts.MyBrowserLinkProject.js”<\/span>))<\/span>\n <\/li>\n
      4. \n <\/span>using<\/span> (<\/span>StreamReader<\/span> reader = <\/span>new<\/span> <\/span>StreamReader<\/span>(stream))<\/span>\n <\/li>\n
      5. \n {<\/span>\n <\/li>\n
      6. \n <\/span>return<\/span> reader.ReadToEnd();<\/span>\n <\/li>\n
      7. \n }<\/span>\n <\/li>\n
      8. \n }<\/span>\n <\/li>\n<\/ol><\/div>\n<\/p><\/div>\n<\/div>\n

        \u00a0<\/p>\n

        Step 3:<\/strong> Now, let us look at the MyExtension class itself. This file contains an OnConnected method which you can implement and any number of Browser Link Callback methods.<\/p>\n

        \n
        \n
        \n Code Snippet\n <\/div>\n
        \n
          \n
        1. \n public<\/span> <\/span>class<\/span> <\/span>MyExtension<\/span> : <\/span>BrowserLinkExtension<\/span>\n <\/li>\n
        2. \n {<\/span>\n <\/li>\n
        3. \n <\/span>public<\/span> <\/span>override<\/span> <\/span>void<\/span> OnConnected(<\/span>BrowserLinkConnection<\/span> connection)<\/span>\n <\/li>\n
        4. \n {<\/span>\n <\/li>\n
        5. \n Browsers.Client(connection).Invoke(<\/span>“greeting”<\/span>, <\/span>“Hello from Visual Studio!”<\/span>);<\/span>\n <\/li>\n
        6. \n }<\/span>\n <\/li>\n
        7. \n \u00a0\n <\/li>\n
        8. \n [<\/span>BrowserLinkCallback<\/span>] <\/span>\/\/ This method can be called from JavaScript<\/span>\n <\/li>\n
        9. \n <\/span>public<\/span> <\/span>void<\/span> SendText(<\/span>string<\/span> message)<\/span>\n <\/li>\n
        10. \n {<\/span>\n <\/li>\n
        11. \n <\/span>MessageBox<\/span>.Show(message);<\/span>\n <\/li>\n
        12. \n }<\/span>\n <\/li>\n
        13. \n }<\/span>\n <\/li>\n<\/ol><\/div>\n<\/p><\/div>\n<\/div>\n

          \u00a0<\/p>\n

          OnConnected() will be called when a connection between Visual studio and browser has happened. This is\u00a0 a good place to do any kind of initialization. In our example, we have chosen to Invoke the greeting function in Javascript.<\/p>\n

          \n
          \n
          \n Code Snippet\n <\/div>\n
          \n
            \n
          1. \n public<\/span> <\/span>override<\/span> <\/span>void<\/span> OnConnected(<\/span>BrowserLinkConnection<\/span> connection)<\/span>\n <\/li>\n
          2. \n {<\/span>\n <\/li>\n
          3. \n Browsers.Client(connection).Invoke(<\/span>“greeting”<\/span>, <\/span>“Hello from Visual Studio!”<\/span>);<\/span>\n <\/li>\n
          4. \n }<\/span>\n <\/li>\n<\/ol><\/div>\n<\/p><\/div>\n<\/div>\n

            \u00a0<\/p>\n

            This is how we can make a call from Visual Studio to the browser. In the above example we are trying to call the greetings function in the browser from within visual studio\u2019s extension.<\/p>\n

            Step 4:<\/strong> Open MyBrowserLinkProjectExtension.js file and you will see the greeting function which you invoked in step 3.<\/p>\n

            \n
            \n
            \n Code Snippet\n <\/div>\n
            \n
              \n
            1. \n (<\/span>function<\/span> (browserLink, $) {<\/span>\n <\/li>\n
            2. \n <\/span>\/\/\/ \n <\/span>\n <\/li>\n
            3. \n <\/span>\/\/\/ \n <\/span>\n <\/li>\n
            4. \n \u00a0\n <\/li>\n
            5. \n <\/span>function<\/span> output(message) { <\/span>\/\/ Helper for the ‘greeting’ function<\/span>\n <\/li>\n
            6. \n <\/span>if<\/span> (console) {<\/span>\n <\/li>\n
            7. \n console.log(message);<\/span>\n <\/li>\n
            8. \n }<\/span>\n <\/li>\n
            9. \n }<\/span>\n <\/li>\n
            10. \n \u00a0\n <\/li>\n
            11. \n <\/span>return<\/span> {<\/span>\n <\/li>\n
            12. \n \u00a0\n <\/li>\n
            13. \n greeting: <\/span>function<\/span> (message) { <\/span>\/\/ Can be called from the server-side extension<\/span>\n <\/li>\n
            14. \n output(message);<\/span>\n <\/li>\n
            15. \n },<\/span>\n <\/li>\n
            16. \n \u00a0\n <\/li>\n
            17. \n onConnected: <\/span>function<\/span> () { <\/span>\/\/ Optional. Is called when a connection is established<\/span>\n <\/li>\n
            18. \n browserLink.invoke(<\/span>“SendText”<\/span>, <\/span>“Hello from “<\/span> + browserLink.initializationData.appName);<\/span>\n <\/li>\n
            19. \n }<\/span>\n <\/li>\n
            20. \n };<\/span>\n <\/li>\n
            21. \n });<\/span>\n <\/li>\n<\/ol><\/div>\n<\/p><\/div>\n<\/div>\n

              Now let us see how we can make a call from Browser to Visual studio. For this, you will need Browser Link Callback methods defined in your extension.<\/p>\n

              In our example, you can see that we have a \u201cSendText\u201d method with a [BrowserLinkCallback] attribute. This means, this method can be called from javascript running in your browser.<\/p>\n

              \n
              \n
              \n Code Snippet\n <\/div>\n
              \n
                \n
              1. \n [<\/span>BrowserLinkCallback<\/span>] <\/span>\/\/ This method can be called from JavaScript<\/span>\n <\/li>\n
              2. \n <\/span>public<\/span> <\/span>void<\/span> SendText(<\/span>string<\/span> message)<\/span>\n <\/li>\n
              3. \n {<\/span>\n <\/li>\n
              4. \n <\/span>MessageBox<\/span>.Show(message);<\/span>\n <\/li>\n
              5. \n }<\/span>\n <\/li>\n<\/ol><\/div>\n<\/p><\/div>\n<\/div>\n

                \u00a0<\/p>\n

                Step 5:<\/strong> Do F5 and this will open up the experimental instance of VS. Here, create a new webforms website. Bring up the Browser Link dashboard. Click on the view in browser link here.<\/p>\n

                This will bring up a Message box which says \u201cHello from Internet Explorer\u201d. This way you can see Browser\u2019s JavaScript invoking a Visual studio method.<\/p>\n

                \"image\"<\/a><\/p>\n

                \u00a0<\/p>\n

                Step 6:<\/strong> If you invoke F12 tools in IE, you can see a Browserlink.js file that plugs in the extension script for you in all the browsers.<\/p>\n

                \u00a0<\/p>\n

                \"image\"<\/a><\/p>\n

                \u00a0<\/p>\n

                You can also see that Visual studio has successfully printed in your console. This was done by greetings function in your JavaScript.<\/p>\n

                Step 1 to 6 was a basic introduction of some of the APIs that you would require to get started.<\/p>\n

                ** Step 7:** Let us look at Actions API.<\/p>\n

                These APIs provide a way for your Actions(BrowserLinkCallBack Methods) to be invoked via the Browser link Dashboard.<\/p>\n

                This will give you an entry in the context menu of your connection right next to the Refresh Extension as shown in the image below.<\/p>\n

                \"image\"<\/a><\/p>\n

                \u00a0<\/p>\n

                In our Example, we have two actions defined. One is \u201cAction for SendText\u201d and the other is \u201cAction for Greetings\u201d.<\/p>\n

                To do this you will need to add the following piece of code:<\/p>\n

                \n
                \n
                \n Code Snippet\n <\/div>\n
                \n
                  \n
                1. \n <\/span>public<\/span> <\/span>override<\/span> <\/span>IEnumerable<\/span>< <\/span>BrowserLinkAction<\/span>> Actions<\/span> <\/span>\n <\/li>\n
                2. \n {<\/span>\n <\/li>\n
                3. \n <\/span>get<\/span>\n <\/li>\n
                4. \n {<\/span>\n <\/li>\n
                5. \n <\/span>return<\/span> <\/span>new<\/span> <\/span>BrowserLinkAction<\/span>[] { <\/span>\n <\/li>\n
                6. \n <\/span>new<\/span> <\/span>BrowserLinkAction<\/span>(<\/span>“Action for SendText”<\/span>, <\/span>this<\/span>.AddSendText),<\/span>\n <\/li>\n
                7. \n <\/span>new<\/span> <\/span>BrowserLinkAction<\/span>(<\/span>“Action for SendGreetings”<\/span>, <\/span>this<\/span>.AddGreetings),<\/span>\n <\/li>\n
                8. \n <\/span>\n <\/li>\n
                9. \n };<\/span>\n <\/li>\n
                10. \n }<\/span>\n <\/li>\n
                11. \n }<\/span>\n <\/li>\n<\/ol><\/div>\n<\/p><\/div>\n<\/div>\n

                  Note that, each of these Action methods AddSendText and AddGreetings inturn invoke a BrowserLinkCallBack method.<\/p>\n

                  \n
                  \n
                  \n Code Snippet\n <\/div>\n
                  \n
                    \n
                  1. \n <\/span>public<\/span> <\/span>void<\/span> AddSendText(<\/span>BrowserLinkAction<\/span> action)<\/span>\n <\/li>\n
                  2. \n {<\/span>\n <\/li>\n
                  3. \n SendText(<\/span>“Invoked from Actions context menu!”<\/span>);<\/span>\n <\/li>\n
                  4. \n }<\/span>\n <\/li>\n
                  5. \n \u00a0\n <\/li>\n
                  6. \n <\/span>public<\/span> <\/span>void<\/span> AddGreetings(<\/span>BrowserLinkAction<\/span> action)<\/span>\n <\/li>\n
                  7. \n {<\/span>\n <\/li>\n
                  8. \n SendGreetings(<\/span>“Invoked via Actions: Hello from Visual Studio!”<\/span>);<\/span>\n <\/li>\n
                  9. \n }<\/span>\n <\/li>\n<\/ol><\/div>\n<\/p><\/div>\n<\/div>\n

                    Here are their corresponding BrowserLinkCallBack methods:<\/p>\n

                    \n
                    \n
                    \n Code Snippet\n <\/div>\n
                    \n
                      \n
                    1. \n [<\/span>BrowserLinkCallback<\/span>] <\/span>\/\/ This method can be called from JavaScript<\/span>\n <\/li>\n
                    2. \n <\/span>public<\/span> <\/span>void<\/span> SendText(<\/span>string<\/span> message)<\/span>\n <\/li>\n
                    3. \n {<\/span>\n <\/li>\n
                    4. \n <\/span>MessageBox<\/span>.Show(message);<\/span>\n <\/li>\n
                    5. \n }<\/span>\n <\/li>\n
                    6. \n \u00a0\n <\/li>\n
                    7. \n [<\/span>BrowserLinkCallback<\/span>] <\/span>\/\/ This method can be called from JavaScript<\/span>\n <\/li>\n
                    8. \n <\/span>public<\/span> <\/span>void<\/span> SendGreetings(<\/span>string<\/span> message)<\/span>\n <\/li>\n
                    9. \n {<\/span>\n <\/li>\n
                    10. \n Browsers.Client(_browserlinkConnection).Invoke(<\/span>“greeting”<\/span>, message);<\/span>\n <\/li>\n
                    11. \n }<\/span>\n <\/li>\n<\/ol><\/div>\n<\/p><\/div>\n<\/div>\n

                      \u00a0<\/p>\n

                      At this point, you can do an F5 on MyBrowserLinkProject. This will open up the experimental instance of VS. Create a Website here and Browse About.aspx with IE and Chrome.<\/p>\n

                      Now click on the little arrow next to chrome and that will bring up the Actions menu for you.<\/p>\n

                      \"image\"<\/a><\/p>\n

                      Click on Action for SendGreetings and it will print out the following in Chrome\u2019s console as shown in the image below. This lets you test out the BrowserLinkCallback methods quickly on a per connection basis. You can also invoke this on IE and see similar results.<\/p>\n

                      \u00a0\"image\"<\/a><\/p>\n

                      \u00a0\u00a0\u00a0\u00a0\u00a0<\/p>\n

                      Step 8:<\/strong> Mapping Data API.<\/p>\n

                      The API will provide two kinds of operations: mapping a source file position to a DOM element, and mapping a DOM element to a source file range.<\/p>\n

                      All mapping operations will involve a DOM element reference. DOM elements only exist in the browser; they cannot be marshaled to the Visual Studio process. Because of this, the API will only be available in JavaScript. There will be no way to use the API directly from C#.<\/p>\n

                      Each element that can be mapped will have a sourceMapping property attached to it.<\/p>\n

                      Let us see a quick example. Open file MyBrowserLinkProjectExtension.js.<\/p>\n

                      Inside the greeting method, add the following two lines of code. In the example, we are trying to get div1 and open the source file with the complete range for div tag selected.<\/p>\n

                      \u00a0<\/p>\n

                      \n
                      \n
                      \n Code Snippet\n <\/div>\n
                      \n
                        \n
                      1. \n greeting: <\/span>function<\/span> (message) { <\/span>\/\/ Can be called from the server-side extension<\/span>\n <\/li>\n
                      2. \n output(message);<\/span>\n <\/li>\n
                      3. \n <\/span>var<\/span> testElement = document.getElementById(<\/span>“div1”<\/span>);<\/span>\n <\/li>\n
                      4. \n browserLink.sourceMapping.selectCompleteRange(testElement);<\/span>\n <\/li>\n
                      5. \n }<\/span>\n <\/li>\n<\/ol><\/div>\n<\/p><\/div>\n<\/div>\n

                        Now, do an F5 again. This will bring up experimental instance. Create a Razor website. In About.cshtml file add the following<\/p>\n

                        div tag:\u00a0<\/p>\n

                        \n Select Me\n<\/div>\n

                        .<\/p>\n

                        View this page in IE Browser. Now from the Dashboard, invoke the \u201cAction for SendGreetings\u201d. This will select the text in source view as shown in the image below.<\/p>\n

                        \"image\"<\/a><\/p>\n

                        \u00a0<\/p>\n

                        You can download WebEssentails2013 and look at\u00a0 InspectModeBrowserLink.js<\/a> to see how to make use of the Mapping Data API.<\/p>\n

                        Hope this was useful.<\/p>\n

                        Thanks,<\/p>\n

                        Reshmi<\/p>\n","protected":false},"excerpt":{"rendered":"

                        Browser Link feature in Visual Studio 2013 provides APIs for you to write your own Browser Link Extension. To take a look at some of the extensions, you can download Web Essentials for Visual Studio 2013 RTM. In this blog, I will give you a step by step overview of the various APIs that we […]<\/p>\n","protected":false},"author":432,"featured_media":58792,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[197],"tags":[7434,7437,7350,7436],"class_list":["post-21981","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-aspnet","tag-asp-net-4-5","tag-browser-link","tag-reshmi-mangalore","tag-visual-studio-2013"],"acf":[],"blog_post_summary":"

                        Browser Link feature in Visual Studio 2013 provides APIs for you to write your own Browser Link Extension. To take a look at some of the extensions, you can download Web Essentials for Visual Studio 2013 RTM. In this blog, I will give you a step by step overview of the various APIs that we […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/21981","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/users\/432"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/comments?post=21981"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/21981\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media\/58792"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media?parent=21981"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/categories?post=21981"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/tags?post=21981"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}