如何将 chrome 扩展屏幕截图保存到文件中？

Question

我正在为学校创建一个 chrome 扩展（因此老师可以监控学生在他们的 chromebook 上做什么）。
我使用了chrome.tabs.captureVisibleTab字符串，在那里我遇到了新问题：
如何将该屏幕截图保存到文件中？ （必须在后台发生，否则学生可以阻止它）

谢谢

Answer 1

是的，你当然可以。 如何做到这一点非常有趣。

manifest.json文件：

{    
    "name": "Screenshot Extension",        
    "manifest_version": 2,     
    "version": "1.0",     
    "description": "Save web page screenshots to image files by one click",     
    "background": {     
        "persistent": false,     
        "scripts": ["background.js"]     
    },     
    "content_scripts": [     
     {     
        "js": ["content.js"],
        "matches" : ["<all_urls>"]                
     }

    ],     
    "browser_action": {     
        "default_icon": "extension_icon.png",     
        "default_title": "Screenshot of this page"     
    },     
    "permissions": ["activeTab", "tabs", "<all_urls>"]     
}

content.js文件：

chrome.extension.onMessage.addListener(function(msg, sender, sendResponse) {    
    if (msg.ready === "ready") {
        if (confirm('Do you want to have a capture of this screen?')) {
            sendResponse({download : "download"});
        }
    }   
});

background.js文件：

var screenshot = {
    content : document.createElement("canvas"),
    data : '',

    init : function() {
        this.initEvents();
    },

    saveScreenshot : function() {
        var image = new Image();
        image.onload = function() {
            var canvas = screenshot.content;
            canvas.width = image.width;
            canvas.height = image.height;
            var context = canvas.getContext("2d");
            context.drawImage(image, 0, 0);

            // save the image
            var link = document.createElement('a');
            link.download = "download.png";
            link.href = screenshot.content.toDataURL();
            link.click();
            screenshot.data = '';
        };
        image.src = screenshot.data; 
    },

    initEvents : function() {
        chrome.browserAction.onClicked.addListener(function(tab) {
            chrome.tabs.captureVisibleTab(null, {
                format : "png",
                quality : 100
            }, function(data) {
                screenshot.data = data;

                // send an alert message to webpage
                chrome.tabs.query({
                    active : true,
                    currentWindow : true
                }, function(tabs) {
                    chrome.tabs.sendMessage(tabs[0].id, {ready : "ready"}, function(response) {
                        if (response.download === "download") {
                            screenshot.saveScreenshot();
                        }
                        else {
                            screenshot.data = '';
                        }
                    });
                }); 

            });
        });
    }
};

screenshot.init();

• background.js控制扩展的逻辑，而content.js与网页交互。 它们发送消息以相互通信。

• 如果您想让您的扩展程序适用于所有网站，您必须设置权限<all_urls>