Hi Developers,
Today, we are going to develop something interesting that is going to ease your development. We will be learning to create a simple chrome extension for ServiceNow. There are many great extensions that were developed by some awesome ServiceNow developers like SN Utils, ServiceNow Framerizer, SN Search, ServiceNow Helper, Add Signature to Now Community, etc.
Add Signature to Now Community is a new chrome extension by Pranav Bhagat designed especially for ServiceNow community contributors which will help them to quickly add Signature to the comments.
ServiceNow Framerizer designed by SN Pro Tips is a lightweight tool that allows you to click a button in your browser and immediately return the page you're on, to the ServiceNow frame.
My most favorite is, SN Utils by Arnoud Kooi. This extension provides many cool productivity tools for ServiceNow. E.g. Saving a record with the command CTRL-S, Selecting a username to view details of the user, Paste a clipboard image to any record with CTRL-V, Context menu code snippets, and links, and so on.
SN Utils has always fascinated me and I had always wondered how did Kooi build this cool tool. SN Utils was my primary inspiration to learn and decode these extensions. The source code provided by Kooi on Github for SN Utils and the awesome and simple documentation by Google has helped me a lot in my learning journey.
Today, we will be building a small functionality similar to SN Util's Context menu code snippets feature. Later in this series, we will keep adding features from other extensions both currently available and not available for ServiceNow. And in the end, you will be able to build your own custom chrome extensions to get you to speed up.
So, let's start. ..!
Step 1) First of all, you need to create a new directory to hold the extension's files.
I've created a new directory on my local computer and named it 'CodeIt'.
Step 2) Although not necessary, Open the newly created directory and create a new folder and name it as 'images', this will be used later to store different icons/images used in our extensions.
Step 3) Open the folder and store your favorite icons/images you want to use in your extension.
Step 4) Extensions start with their manifest. Every extension has a JSON-formatted manifest file, named manifest.json, that provides important information. Create a file called manifest.json and include the following code :
{
"name": "CodeIt",
"version": "1.0.0",
"manifest_version": 2
}Here, All three keys name, version & manifes_version are required parameters for every extension -
Manifest Version : One integer specifying the version of the manifest file format your package requires. Manifest V3 is launching soon!
"manifest_version": 2Manifest - Version : One to four dot-separated integers identifying the version of this extension. In addition to the version field, which is used for update purposes, version_name can be set to a descriptive version string and will be used for display purposes if present. If no version_name is present, the version field will be used for display purposes as well.
"version": "1"
"version": "1.0"
"version": "2.10.2"
"version": "3.1.2.4567"
"version_name": "1.0 beta"
"version_name": "build rc2"
"version_name": "3.1.2.4567"Manifest - Name and Short Name : The name and short_name manifest properties are short, plain text strings that identify the extension. The name (maximum of 45 characters) is the primary identifier of the extension and is a required field. The short_name (maximum of 12 characters recommended) is a short version of the extension's name. It is an optional field and if not specified, the name will be used, though it will likely be truncated. The short name is typically used where there is insufficient space to display the full name.
"name": "My Extension"
"short_name": "Short Name"Step 5) Let us add two additional keys which are recommended, description & icons, to our manifest :
{
"name": "CodeIt",
"version": "1.0.0",
"manifest_version": 2,
"description": "Decoding Chrome Extensions for ServiceNow!",
"icons": {
"16": "images/codeit_logo.png",
"32": "images/codeit_logo.png",
"48": "images/codeit_logo.png",
"128": "images/codeit_logo.png"
}
}
Here,
Manifest - Description : A plain text string (no HTML or other formatting; no more than 132 characters) that describes the extension.
"description": "A plain text description"Manifest - Icons : One or more icons that represent the extension, app, or theme. You should always provide a 128x128 icon; it's used during installation and by the Chrome Web Store. Extensions should also provide a 48x48 icon, which is used in the extensions management page (chrome://extensions). You can also specify a 16x16 icon to be used as the favicon for an extension's pages. Icons should generally be in PNG format, because PNG has the best support for transparency. They can, however, be in any format supported by WebKit, including BMP, GIF, ICO, and JPEG.
"icons": { "16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png" }
Step 6) Now let us add the other optional keys needed for our extension to work :
{
"name": "CodeIt",
"version": "1.0.0",
"manifest_version": 2,
"description": "Decoding Chrome Extensions for ServiceNow!",
"icons": {
"16": "images/codeit_logo.png",
"32": "images/codeit_logo.png",
"48": "images/codeit_logo.png",
"128": "images/codeit_logo.png"
},
"author": "Vishal Ingle",
"permissions": ["https://*.service-now.com/*", "contextMenus"],
"background": {
"scripts": ["jquery-3.6.0.min.js", "background.js"],
"persistent": true
},
"content_scripts": [
{
"matches": ["https://*.service-now.com/*"],
"js": ["jquery-3.6.0.min.js", "content_script.js"],
"all_frames": true
}
],
"page_action": {
"default_title": "CodeIt",
"default_icon": {
"16": "images/codeit_logo.png",
"32": "images/codeit_logo.png",
"48": "images/codeit_logo.png",
"128": "images/codeit_logo.png"
},
"show_matches": ["https://*.service-now.com/*"]
}
}
Let us understand what these optional keys are -
Author: Developer name who designed the extension.
"author": "Steve Jobs"Declare permissions : To use most chrome.* APIs, your extension or app must declare its intent in the "permissions" field of the manifest. Each permission can be either one of a list of known strings (such as "geolocation") or a match pattern that gives access to one or more hosts.
"permissions": [
"tabs",
"bookmarks",
"http://www.blogger.com/",
"http://*.google.com/",
"unlimitedStorage"
],Context Menus : Gives your extension access to the chrome.contextMenus API. Use the chrome.contextMenus API to add items to Google Chrome's context menu. You can choose what types of objects your context menu additions apply to, such as images, hyperlinks, and pages. (Let us discuss more in details about this topic in Part 2 of this series)
Background scripts : Extensions are event based programs used to modify or enhance the Chrome browsing experience. Events are browser triggers, such as navigating to a new page, removing a bookmark, or closing a tab. Extensions monitor these events in their background script, then react with specified instructions. (Let us discuss more in details about this topic in Part 2 of this series)
Content scripts : Content scripts are files that run in the context of web pages. By using the standard Document Object Model (DOM), they are able to read details of the web pages the browser visits, make changes to them and pass information to their parent extension. (Let us discuss more in details about this topic in Part 3 of this series)
Page Action : Use the chrome.pageAction API to put icons in the main Google Chrome toolbar, to the right of the address bar. Page actions represent actions that can be taken on the current page, but that aren't applicable to all pages. Page actions appear grayed out when inactive. Please consider using a browser action instead, so that users can always interact with your extension.
"page_action": {
"default_icon": { // optional
"16": "images/icon16.png", // optional
"24": "images/icon24.png", // optional
"32": "images/icon32.png" // optional
},
"default_title": "Google Mail", // optional; shown in tooltip
"default_popup": "popup.html" // optional
}Let us discuss more in details about this topic in Part 4 of this series.
Congratulations, We have successfully created our first and most important file.
In the next part, we will focus on another important script i.e. Background script.
Thank you.
Vishal Ingle,
DxSherpa Technologies Pvt. Ltd., Pune.
Other Articles in the Series till Now :
Decoding Chrome Extensions for ServiceNow : Part 1 (manifest.json)
Decoding Chrome Extensions for ServiceNow : Part 2 (background.js)
Decoding Chrome Extensions for ServiceNow : Part 3 (Content Scripts)
