Question

我正在开发一个采用Google chrome扩展程序的屏幕截图。但是我的问题是，屏幕截图没有原始大小，它更大了。如果我的网络文档的大小为1272x594像素，则屏幕截图将为2544x1188像素。

最小的工作示例在上下文菜单中单击“测试插件”后，为当前选项卡截取屏幕截图，并在当前选项卡中将其显示为覆盖。

我的最小工作示例：

manifest.json

{
  "name": "Minimal working Example",
  "version": "1.0",
  "description": "",
  "permissions": ["contextMenus", "tabs", "activeTab"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "manifest_version": 2
}

background.js

chrome.runtime.onInstalled.addListener(function() {
    chrome.contextMenus.create({
        id: 'minimalExampe',
        title: 'Test Plugin',
        contexts: ['all']
    });
});

chrome.contextMenus.onClicked.addListener(function(itemData) {
    if (itemData.menuItemId == "minimalExampe") {
        console.log('clicked');
        // checks, if content.js is already injected, otherwise content.js is added
        chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
            chrome.tabs.sendMessage(tabs[0].id, {func: 'alreadyInjected'}, function (response) {
                if (response === undefined) {
                    chrome.tabs.executeScript({
                        file: 'content.js'
                    });
                    console.log('Script added');
                } else {
                    console.log('Script was already injected');
                }
                //does the screenshot
                chrome.tabs.captureVisibleTab(null, {format: 'png'}, function (screen) {
                    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
                        chrome.tabs.sendMessage(tabs[0].id, {func: 'showPicture', picture: screen});
                    });

                });

            });
        });
    }
});

content.js

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        switch(request.func) {
            case 'showPicture':
                showPicture(request.picture);
                break;
            case 'alreadyInjected':
                sendResponse({alreadyInjected: true});
                break;
        }
    });

function showPicture(picture) {
    console.log(window.innerWidth);
    console.log(window.innerHeight);
    var img = new Image();
    img.src = picture;
    img.style.zIndex = '1000';
    img.style.position = 'absolute';
    img.style.top = '0';
    img.style.left = '0';
    img.onload = function () {
        console.log(img.naturalWidth);
        console.log(img.naturalHeight);
    };
    document.body.appendChild(img);
}

有人知道为什么吗？欢迎任何帮助。我已经在Stackoverflow上进行搜索，但是只有一个相同的问题没有答案，因为没有提供最少的工作示例或其他任何内容。

最好，克劳斯

chrome扩展程序内的captureVisibleTab返回两倍大小的图像

0 个答案: