develop screenshot chrome extension

Question

i saw a lot of answers here but no one is what i'm looking for. i want to take screenshot from chrome extension just for the screen i see at the first time without scrolling the page. and "alert" the created file base64 path.

i have all the right permissions:

"permissions": [
  "activeTab",
  "tabs" ,
  "storage",
  "unlimitedStorage",
  "browsingData",
  "notifications",
  "http://*/*",
  "https://*/*",
  "file://*/*",
    "background" // added after i got the answer
],
 "background": { // added after i got the answer
    "scripts": [
        "js/background.js"
    ]
},

in my manifest.json

i also have the code:

$(document).ready(function() {
    alert("1");
    chrome.tabs.captureVisibleTab(null, {}, function (image) {
      alert("2"); 
    });
});

i got 1 all the time but 2 i never get and i don't know why. please help..

thanks ..

UPDATE

that's the missing part (background.js)

        chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
    chrome.tabs.captureVisibleTab(
        null,
        {},
        function(dataUrl){
            sendResponse({imgSrc:dataUrl});
        }); //remember that captureVisibleTab() is a statement
    return true;
}
);

and then :

       chrome.tabs.captureVisibleTab(null, {}, function (image) {
      // alert("2");
            alert(response.imgSrc); 
    }); 

Answer 1

You can't do extension API call in content script.Try to use use message passing if you really want to trigger this function in content script.

And please note that the permission requirement of tabs.captureVisibleTab() has been updated since chrome rev.246766.

Extension need to have '< all_urls >' permission, or been granted the 'activeTab' permission to be allowed to use tabs.captureVisibleTab().

Developer doc doesn't mention it.

manifest.json

"permissions": [
    "activeTab",
    "tabs" ,
    "storage",
    "unlimitedStorage",
    "browsingData",
    "notifications",
    "http://*/*",
    "https://*/*",
    "file://*/*",
    "<all_urls>"
]

Try to execute this code below in background page and screenshot capturing will work as expected.

chrome.tabs.captureVisibleTab(null,{},function(dataUri){
    console.log(dataUri);
});

screenshot