Chrome extension — How to use contextMenus API

Prerequisite: this project originates from the chrome extension — Notifications API

Chrome extension API, contextMenus, add functionalities on right clicking of data, whereby the functionality will be accessed from background script through the menu-box. This background script is run by serviceworker.

When we click time on webpage, it should show up. So, we use events.

In the manifest.json add this:

"background": {
    "service_worker": "background.js"
  }

Then, declare the contextMenus in permissions

"permissions"; [ "storage", "notifications", "contextMenus"]

Create background.js file in the extension directory

$ touch background.js

In background.js add this

let contextMenuItem = {
"id": "workTime",
"title": "WorkTime",
"contexts": ["selection"]
};
chrome.contextMenus.create(contextMenuItem);

Reload extension.

Upon selecting and clicking numbers and text, the extension with our extension icon and title WorkTime should show up on the menu box.

<code>

• Updating the total time with the selected time: