In this article you'll learn to create a Google Chrome Extension in Visual Studio 2013. We can build the extension in Visual Studio and use the extension in the Chrome's developers mode.
In that context you'll learn to create the Chrome Extension in Visual Studio, to work with the JavaScript intellisense in Chrome here. So, let's proceed with the following.
- Creating Chrome Extension
- Working with Chrome Extension
- Intellisense in JavaScript
Prerequisites
In the following screenshot you can see that the extension is not available in Visual Studio. So we need to download the extension for Visual Studio.
After download, install the Extension Installer and restart Visual Studio.
Create Chrome Extension
In this section we'll create the Chrome Extension in Visual Studio 2013 using the following procedure.
Step 1: Open Visual Studio 2013.
Step 2: Click on "New Project" and select the SideWaffle on the left pane to choose the Google Chrome Extension and enter the name for the extension, like Kitties.
Step 3: You can check what files and folders are automatically created in the project as shown below:
Working with Chrome Extension
Step 1: Open the Google Chrome and in the Address bar enter the following URL:
Chrome://Extensions/
Step 2: Now you can see that the Developer mode is unchecked, check this checkbox as in the following:
Step 3: Now click on the "Load unpacked extension" button.
Step 4: Go to the project location in the computer and select the app.
Step 5: Close Chrome and debug the project in the Chrome browser.
Step 6: Now you can see the extension link in your Chrome.
Step 7: Click on that icon and you can see that various images will open.
Step 8: Open the project location in the computer and you can see that in the bin folder the app rar file is generated.
Intellisense in JavaScript
You can see the intellisense in the app/popup.js file:
No comments:
Post a Comment