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:
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:
- 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”>
- Absolute URL: You can also specify an absolute URL, which is of the form:1chrome-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"); } } ); }); }); |
Comments are closed.