Question

我正在尝试创建一个扩展模块，用于模拟Opera 12中的Ctrl +单击以保存图像功能。我使用我的扩展程序的后台脚本中的chrome.downloads.download（）来启动下载，而内容脚本则侦听用户操作并发送包含要下载的图像的URL的消息。

一切正常，但在pixiv.net等网站上，下载中断并失败。使用webRequest API，我验证了活动选项卡中的cookie是与下载请求一起发送的，但是没有发送任何引用标头。我希望这是因为该网站阻止了来自外部网站的下载请求。我无法验证这一点，因为webRequest.onError事件未在失败的下载中触发。

我无法自己设置referer标头，因为它无法通过chrome.downloads设置，并且webRequest.onBeforeSendHeaders不能在其带有下载请求的阻止形式中使用，因此我无法在以后添加标头。有没有办法在选项卡的上下文中开始下载，以便它的行为类似于右键单击＆gt;另存为......？

为了澄清我是如何开始下载的，这里是我的TypeScript代码，它被剥离到适用的部分。

注入脚本：

window.addEventListener('click', (e) => {
    if (suspended) {
        return;
    }

    if (e.ctrlKey && (<Element>e.target).nodeName === 'IMG') {
        chrome.runtime.sendMessage({
            url: (<HTMLImageElement>e.target).src,
            saveAs: true,
        });

        // Prevent the click from triggering links, etc.
        e.preventDefault();
        e.stopImmediatePropagation();

        // This can trigger for multiple elements, so disable it 
        // for a moment so we don't download multiple times at once
        suspended = true;
        window.setTimeout(() => suspended = false, 100);
    }
}, true);

后台脚本：

interface DownloadMessage {
    url: string;
    saveAs: boolean;
}

chrome.runtime.onMessage.addListener((message: DownloadMessage, sender, sendResponse) => {
    chrome.downloads.download({
        url: message.url,
        saveAs: message.saveAs,
    });
});

更新

在下面的专家系统解决方案中，我发现了一种主要适用的方法。当后台脚本收到下载图像的请求时，我现在将URL的主机名与用户配置的需要解决方法的站点列表进行比较。如果需要解决方法，我会将消息发送回选项卡。该选项卡使用带有responseType = 'blob'的XMLHttpRequest下载图像。然后我在blob上使用URL.createObjectURL()并将该URL传递回后台脚本进行下载。这避免了数据URI的任何大小限制。此外，如果XHR请求失败，我强制尝试使用标准方法，以便用户至少看到下载失败。

代码现在看起来像这样：

注入的脚本：

// ...Original code here...

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    switch (message.action) {
        case 'xhr-download':
            var xhr = new XMLHttpRequest();
            xhr.responseType = 'blob';

            xhr.addEventListener('load', (e) => {
                chrome.runtime.sendMessage({
                    url: URL.createObjectURL(xhr.response),
                    filename: message.url.substr(message.url.lastIndexOf('/') + 1),
                    saveAs: message.saveAs,
                });
            });

            xhr.addEventListener('error', (e) => {
                // The XHR method failed. Force an attempt using the
                // downloads API.
                chrome.runtime.sendMessage({
                    url: message.url,
                    saveAs: message.saveAs,
                    forceDownload: true,
                });
            });

            xhr.open('get', message.url, true);
            xhr.send();
            break;
    }
});

后台脚本：

interface DownloadMessage {
    url: string;
    saveAs: boolean;
    filename?: string;
    forceDownload?: boolean;
}

chrome.runtime.onMessage.addListener((message: DownloadMessage, sender, sendResponse) => {
    var downloadOptions = {
        url: message.url,
        saveAs: message.saveAs,
    };

    if (message.filename) {
        options.filename = message.filename;
    }

    var a = document.createElement('a');
    a.href = message.url;

    if (message.forceDownload || a.protocol === 'blob:' || !needsReferralWorkaround(a.hostname)) {
        // No workaround needed or the XHR workaround is giving
        // us its results.
        chrome.downloads.download(downloadOptions);

        if (a.protocol === 'blob:') {
            // We don't need the blob URL any more. Release it.
            URL.revokeObjectUrl(message.url);
        }
    } else {
        // The XHR workaround is needed. Inform the tab.
        chrome.tabs.sendMessage(sender.tab.id, { 
            action: 'xhr-download', 
            url: message.url, 
            saveAs: message.saveAs
        });
    }
});

当然，如果图像与页面不在同一个域上且服务器不发送CORS标题，这将失败，但我认为不会有太多网站通过引用来限制图像下载< em>和提供来自不同域的图像。

Answer 1

chrome.download.download() 方法的第一个参数（options）可以包含标题属性，一个对象数组：

如果URL使用HTTP [s]协议，则随请求一起发送额外的HTTP标头。每个标头都表示为包含密钥名称和值或binaryValue的字典，仅限于XMLHttpRequest允许的字典。

<强>更新

不幸的是，正如您所指出的那样“仅限于XMLHttpRequest允许的那些”部分会使所有不同，因为Referer也不是XHR允许的标头。

我对此问题进行了大量讨论，但没有达到令人满意的解决方案或解决方案。我确实接近了，所以我会在这里展示结果以防有人发现它们有用。（此外，HTML5规范即将推出的一些增强功能实际上可能会使这成为可行的解决方案。）

首先，简单快捷的替代方案（虽然有一个主要的缺点）是以编程方式创建并“点击”指向图像源URL的链接（<a>元素）。

<强>优点：

非常简单快捷地实施。
避免所有与标题和CORS相关的问题（稍后会详述），因为它恰好在网页的上下文中发生。
根本不需要chrome.downloads API。
不需要背景页。

<强>缺点：

无法控制文件的下载位置（您可以指定文件名）以及是否显示文件对话框。

如果你不关心在默认的“downloads”文件夹中保存图像，那么这种方法可能就是：）

<强>实施

var suspended = false;
window.addEventListener('click', function(evt) {
    if (suspended) {
        return;
    }

    if (evt.ctrlKey && (evt.target.nodeName === 'IMG')) {
        var a = document.createElement('a');
        a.href = evt.target.src;
        a.target = '_blank';
        a.download = a.href.substring(a.href.lastIndexOf('/') + 1);
        a.click();

        evt.preventDefault();
        evt.stopImmediatePropagation();

        suspended = true;
        window.setTimeout(function() {
            suspended = false;
        }, 100);
    }
}, true);

试图绕过上述解决方案的限制，我尝试了以下过程：

当按住Ctrl键并单击图像时，源URL将发送到后台页面。
后台页面在新标签页中打开网址（因此标签的来源与图片相同 - 稍后会很重要。）
后台页面将一些代码注入到新创建的选项卡中：一个。创建一个<canvas>元素并将图像绘制到其上。湾将绘制的图像转换为dataURL。（*） C。将dataURL发送回后台页面以进行进一步处理。
后台页面接收dataURL，关闭之前打开的选项卡并使用chrome.downloads.download()和收到的dataURL作为url属性的值启动下载。

（*）：为了防止“信息泄漏”，canvas元素不允许将图像转换为dataURL，除非它与当前网页位置具有相同的原点。这就是为什么有必要在新选项卡中打开图像的源URL。

<强>优点：

它允许控制是否显示文件对话框。
它提供了chrome.downloads API提供的所有便利（如果需要或不需要它们）。
它几乎按预期工作：/

缺点 - 警告：

速度很慢，因为必须在新标签中加载图片。
可以保存的图像的最大大小取决于URL的最大允许长度。虽然我找不到任何关于此的“官方”资源，但基于大多数消息来源似乎表明的情况，几百MB的图像可能在限制范围内（这是个人估计并且可能非常不准确）。然而，这是一个限制。
主要限制来自画布'toDataURL() 以96dpi 的分辨率返回数据。因此，特别是对于高分辨率图像，这是一个显示阻止好消息：它的兄弟方法toDataURLHD() 以原生画布位图分辨率返回它（数据）。
不太好的消息：Google Chrome目前不支持toDataURLHD()。

您可以找到有关canvas及其toDataURL() / toDataURLHD()方法 here 的规格的更多信息。希望很快就能得到支持，这将把这个解决方案带回游戏中：）

<强>实施

示例扩展名由3个文件组成：

manifest.json：清单
content.js：内容脚本
background.js：背景页

的manifest.json：

{
    "manifest_version": 2,

    "name":    "Test Extension",
    "version": "0.0",
    "offline_enabled": false,

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

    "content_scripts": [{
        "matches":    ["*://*/*"],
        "js":         ["content.js"],
        "run_at":     "document_idle",
        "all_frames": true
    }],

    "permissions": [
        "downloads",
        "*://*/*"
    ],
}

content.js：

var suspended = false;
window.addEventListener('click', function(evt) {
    if (suspended) {
        return;
    }

    if (evt.ctrlKey && (evt.target.nodeName === 'IMG')) {

        /* Initialize the "download" process
         * for the specified image's source-URL */
        chrome.runtime.sendMessage({
            action: 'downloadImgStart',
            url:    evt.target.src
        });

        evt.preventDefault();
        evt.stopImmediatePropagation();

        suspended = true;
        window.setTimeout(function() {
            suspended = false;
        }, 100);
    }
}, true);

background.js：

/* This function, which will be injected into the tab with the image,
 * takes care of putting the image into a canvas and converting it to a dataURL
 * (which is sent back to the background-page for further processing) */
var imgToDataURL = function() {
    /* Determine the image's name, type, desired quality etc */
    var src     = window.location.href;
    var name    = src.substring(src.lastIndexOf('/') + 1);
    var type    = /\.jpe?g([?#]|$)/i.test(name) ? 'image/jpeg' : 'image/png';
    var quality = 1.0;

    /* Load the image into a canvas and convert it to a dataURL */
    var img = document.body.querySelector('img');
    var canvas = document.createElement('canvas');
    canvas.width = img.naturalWidth;
    canvas.height = img.naturalHeight;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    var dataURL = canvas.toDataURL(type, quality);

    /* If the specified type was not supported (falling back to the default
     * 'image/png'), update the `name` accordingly */
    if ((type !== 'image/png') && (dataURL.indexOf('data:image/png') === 0)) {
        name += '.png';
    }

    /* Pass the dataURL and `name` back to the background-page */
    chrome.runtime.sendMessage({
        action: 'downloadImgEnd',
        url:    dataURL,
        name:   name
    });
}

/* An 'Immediatelly-invoked function expression' (IIFE)
 * to be injected into the web-page containing the image */
var codeStr = '(' + imgToDataURL + ')();';

/* Listen for messages from the content scripts */
chrome.runtime.onMessage.addListener(function(msg, sender) {

    /* Require that the message contains a 'URL' */
    if (!msg.url) {
        console.log('Invalid message format: ', msg);
        return;
    }

    switch (msg.action) {
    case 'downloadImgStart':
        /* Request received from the original page:
         * Open the image's source-URL in an unfocused, new tab
         * (to avoid "tainted canvas" errors due to CORS)
         * and inject 'imgToDataURL' */
        chrome.tabs.create({
            url: msg.url,
            active: false
        }, function(tab) {
            chrome.tabs.executeScript(tab.id, {
                code:      codeStr,
                runAt:     'document_idle',
                allFrames: false
            });
        });
        break;
    case 'downloadImgEnd':
        /* The "dirty" work is done: We acquired the dataURL !
         * Close the "background" tab and initiate the download */
        chrome.tabs.remove(sender.tab.id);
        chrome.downloads.download({
            url:      msg.url,
            filename: msg.name || '',
            saveAs:   true
        });
        break;
    default:
        /* Repot invalie message 'action' */
        console.log('Invalid action: ', msg.action, ' (', msg, ')');
        break;
    }
});

<子> 对不起，答案很长（也没有提出正确的解决方案）我希望有人在那里找到有用的东西（或者至少节省一些时间尝试相同的东西）。

使用chrome.downloads api发送referrer标头

1 个答案: