Introduction:

The chrome.tabs.captureVisibleTab API in Chrome extensions is primarily used for taking screenshots of the visible content in a web page. Its key use cases include capturing web page snapshots for various purposes, such as creating visual bookmarks, monitoring changes in web content, conducting quality assurance testing, and providing user assistance through instructional materials.

Flow Diagram:

Step 1: Create manifest.json file:

Every extension requires a JSON-formatted file, named manifest.json, that provides important information. This file must be located in the extension's root directory.

A sample screenshot of manifest files is shown below.

Step 2: Add the permissions in manifest file:

A sample screenshot of manifest files code is shown below.

name: refers to the name of the extension and should be up to 45 characters.

Description: brief details on the functionality of the extension

manifest version(version): version of the manifest. The latest is 3.

background: brief details on the functionality of the extension.

permissions: extensions may require various permissions such s to use chrome storage to function properly. The permissions required are passed as an array of strings.

Step 3: Create background.js file and content.js:

content.js: Content scripts are JavaScript files that run in the context of web pages.

background.js: background scripts are something that run-in background and listen for triggers while the user interacts with the chrome browser (such as listening for a click event on a tab)

A sample screenshot of background.js files code is shown below.

Step 3: Add following snippet in content.js and bacground.js file:

In background.js, write the following piece of code:

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    chrome.tabs.captureVisibleTab(async (screenshotUrl) => { //base64 image 
        if (screenshotUrl) {
            //save image
            chrome.downloads.download({
                url: screenshotUrl, // URL.createObjectURL converts the Blob to a downloadable URL
                filename: "screenshot.png",
                saveAs: true, // Prompt the user to choose a download location
            });
        }
    })
    sendResponse({ farewell: "Screenshot Taken" });
})

In content.js, write the following piece of code:



document.addEventListener('click', function (e) { //webpage click event
    if (chrome.runtime) {
        chrome.runtime.sendMessage({ action: 'click', }, function (response) {  //web page send message on when click event
            console.log(response)
        })

    }

}, false)

chrome.runtime.onMessage && chrome.runtime.sendMessage: To send a message, it depends if you're sending it from the Content Script or from the background script.

Step 4: Add an extension:

Go to the Extensions page by entering chrome://extensions in a new tab. (By design chrome:// URLs are not linkable.)

Alternatively, click on the Extensions menu puzzle button and select Manage Extensions at the bottom of the menu.

Or, click the Chrome menu, hover over More Tools, then select Extensions.

2. Enable Developer Mode by clicking the toggle switch next to Developer mode.

3. Click the Load unpacked button and select the extension directory.

A Sample Github repo, with all the required configurations, is given below.

https://github.com/episyche/screenshot_chrome_extension.git

How to Take Screenshots in Chrome Extension Using Manifest version3.