Screenshotting the current tab from a crhome extension

Question

I'm currently working on a project and they require a user to able to click on a button on the extension and take a screenshot of the current tab. But the thing is it keeps giving me this error

Unchecked runtime.lastError: Either the '<all_urls>' or 'activeTab' permission is required.

I have added the following permissions in the manifest -

"permissions": ["storage", "tabs", "activeTab"]

This is the code that I'm trying to execute. Here in the following code it even says that activeTab permission is granted when I run it. But the console.log(dataUrl) shows undefined.

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
chrome.permissions.contains({ permissions: ['activeTab'] }, (result) => {
    if (result) {
        console.log('activeTab permission is granted');
    } else {
        console.log('activeTab permission is not granted');
    }
});

if (message === 'get-screenshot') {
    chrome.tabs.captureVisibleTab(null, { format: 'png' }, (dataUrl) => {
        console.log(dataUrl);
    });
}});

This is what I'm using in content script to call the bg script.

chrome.runtime.sendMessage('get-screenshot', (response) => {
        console.log(response);
    });