web-dev-qa-db-fra.com

Prendre une capture d'écran en utilisant javascript pour les extensions chrome

J'ai fait beaucoup de recherches concernant la prise de photos en utilisant JS mais aucune ne semble utile. Certains disent utiliser des contrôles ActiveX, ce qui ne convient pas à ma situation. J'espérais prendre des photos en utilisant JS et les télécharger sur un serveur.

javascriptgoogle-chrome-extension
61
Sridarshan

Puisque vous l'utilisez dans Chrome Extensions, Tab API a une méthode appelée captureVisibleTab , qui permet de capturer la zone visible de la onglet actuellement sélectionné dans la fenêtre spécifiée.

Pour l'utiliser, il vous suffit d'ajouter des "onglets" à votre manifeste permissions . Et à partir de votre page d'arrière-plan, ou popup (ou toute autre page d'extension), vous appelez simplement cette méthode comme ceci:

chrome.tabs.captureVisibleTab(null, {}, function (image) {
   // You can add that image HTML5 canvas, or Element.
});

Vous pouvez contrôler la propriété en ajoutant {quality: 50} et en changer également le format, tous décrits dans les documents mentionnés ci-dessus.

La beauté de HTML5, vous pouvez modifier cette image avec HTML5 Canvas, vous pouvez manipuler, transformer, modifier, couper, tout ce que vous voulez, très facilement!

J'espère que c'est ce que vous cherchez! Bonne année!

81
Mohamed Mansour

Je ne sais pas si cela était disponible lorsque la réponse originale a été donnée, mais Google a maintenant un exemple disponible qui montre comment prendre des captures d'écran:

http://developer.chrome.com/extensions/samples.html

Recherchez "Test Screenshot Extension" sur cette page.

29
Todd Price

Si vous cherchez un exemple de travail, j'ai créé un dépôt avec extension qui prend une capture d'écran de la page Web entière. Jetez un œil ici: https://github.com/marcinwieprzkowicz/take-screenshot

7
Marcin Wieprzkowicz

Si vous êtes dans une entreprise, votre service informatique peut définir la stratégie DisableScreenshots sur true. Vous pouvez le vérifier en accédant à chrome: // policy et recherchez cette clé.

1
YRabl

Voici une autre approche qui a fonctionné pour moi.
Les exigences étaient les suivantes:
(a) capturer une capture d'écran dans une extension chrome
(b) la capture d'écran doit avoir un fond transparent
(c) la capture d'écran doit être communiquée à un processus différent (via HTTP)

Dans cette section, je présenterai un fragment de code répondant à l'exigence (b)
Les références utiles sont:
API de débogage d'extensions Chrome
domaine de débogage du protocole chrome devtools
Vous voudrez peut-être commencer à lire le code de la dernière fonction attachToDebugger

function captureScreenshot(tabId) {

    logMsg(`{page}: captureScreenshot: status=aboutTo, tabId=${tabId}`);

    chrome.debugger.sendCommand(
        {tabId:tabId},
        "Page.captureScreenshot", 
        {format: "png", fromSurface: true},
        response => {
            if(chrome.runtime.lastError) {
                logMsg(`{back}: captureScreenshot: status=failed, tabId=${tabId}`);
            }
            else {
                var dataType = typeof(response.data);
                logMsg(`{back}: captureScreenshot: status=success, tabId=${tabId}, dataType=${dataType}`);
                saveScreenshotRemotely(response.data);
            }
        });

    logMsg(`{page}: captureScreenshot: status=commandSent, tabId=${tabId}`);
}

//---------------------------------------------------------------------------

function setColorlessBackground(tabId) {

    logMsg(`{back}: setColorlessBackground: status=aboutTo, tabId=${tabId}`);

    chrome.debugger.sendCommand(
        {tabId:tabId}, 
        "Emulation.setDefaultBackgroundColorOverride",
        {'color': {'r': 0, 'g': 0, 'b': 0, 'a': 0}},
        function () {
            logMsg(`{back}: setColorlessBackground: status=enabled, tabId=${tabId}`);
            captureScreenshot(tabId);
        });

    logMsg(`{back}: setColorlessBackground: status=commandSent, tabId=${tabId}`);
}

//---------------------------------------------------------------------------

function enableDTPage(tabId) {

    logMsg(`{back}: enableDTPage: status=aboutTo, tabId=${tabId}`);

    chrome.debugger.sendCommand(
        {tabId:tabId}, 
        "Page.enable", 
        {}, 
        function () {
            logMsg(`{back}: enableDTPage: status=enabled, tabId=${tabId}`);
            setColorlessBackground(tabId);
            /*
             * you can comment 
             * setColorlessBackground(tabId);
             * and invoke 
             * captureScreenshot(tabId);
             * directly if you are not interested in having a 
             * transparent background
             */
        });

    logMsg(`{back}: enableDTPage: status=commandSent, tabId=${tabId}`);
}

//---------------------------------------------------------------------------

function attachToDebugger(tabId) {
    chrome.debugger.attach(
        {tabId:tabId}, 
        g_devtools_protocol_version,
        () => {
            if (chrome.runtime.lastError) {
                alert(chrome.runtime.lastError.message);
                logMsg(`{back}: debugger attach failed: error=${chrome.runtime.lastError.message}`);
            }
            else {
                logMsg(`{back}: debugger attach success: tabId=${tabId}`);
                enableDTPage(tabId);
            }
        });
}
0
ksridhar