开发屏幕截图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但是我从来没有得到过，我不知道为什么。请帮忙..

谢谢..

更新

这是缺失的部分（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调用。如果您确实想在内容脚本中触发此功能，请尝试使用消息传递。

请注意，自chrome rev.246766以来，tabs.captureVisibleTab（）的权限要求已更新。

  

扩展需要有＆＃39;＆lt; all_urls＆gt;＆＃39;许可，或被授予   ＆＃39; activeTab＆＃39;允许使用tabs.captureVisibleTab（）。

Developer doc没有提及。

的manifest.json

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

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

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

截图

Answer 2

它实际上在扩展页面上的Google网页上不起作用，在开发时测试扩展程序看起来很自然。 （应该是在拍摄快照之前测试它的方法，我认为......）