开发截图 chrome 扩展答案

【问题标题】：develop screenshot chrome extension开发截图 chrome 扩展
【发布时间】：2015-06-13 07:39:46
【问题描述】：

我在这里看到了很多答案，但没有一个是我要找的。我想从 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); 
    });

【问题讨论】：

标签： javascript google-chrome google-chrome-extension

【解决方案1】：

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

请注意 tabs.captureVisibleTab() 的权限要求自 chrome rev.246766 起已更新。

扩展需要有''权限，或者被授予 'activeTab' 权限被允许使用 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);
});

截图

【讨论】：

我收到了这条消息：未捕获的类型错误：无法读取未定义的属性“captureVisibleTab”
您是否在内容脚本中调用 captureVisibleTab？
问题在于不是使用<all_urls>，而是在内容脚本中使用了该API。您能否编辑您的答案以指出这一点，而不是误导性地建议此 API 需要 <all_urls> 权限？
@Rob W，你是对的，这个问题是由内容脚本中的 API 调用引起的。但这是 captureVisibleTab API 的一个已知问题 (code.google.com/p/chromium/issues/detail?id=339703)。 Chrome 团队已经发布了一个修订版来解决这个问题，并更改了 captureVisibleTab API 的权限要求。您可以参考此 (src.chromium.org/viewvc/…) 了解更多详情。 avishayhajbi 已经删除了“ http://*/* ”和“ https://*/* ”，这不适用于 captureVisibleTab API。所以我添加了“all_urls”主机权限。

【解决方案2】：

它实际上在 Google 页面上不像在扩展页面上那样工作，如果在开发时测试你的扩展看起来很自然。（我认为应该是在拍摄快照之前进行测试的一种方式......）

【讨论】：