2017-07-07 82 views
-1

我正在尝试创建一个大型页面的屏幕截图的Chrome扩展。chrome.tabs.captureVisibleTab捕获错误的区域

这是我的一个简单的扩展,它应该滚动并捕获页面的某些部分。

的manifest.json

{ 

     "manifest_version": 2, 
     "name": "screenshot_test", 
     "version": "1.0", 

     "permissions": [ 
     "tabs", 
     "<all_urls>" 
     ], 

     "background": { 
     "scripts": ["background.js"] 
     }, 

     "browser_action": { 
     "default_icon": "icon.png" 
     } 

    } 

background.js

chrome.browserAction.onClicked.addListener(capture)  
function capture(){ 

    function scroll(point, callback){ 
     chrome.tabs.executeScript({ 
      code: 'window.scrollTo('+JSON.stringify((point.x))+','+JSON.stringify(point.y)+')', 
     }, callback) 
    } 

    function capturetab(){ 
     chrome.tabs.captureVisibleTab(function(imageUri){ 
      shots.push(imageUri); 
     }); 
    } 

    var shots=[]; 
    var points=[{x: 0, y: 0}, {x: 500, y: 500},{x: 1000, y: 1000}]; 

    for (var i=0; i<3; i++) scroll(points[i], capturetab);  
    console.log(shots); 
} 

的问题是,拍摄[],imageuris阵列,包含一些相同imageuris,如果capturevisibletab捕获同一地区的几个像倍。

在firefox中,完全相同的代码工作得很好,除了在firefox capturevisibletab中返回promise和callback不是强制性的。

+0

请编辑问题为主题:包括一个重复问题的[mcve]。对于Chrome扩展程序或Firefox WebExtensions,这通常意味着包含您的* manifest.json *以及一些背景,内容和/或弹出式脚本/ HTML。寻求调试帮助的问题(“为什么代码不按我想要的方式工作?”)必须包括:(1)期望的行为,(2)特定问题或错误,以及(3)重现它所需的最短代码*在问题本身*。另请参阅:[我可以在这里询问什么主题?](http://stackoverflow.com/help/on-topic)和[问]。 – Makyen

回答

0

您的scroll()函数假定该选项卡在调用callback()之前滚动。
因为API是异步的,所以没有这样的保证。
我想现在只适用于你,因为你的FF仍然在单进程模式下运行。

在executeScript中指定callback,以便在脚本实际执行后被回调。

function scroll(point, callback){ 
    chrome.tabs.executeScript({ 
     code: 'window.scrollTo('+JSON.stringify((point.x))+','+JSON.stringify(point.y)+')' 
    }, callback); 
    } 
+0

是的,问题是api是异步的,但是你的解决方案也不行。我设法使用setTimeout来解决这个问题,但我相信这不是它应该如何去寻找更好的同步调用解决方案。 –

+0

事实上,使用setTimeout的需求看起来很诡异,它可能是chrome.tabs.captureVisibleTab的一个限制或缺陷:它可能只是重用了最后一个绘制结果,而不是由渲染器立即更新window.scrollTo完成。 – wOxxOm