avishayhajbi
avishayhajbi

Reputation: 77

develop screenshot chrome extension

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); 
    }); 

Upvotes: 3

Views: 6872

Answers (2)

horiatu
horiatu

Reputation: 392

It actually does not work on Google pages as on the Extensions page, were it looks very natural to test your extension while developing. (Should be a way to test that before taking the snapshot, I think...)

Upvotes: 0

Chickenrice
Chickenrice

Reputation: 5727

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

enter image description here

Upvotes: 7

Related Questions