Chrome擴展實現網頁圖片右鍵上傳（以E站圖片搜索為例）

近期有一個需求，客戶要對其他網頁中看到的圖片在E站的搜圖引擎里進行查詢，但E站的搜索引擎只支持本地圖片上傳，客戶需要先把圖片保存到本地再上傳比較麻煩。於是希望能有更快速的方法完成整個查詢過程。在經過一番研究后，使用Chrome擴展完成了客戶的需求。

首先對E站的圖片搜索抓包，發現是一個Content-type為multipart/form-data的POST行為，POST內容即為圖片的二進制數據，Response為一個302重定向，到搜索結果頁面。Charles抓包結果如下：

 

 

於是確定總體思路：利用Chrome擴展的contextMenus配置右鍵菜單（對Chrome右鍵擴展開發不熟悉的推薦參考這篇文章），並為contentx為image的元素類型綁定post上傳動作。實現的難點在於如何從<img>標簽里拿到圖片的二進制數據，話不多說，直接上代碼：

/* background.js */
/* 其他文件代碼略 */

var ehentaiquery = chrome.contextMenus.create({"title": 'Ehentai-圖片查詢',id: 'menuDemo3',contexts: ['image'],onclick: queryimg});

function queryimg(info, tab) {
    var src = info.srcUrl; //獲取圖片對象的src
    fetch(src).then(function(response) {
    if(!response.ok) {
        alert("圖片請求錯誤");
        return;
        }
    var headers = response.headers;
    var ct = headers.get('Content-Type');
    var contentType = 'image/png';
    if(ct !== null){
      contentType = ct.split(';')[0];
    }
    
    var blob = response.blob().then(function(blob) {
    var formData = new FormData();
    formData.append('sfile', blob);
    formData.append('f_sfile', "search");
    formData.append('fs_similar', "on");
    $.ajax({
        cache: false,
        type: "POST",
        processData: false, //必須為false
        contentType: false, //必須為false
        url: "https://exhentai.org/upload/image_lookup.php",
        data: formData,
        dataType: "multipart/form-data",
        success: function(data, textStatus){
              console.log(data); //請求成功並不會進入success，而是進入error，希望有懂的老哥在評論解惑
        },
        error: function (request) {
            var contentText = request.responseText;
            var url = contentText.match(/var getrowurl = "(.+?)"/)[1];  //從返回數據中正則提取出搜索結果頁面的url
            window.open(url, '_blank').location; //新窗口打開搜索結果頁面
           }
    });
    });

  });
}

推而廣之，在圖床上傳等問題上，這套方法也是適用的。