Building a Chrome Extension to Track Visitors Impression on Web Pages

Google Chrome extensions are being used to enhance UI experience by many folds. You can download various types of extensions from Chrome Web Store. This article will take you through the course of building a Chrome extension that tracks the amount of time visitors spend on web pages.

Basic Structure

Each extension entails the following files:

A manifest file (JSON file)
One or more HTML files (unless the extension is a theme)
Optional: One or more JavaScript files
Optional: Any other files your extension needs—for example, image files, etc
.

While you’re working on your extension, you place all these files into a single folder.

Manifest File

A Manifest file contains rudimentary information regarding an extension such as:

Name
Description
Version number
Permissions
Configuration options
.

Additionally, it determines the purpose and functionality of an extension. The basic structure of a manifest.json file is mentioned below:

{
  "manifest_version": 2,   // set to 2 as 1 is depricated

  "name": "Time Saver",
  "description": "Time Saver shows how much time is spent on a page",
  "version": "0.0.0.1",   
  "browser_action": {
    "default_icon": "icon.png", // icon displayed in Chrome’s toolbar
    "default_popup": "popup.html",
    "default_title": "Click here!"
  },
  "permissions": [
    "activeTab",  // permission to access current opened tab
    "notifications", // permissions to send custom popup notifications
    "tabs"   
  ]
}

{

"manifest_version": 2, // set to 2 as 1 is depricated

"name": "Time Saver",

"description": "Time Saver shows how much time is spent on a page",

"version": "0.0.0.1",

"browser_action": {

"default_icon": "icon.png", // icon displayed in Chrome’s toolbar

"default_popup": "popup.html",

"default_title": "Click here!"

"permissions": [

"activeTab", // permission to access current opened tab

"notifications", // permissions to send custom popup notifications

"tabs"

]

}

HTML Files

Further dissecting the manifest.json, you can incorporate numerous HTML files within several subdivisions such as:

browser_action
page_action
options_page
devtools_page
background
options_ui
.

In the current scenario, you need to integrate only one HTML file in browser_action. This file is used to show popup content and include JavaScript and CSS files as desired.

Make sure that you cannot write inline script in your HTML file. You need to write it in a separate file and then include it inside your HTML. For including files in HTML, you need to specify a path according to the referred file guidelines as mentioned below.

Referring Files

There are two ways to refer files in an extension:

Relative URL: Files can be referred by a relative URL. This means that if you want to include a specific file present in your extension’s directory then you can include it without specifying complete path of your extension root directory.For instance if “sample_image.png” is available in the sub-folder “images” of the extension’s code then following tag can be used:

<img src=”images/sample_image.png”>

1

<img src=”images/sample_image.png”>
Absolute URL: You can also specify an absolute URL, which is of the form:

chrome-extension://extensionID/pathToFile

1

chrome-extension://extensionID/pathToFile

Here, extensionID is a unique identifier for every extension. You can see extensionID for every single extension by entering ‘chrome://extensions/’ in Chrome’s location bar.

pathToFile is a path of file from root directory of the extension. For instance if “sample_image.png” is available in extension sub-folder “images” then pathToFile will be “images/sample_image.png”.

Other Files

JavaScript files allow us to run various scripts in an extension. These files can be incorporated in HTML and manifest.json file as well.

Furthermore, image files are used to set extension icon as well as for HTML views, while the extension icon images are encompassed in manifest.json file. You can also specify multiple sizes of images that can be used for extension display in Chrome. Images used in views can be incorporated through HTML or JavaScript.

Upload Extension

Once a chrome extension is developed, it can be uploaded using a mechanism defined here.

Code

extension_popup.html:

<!doctype html>
<html>
  <head>
    <title>Check Time Spent</title>

    <script src="popup.js"></script>
  </head>
  <body>
    <input type="button" value="Check Duration" id="check_time"/>
  </body>
</html>

<!doctype html>

<html>

<head>

<title>Check Time Spent</title>

</head>

<body>

</body>

</html>

popup.js:

function getCurrentTabUrl(callback) {
    var queryInfo = { active: true, currentWindow: true };

    chrome.tabs.query(queryInfo, function(tabs) {
        var tab = tabs[0];
        var url = tab.url;
        console.assert(typeof url == 'string', 'tab.url should be a string');
        callback(url);
    });
}

var start_time, start_date, page_url;

document.addEventListener('DOMContentLoaded', function () {
    start_time = new Date().toLocaleTimeString();
    start_date = new Date().toLocaleDateString();
    getCurrentTabUrl(function(url) {page_url=url;});
    var button = document.getElementById('check_time');

    button.addEventListener('click', function() {
        var opt = {
            type: "basic",
            title: "Time Over!",
            message: "",
            iconUrl: "abc.png"
        }
        chrome.permissions.contains({
                permissions: ['activeTab']
            },

            function(result) {
                if (result) {
                    current_time = new Date().toLocaleTimeString();
                    
                    getCurrentTabUrl(function(current_url) {
                         time_now = new Date().toLocaleTimeString();
                   date_now = new Date().toLocaleDateString();                            
        opt["title"]="Landing Time: "+start_date+' '+start_time
                         opt['message']= "Current Time: "+date_now+' '+time_now;

                         chrome.notifications.create(opt);
                    });
                    
                }
                else {
                    alert("Permissions Not Granted");
                }
            }
        );
    });
});

function getCurrentTabUrl(callback) {

var queryInfo = { active: true, currentWindow: true };

chrome.tabs.query(queryInfo, function(tabs) {

var tab = tabs[0];

var url = tab.url;

console.assert(typeof url == 'string', 'tab.url should be a string');

callback(url);

});

}

var start_time, start_date, page_url;

document.addEventListener('DOMContentLoaded', function () {

start_time = new Date().toLocaleTimeString();

start_date = new Date().toLocaleDateString();

getCurrentTabUrl(function(url) {page_url=url;});

var button = document.getElementById('check_time');

button.addEventListener('click', function() {

var opt = {

type: "basic",

title: "Time Over!",

message: "",

iconUrl: "abc.png"

}

chrome.permissions.contains({

permissions: ['activeTab']

function(result) {

if (result) {

current_time = new Date().toLocaleTimeString();

getCurrentTabUrl(function(current_url) {

time_now = new Date().toLocaleTimeString();

date_now = new Date().toLocaleDateString();

opt["title"]="Landing Time: "+start_date+' '+start_time

opt['message']= "Current Time: "+date_now+' '+time_now;

chrome.notifications.create(opt);

});

}

else {

alert("Permissions Not Granted");

}

);

});

Programmer Notes