chrome扩展程序===实战案例 一键下载数据

之前一直没接触过chrome扩展开发，直到在B站上偶然看到，此案例是注入JS一键下载学习通上的考试数据，并保存为excel
主要参考B站视频案例，和chrome国内开发文档

基础文件组成就不说了，不知道的自己看官方文档~入门就是

项目结构如图:

bg.js 就是背景页 主要做监听
conton.js主要逻辑
xlsx是导出用到的文件

index.html测试文件 不用管

然后就是一个必须的文件manifest.json

先说一下思路 这个主要也就是学习思路。

第一步先配置基本的信息
manifest.json
代码如下:

{
//主文件版本   必须字段
  "manifest_version": 2,
  //扩展程序的名字 必须
  "name": "考试数据下载",
  //扩展程序版本 
  "version": "1.0.1",
  //描述
  "description": "学习通考试数据下载",
  "icons": {
    "16": "Image/Dwon.png",    //前面的数字对应图标大小
    "32": "Image/Dwon.png",
    "48": "Image/Dwon.png"
  },
  //浏览器行为 作用域
  "browser_action": {
    "default_title": "学习通考试数据下载"


  },
  //背景页
  "background": {
    "scripts": [ "Js/bg.js" ]


  },
  //声明  权限
  "permissions": [
    "https://mooc1-1.chaoxing.com/*",    //这个是你要监听的网站是哪个   如果没有这个的话  你bg.js是不知道监听谁的
    "tabs"
  ]



}

第二步 监听 bg.js代码如下

    
   //当你点击扩展图标的时候   或者页面上任意的地方   都会和背景页进行一次通信
    //监听事件
    //一个页面就是一个标签    每个标签有自己唯一的id
    //executeScript方法 向页面注入JavaScript 脚本执行
chrome.browserAction.onClicked.addListener(function (e) {
    chrome.tabs.executeScript(e.id, {
        file: "JS/jquery.min.js"
    });
    chrome.tabs.executeScript(e.id, {
        file: "JS/xlsx.core.min.js"
    });
    chrome.tabs.executeScript(e.id, {
        file: "JS/conton.js"
    });
});

//第三步 写主要的业务逻辑
conton.js代码如下

function getAnswerdesc(answer)
{

    //indexof() ：在字符串中从前向后定位字符和字符串；所有的返回值都是指在字符串的绝对位置，如为空则为- 1
    let ret =[]
    if (answer.indexOf('A') != -1)
    {
        ret.push(0);
    }
    if (answer.indexOf('B') != -1) {
        ret.push(1);
    }
    if (answer.indexOf('C') != -1) {
        ret.push(2);
    }
    if (answer.indexOf('D') != -1) {
        ret.push(3);
    }
    if (answer.indexOf('E') != -1) {
        ret.push(4);
    }
    if (answer.indexOf('F') != -1) {
        ret.push(5);
    }
    if (answer.indexOf('G') != -1) {
        ret.push(6);
    }

    return ret;
}


let dataList = [
["标题","正确答案","答案描述"]
];




$('.TiMu').each((index, el) => {
    //获取题目
    let title = el.querySelector(".Zy_TItle>div").innerText;
    //获取正确答案
    let answer = el.querySelector(".Py_answer>span").innerText
    let answerdesc = "";
    //返回真确答案下标
    let answerarry = getAnswerdesc(answer);

    if (answerarry.length > 0)
    {   
        //循环输入答案描述
        for (var i = 0; i < answerarry.length; i++) {
            let _descripation = el.querySelectorAll(".Zy_ulTop>li")[answerarry[i]].innerText;
            answerdesc += _descripation;
            //去掉换行
            answerdesc = answerdesc.replace(/[\r\n]/g, "")
        }

        dataList.push([
            title, answer, answerdesc
        ])



    }
   
  
})


exportSpecialExcel(dataList);

这部分主要写了获取页面的相关信息的代码
下面是导出的代码：

// 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
function sheet2blob(sheet, sheetName) {
    sheetName = sheetName || 'sheet1';
    var workbook = {
        SheetNames: [sheetName],
        Sheets: {}
    };
    workbook.Sheets[sheetName] = sheet;
    // 生成excel的配置项
    var wopts = {
        bookType: 'xlsx', // 要生成的文件类型
        bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
        type: 'binary'
    };
    var wbout = XLSX.write(workbook, wopts);
    var blob = new Blob([s2ab(wbout)], { type: "application/octet-stream" });
    // 字符串转ArrayBuffer
    function s2ab(s) {
        var buf = new ArrayBuffer(s.length);
        var view = new Uint8Array(buf);
        for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
        return buf;
    }
    return blob;
}

/**
 * 通用的打开下载对话框方法，没有测试过具体兼容性
 * @param url 下载地址，也可以是一个blob对象，必选
 * @param saveName 保存文件名，可选
 */
function openDownloadDialog(url, saveName) {
    if (typeof url == 'object' && url instanceof Blob) {
        url = URL.createObjectURL(url); // 创建blob地址
    }
    var aLink = document.createElement('a');
    aLink.href = url;
    aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
    var event;
    if (window.MouseEvent) event = new MouseEvent('click');
    else {
        event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    }
    aLink.dispatchEvent(event);
}

function exportSpecialExcel(aoa) {
    var sheet = XLSX.utils.aoa_to_sheet(aoa);
    //sheet['!merges'] = [
    //    // 设置A1-C1的单元格合并
    //    { s: { r: 0, c: 0 }, e: { r: 0, c: 2 } }
    //];
    openDownloadDialog(sheet2blob(sheet), '单元格合并示例.xlsx');
}

写完后的效果如图所示：

个人觉得这种爬数据还是抢票什么的 直接作用浏览器，感觉比写后台代码简单多了。纯前端代码去实现后台业务逻辑。很方便~