最近有個需求是：自動抓取某網站登錄頁面的驗證碼圖片并保存，抓取n次。使用chrome插件來實現(xiàn)，其中使用到了js操作文件系統(tǒng)的api，特將代碼記錄下來，以備查閱。

PS:第一次使用js文件系統(tǒng)的api，百度了很久很多文章，大部分文章都很詳細的解釋介紹了api具體某個對象、方法的使用，但是很少有全部代碼從零到功能實現(xiàn)的全部代碼貼出，導致我這個新手一頭霧水，甚至在文件保存完后，去哪里看保存的文件這個問題上都折騰了一兩個小時。正是這些所謂的基礎的東西反而因為沒有人介紹導致很多無用功。此處貼出全部的代碼，希望少走彎路。

以下是chrome插件的content.js的全部代碼：

$(function() {
    if (window.location.href.indexOf('www.***.com/logout.action') != -1 || window.location.href.indexOf('www.***.com/logon.action') != -1) { //登錄頁，示例隱藏了真實地址，避免不必要的糾紛
        saveImg();
    }
});
/**
 * 保存圖片的方法
 */
function saveImg() {
    var count = 0;
    var max = 100; //修改max的值定義需要抓圖的張數(shù)
    var intev = setInterval(function() {
        window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
        window.requestFileSystem(window.TEMPORARY, 5 * 1024 * 1024, initFS, errorHandler); //申請文件系統(tǒng)，將initFS方法作為文件處理的方法，方法回調時會見文件系統(tǒng)對象fs作為參數(shù)傳入
        count++;
        if (count > max) { //抓夠張數(shù)后停止
            clearInterval(intev);
        }
    }, 5000); //每5秒刷新一張圖
}
/**
 * 點擊驗證碼，刷新驗證碼并返回驗證碼的值，該網站使用的本地js生成的驗證碼，驗證邏輯也是在本地js中完成，插件為gVerify.js
 */
function refreshImg() {
    var img = $('#verifyCanvas');
    $(img).click();
    //因為chrome插件和原網頁的js運行環(huán)境不能相互訪問（但插件js可以訪問員網頁的dom），使用向原網頁插入script并在script中執(zhí)行“將原網頁js環(huán)境的變量綁定到頁面dom節(jié)點后再訪問”的辦法獲取值。
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.innerHTML = "document.body.setAttribute('code', verifyCode.options.code);";
    document.head.appendChild(script);
    document.head.removeChild(script);
    var code = document.body.getAttribute('code');
    console.log(code);
    return code;
}
/**
 *文件處理方法，注意文件系統(tǒng)不同于操作系統(tǒng)的本地文件系統(tǒng)，只是瀏覽器運行環(huán)境中的一個虛擬的沙箱中的文件系統(tǒng)。在本地文件系統(tǒng)中無法搜索、查看到文件，查看文件的辦法：瀏覽器輸入地址查看（中間是網站的域名，每個網站的文件系統(tǒng)相互獨立）filesystem:https://www.***.com/temporary/
 */
function initFS(fs) {
    createDir(fs.root, '/img/'.split('/')); //創(chuàng)建目錄
    var img_code = refreshImg();
    //寫文件
    fs.root.getFile('/img/' + img_code + '.png', { create: true, exclusive: true }, function(fileEntry) {
        fileEntry.createWriter(function(fileWriter) {
            fileWriter.onwriteend = function(e) {
                console.log("Write successfully");
            };
            fileWriter.onerror = function(e) {
                console.log("Write error!");
            };
            var img_base64_url = $('#verifyCanvas')[0].toDataURL('image/png'); //獲取圖譜的base64地址
            var content = base64ToBinary(img_base64_url);
            var bob = new Blob([content]);
            fileWriter.write(bob); //查看文件地址：瀏覽器輸入filesystem:https://www.yqt365.com/temporary/
        });
    }, errorHandler);
}
/**
 *異常處理
 */
function errorHandler(err) {
    var msg = 'An error occured: ';

    switch (err.code) {
        case FileError.NOT_FOUND_ERR:
            msg += 'File or directory not found';
            break;

        case FileError.NOT_READABLE_ERR:
            msg += 'File or directory not readable';
            break;

        case FileError.PATH_EXISTS_ERR:
            msg += 'File or directory already exists';
            break;

        case FileError.TYPE_MISMATCH_ERR:
            msg += 'Invalid filetype';
            break;

        default:
            msg += 'Unknown Error';
            break;
    };

    console.log(msg);
};
/**
 *創(chuàng)建目錄
 */
function createDir(rootDir, folders) {
    rootDir.getDirectory(folders[0], { create: true }, function(dirEntry) {
        if (folders.length) {
            createDir(dirEntry, folders.slice(1));
        }
    }, errorHandler);
};
/**
 * 看方法名稱都懂啦
 */
function base64ToBinary(imgUrl) {
    var BASE64_MARKER = ';base64,';
    var base64Index = imgUrl.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
    var base64 = imgUrl.substring(base64Index);
    var raw = window.atob(base64);
    var rawLength = raw.length;
    var array = new Uint8Array(new ArrayBuffer(rawLength));

    for (i = 0; i < rawLength; ++i) {
        array[i] = raw.charCodeAt(i);
    }
    return array;
}