Introduction

Let’s first understand the Chrome Extension project conceptually with some theory.

Extensions are small software programs that customize the browsing experience. There, a user can customize and manipulate the Chrome browser's functionality and open the web resources. An extension is built on web technologies, such as HTML, JavaScript, and CSS.

There are mainly 3 files that play an important role.

  1. Manifest.json
  2. Popup.js
  3. HTML

Manifest.json

Manifest.json is a configuration file for Google Chrome browser to get the resources and references. Its parameters should be in proper sequence. All Chrome extension apps have their own manifest.json file.

Google Chrome Extension Project

Sample of Manifest.json file

  1. {
  2. "manifest_version": 2,
  3. "name": "Data Scraping Tool",
  4. "description": "This extension demonstrates a browser action with particular website.",
  5. "version": "1.0",
  6. "icons": {
  7. "128": "img/icon128.png",
  8. "16": "img/icon16.png",
  9. "48": "img/icon48.png"
  10. },
  11. "permissions": ["tabs", "https://www.visioneinfotech.com/*"],
  12. "browser_action": {
  13. "default_icon": "img/icon.png",
  14. "default_popup": "popup.html"
  15. },
  16. "content_scripts": [{
  17. "js": ["jquery-3.2.1.min.js", "content.js"],
  18. "matches": ["https://www.visioneinfotech.com/*"]
  19. }],
  20. "background": {
  21. "scripts": ["jquery-3.2.1.min.js", "background.js"],
  22. "persistent": true
  23. }
  24. }

Popup.js

A second important file is Popup.js which performs the action on DOM control (HTML of popup.html). Whenever we need to manipulate the current tab site through extension, we must have to inject contact.js where we can access DOM elements of the site and other resources.

When the extension is loaded, it will call “DOMContentLoaded” event first. This means that it loads the event of extension which will be called each time the extension executes or opens. Here, we need to transfer the user input/control to content.js through “Chrome.tabs.sendMessage”.

Popup.js code to send message

  1. document.addEventListener('DOMContentLoaded', function() {
  2. chrome.tabs.query({
  3. active: true,
  4. currentWindow: true
  5. }, function(tabs) {
  6. chrome.tabs.sendMessage(tabs[0].id, {
  7. action: "nameofaction",
  8. id: a
  9. });
  10. });
  11. });

Content.js code to handle the message request

  1. chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  2. if (request.action == "nameofaction") {
  3. //....code to do something
  4. }
  5. });

Popup.html

  1. <!doctype html>
  2. <html>
  4. <head>
  5. <script src="jquery-3.2.1.min.js"></script>
  6. <script src="popup.js"></script>
  7. </head>
  9. <body> <input type="text" id="txtname" /> <input type="submit" id="btnsave" title="save" value="save" /> </body>
  11. </html>

Chrome Extension project using Visual Studio 2015

Now, let's try to create a Chrome app using Visual Studio 2015. Let’s first install Google Chrome extension project template in Visual Studio. Refer to the download link. After installation of the Chrome extension project template, restart Visual Studio.

Now, create your first Chrome extension project from the "New Project" window.

Google Chrome Extension Project

Inject Google Chrome Extension into Chrome browser

  1. Navigate to chrome://extensions in browser. You can also access this page by clicking on the Chrome menu on the top right side of the "customize and control" Google Chrome options, by hovering over "More Tools" and selecting "Extensions".
  2. Check the checkbox next to "Developer Mode".
  3. Click "Load Unpacked Extension" and select the “app” directory for your "Extensions Project" extension.

Let’s understand the Control flow of extension.

  1. A content script is injected into each page matching some criteria.
  2. Once injected, the content scripts send a message to the event page (non-persistent background page) and the event page attaches a page action to the tab.
  3. As soon as the page-action popup is loaded, it sends a message to the content script, asking for the info it needs.
  4. The content script processes the request, and responds so the page-action popup can display the info.

    Google Chrome Extension Project

How to get debugger in background.js?

To debug the background functions and block of code, you must have to follow the following steps.

Visit chrome://extensions/.

  1. Make presistebt : false in manifest.json file.
    1. "background": {
    2. "scripts": ["jquery-3.2.1.min.js", "background.js"],
    3. "persistent": true
    4. }
  1. Enable developer mode.
  2. Click on the link of your background page (at "Inspect views").
  3. The developer console opens for this page.

    Google Chrome Extension Project