javascript - 开发屏幕截图 chrome 扩展

Question

我在这里看到了很多答案，但没有一个是我要找的。我想从 chrome 扩展中截取屏幕截图，只是为了我第一次看到的屏幕，而无需滚动页面。并“警告”创建的文件 base64 路径。

我拥有所有正确的权限:

"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"
    ]
},

在我的 manifest.json 中

我也有代码:

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

我一直得到 1，但我从来没有得到 2，我也不知道为什么。请帮助..

谢谢..

更新

那是缺少的部分(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;
}
);

然后:

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

Answer 1

您不能在内容脚本中进行扩展 API 调用。如果您真的想在内容脚本中触发此功能，请尝试使用消息传递。

请注意，tabs.captureVisibleTab() 的权限要求自 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没有提到它。

list .json

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

尝试在后台页面中执行下面的代码，屏幕截图将按预期工作。

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

截图