Chrome screenshot only works when clicking on extension

Question

So, I want to write code that will allow me to take a screenshot of the page when a button is clicked on my website. The code works, but the only problem is that I must first click on the chrome extension, and then I can click on the button to take a screenshot. I assume that since the active tab is not being called. Any ideas?

This is the error: Unchecked runtime.lastError when starting tabs.captureVisibleTab: the permission "activeTab" is not valid because this extension was not called.

manifest.json

"permissions": [
    "tabs",
    "*://google.com/*"
  ],

background.js

var id = 100;

// Listen for a click on the camera icon. On that click, take a screenshot.
function takeScreenshot() { 

  chrome.tabs.captureVisibleTab(null, function(screenshotUrl) {
    .....
}

chrome.extension.onRequest.addListener(function(request, sender) {
  takeScreenshot();
});

contentscript1.js

contentScriptMessage = "Take a screenshot";

document.addEventListener("hello", function(data) { //When overlay is clicked
    chrome.extension.sendRequest({message: contentScriptMessage}); //call background script
})

And I pass the message from the webpage when the image is clicked (calls the go () function) as follows:

  var go = function() {
          var event = document.createEvent('Event');
          event.initEvent('hello');
          document.dispatchEvent(event);
          }

Answer 1

runtime.lastError tabs.captureVisibleTab: "activeTab" , .

, , (, ). , , activeTab .

, "<all_urls>", . . .