javascript - develop screenshot chrome extension - Stack Overflow

admin管理员组

文章数量:1318772

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

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

• javascript
• google-chrome
• google-chrome-extension

Share Improve this question Follow edited Apr 16, 2014 at 8:28 avishayhajbi asked Apr 16, 2014 at 3:24 avishayhajbiavishayhajbi 7711 silver badge1010 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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

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...)

本文标签： javascriptdevelop screenshot chrome extensionStack Overflow