(858) 586 7777 | About | Testimonials | Contact
vteams vteams vteams vteams
  • How does it work?
    • Startup Process
    • Your First Day
  • Technologies
    • Hire PHP Developer
    • Hire App Developer
    • Hire JavaScript Developer
    • Hire ROR Developer
    • Hire IOS Developer
    • Hire .NET Developer
    • Hire AI Developer
    • Hire Robotics Engineer
  • Sample Budgets
  • Meet The Team
  • Experiments
  • Captain’s Log
  • Blog
vteams vteams
  • How does it work?
    • Startup Process
    • Your First Day
  • Technologies
    • Hire PHP Developer
    • Hire App Developer
    • Hire JavaScript Developer
    • Hire ROR Developer
    • Hire IOS Developer
    • Hire .NET Developer
    • Hire AI Developer
    • Hire Robotics Engineer
  • Sample Budgets
  • Meet The Team
  • Experiments
  • Captain’s Log
  • Blog
Blog
  1. vteams
  2. Blog
  3. Building a Chrome Extension to Track Visitors Impression on Web Pages
Jun 01
Chrome-extension-for-visitor-impressions

Building a Chrome Extension to Track Visitors Impression on Web Pages

  • June 1, 2016

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:

  1. A manifest file (JSON file)
  2. One or more HTML files (unless the extension is a theme)
  3. Optional: One or more JavaScript files
  4. 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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
  "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:

  1. 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:
    1
    <img src=”images/sample_image.png”>
  2. Absolute URL: You can also specify an absolute URL, which is of the form:
    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:

1
2
3
4
5
6
7
8
9
10
11
<!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>

popup.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
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");
                }
            }
        );
    });
});

 

  • Facebook
  • Twitter
  • Tumblr
  • Pinterest
  • Google+
  • LinkedIn
  • E-Mail

Comments are closed.

SEARCH BLOG

Categories

  • Blog (490)
  • Captain's Log (1)
  • Closure Reports (45)
  • Experiments (7)
  • How-To (56)
  • Implementation Notes (148)
  • Learn More (156)
  • LMS (8)
  • Look Inside (10)
  • Operations Log (12)
  • Programmer Notes (20)
  • R&D (14)
  • Rescue Log (4)
  • Testimonials (25)
  • Uncategorized (4)

RECENT STORIES

  • GitHub Actions- Automate your software workflows with excellence
  • Yii Framework – Accomplish Repetitive & Iterative Projects with Ease
  • A Recipe for CRM Software Development
  • Are Agile and DevOps the same?
  • The Data Scientist’s Toolset

ARCHIVES

In Short

With the vteams model, you bypass the middleman and hire your own offshore engineers - they work exclusively for you. You pay a reasonable monthly wage and get the job done without hassles, re-negotiations, feature counts or budget overruns.

Goals for 2020

  • Open development center in Australia
  • Complete and Launch the Robot
  • Structural changes to better address Clients' needs

Contact Us

Address: NEXTWERK INC.
6790 Embarcadero Ln, Ste 100,
Carlsbad, CA 92011, USA

Tel: (858) 586 7777
Email: fahad@nextwerk.com
Web: www.vteams.com

© 2020 vteams. All Rights Reserved.

Content Protection by DMCA.com