从零开始实现WEB自动化 - 网页操作

本篇是带领大家一起来搭建自动化操作的Chrome插件

网页操作基本只会涉及background.js文件的编写，所以我们来分段实现功能清单的操作

可以根据此篇文章来了解Chrome API支持功能项，来实现功能需求。

chrome谷歌浏览器开发文档谷歌浏览器扩展开发- cenchy.com,chrome,chrome扩展,chrome扩展开发,谷歌浏览器,谷歌浏览器api,谷歌浏览器扩展开发https://chrome.cenchy.com/tabs.html

打开网页

功能需求：给定URL，在新建页签中打开并需等待目标网址加载完成。

const BusOperation = {
    //打开网页，
    //url，打开的网页地址并等待加载完成并至多等待至超时时间
    openUrl: async (url, timeout=20) => {
        let cfg = {url: url}
        let tab = await NatOperation.tabsCreate(cfg);
        for(let i=0; i< timeout; i++){
            await NatOperation.wait(1000); //等待1秒
            let state = await NatOperation.sendContentMessage(tab.id, "loadState", {});
            if(state == BUS_PARAM_S.PAGE_STATE_SUCCESSFUL){
                break
            }
        }
    }
}

调用测试

let url = 'https://www.baidu.com/'
BusOperation.openUrl(url)

点击刷新后，浏览器会自动打开百度搜索，说明我们打开网页功能完成。

获取网页

功能需求：获取已打开的网页页签

//返回已选中的页签数据
currentTab: async () => {
    let tabList = await NatOperation.tabsQuery();
    for (const tab of tabList){
        if(tab.active){
            return tab
        }
    }
    return null;
}

跳转网页

功能需求：给定URL地址，在当前页签上跳转至新的网址

Chrome API虽然没有直接给定的API支持调用，但是我们可以通过执行JavaScript脚本的方式进行URL跳转，例如

window.location.href = 'https://www.baidu.com/'

那我们实现如下

    //执行JavaScript脚本
    //data.tabid = 浏览器页签ID，可从openUrl或currentTab获取
    //data.code = 需要执行的脚本
    executeScript: async (data) => {
        if(!data.tabid || !data.code){
            return;
        }
        let script = "function doSend() { " + data.code + " }; doSend();";
        await NatOperation.executeScript(parseInt(data.tabid), { code: script })
    }

    //调用。。。
    let code = "window.location.href = 'https://blog.csdn.net/';"
    await BusOperation.executeScript({
        tabid: openTab.id,
        code: code
    });

切换页签

功能需求：根据传入的tab页签记录，切换浏览器页签

    //选中某个页签
    selectTab: async (tabid) => {
        let tab = await BusOperation.selectTabByTabId(tabid);
        if(tab != null){
            await NatOperation.highlight(tab.index);
        }
    },
    //根据tabid查找tab对象
    selectTabByTabId: async (tabid) => {
        let tabList = await NatOperation.tabsQuery();
        for(tab of tabList){
            if(tabid === tab.id){
                return tab
            }
        }
        return null;
    }

执行脚本

功能需求：执行一段自定义的JavaScript脚本

    //执行JavaScript脚本
    //data.tabid = 浏览器页签ID，可从openUrl或currentTab获取
    //data.code = 需要执行的脚本
    executeScript: async (data) => {
        if(!data.tabid || !data.code){
            return;
        }
        let script = "function doSend() { " + data.code + " }; doSend();";
        await NatOperation.executeScript(parseInt(data.tabid), { code: script })
    },

关闭网页

功能需求：根据页签ID，关闭浏览器页签

    //关闭浏览器页签
    colseTab: (tabid) => {
        tabid && chrome.tabs.remove(parseInt(tabid));
    },

以上的功能逻辑测试如下

async function opt_test(){
    //1.打开网页
    let url = 'https://www.baidu.com/'
    let openTab = await BusOperation.openUrl(url)
    //2.获取网页
    let tab = await BusOperation.currentTab();
    console.log("currentTab", tab);
    //3.跳转网页&执行JavaScript脚本
    await NatOperation.wait(2000);
    let code = "window.location.href = 'https://blog.csdn.net/';"
    await BusOperation.executeScript({
        tabid: openTab.id,
        code: code
    });
    await NatOperation.wait(2000);
    //4.选中页签
    let openTab1 = await BusOperation.openUrl(url);
    await NatOperation.wait(2000);
    await BusOperation.selectTab(openTab.id);
    //5.关闭页签
    await NatOperation.wait(1000);
    BusOperation.colseTab(openTab.id);
    await NatOperation.wait(1000);
    BusOperation.colseTab(openTab1.id);
}

以上便是网页操作部分的代码了，了解API文档，知道什么该调用什么API，其实实现起来是非常容易的。