chrome插件-实战篇（友盟导出数据）

一、功能介绍

主要是用于导出我们app 应用的埋点数据，2个app ,4个端的埋点数据，聚合成一个excel文档

二、实现思路

主要通过content.js页面注入，操作dom,抓取页面信息，利用浏览器缓存数据信息，通过jsontoexcel，转成文件

三、详细设计及编码

1、service_worker相关配置和编码

manifest.json 配置 

"background": {
        "service_worker": "background.js",
        "type": "module"
    },

background.js 编码

chrome.runtime.onInstalled.addListener(() => {

    chrome.contextMenus.create({
        id: "chatglm",
        title: "使用智谱清言",
        contexts: ["selection"] // "page" 表示菜单项将出现在页面的右键菜单中
    });
    chrome.contextMenus.create({
        id: "chatglmPage",
        title: "使用智谱清言",
        contexts: ["page"] // "page" 表示菜单项将出现在页面的右键菜单中
    });
    chrome.contextMenus.create({
        id: "allApp",
        title: "全部应用",
        contexts: ["page"] // "page" 表示菜单项将出现在页面的右键菜单中
    });
    chrome.contextMenus.create({
        id: "Android1",
        title: "安卓1埋点",
        contexts: ["page"] // "page" 表示菜单项将出现在页面的右键菜单中
    });
    chrome.contextMenus.create({
        id: "Android2",
        title: "安卓2埋点",
        contexts: ["page"] // "page" 表示菜单项将出现在页面的右键菜单中
    });
    chrome.contextMenus.create({
        id: "IOS2",
        title: "IOS1埋点",
        contexts: ["page"] // "page" 表示菜单项将出现在页面的右键菜单中
    });
    chrome.contextMenus.create({
        id: "IOS2",
        title: "IOS2埋点",
        contexts: ["page"] // "page" 表示菜单项将出现在页面的右键菜单中
    });
});

在浏览器插件上安装的时候添加菜单项

效果如下

2、 监听右键菜单项的点击事件，并跳转到指定页面

chrome.contextMenus.onClicked.addListener((info, tab) => {
    if (["chatglmPage", "allApp", "Android1", "Android2", "IOS1", "IOS1"].includes(info.menuItemId)) {
        // 当用户点击右键菜单的“示例菜单项”时，执行以下操作
        chrome.scripting.executeScript({
            target: { tabId: tab.id },
            function: openInNewTab,
            args: [info.menuItemId]
        });
    }
    if (info.menuItemId == "chatglm") {
        chrome.tabs.create({
            url: "https://chatglm.cn/",
            active: true
        });
    }
});

function openInNewTab(id) {
    let url = ''
    let obj = {
        "Android1": '6461d579', "Android2": '6461d6b', "IOS1": '6461d65', "IOS2": '6461d6c'
    }
    if (id == "allApp") {
        url = 'https://mobile.umeng.com/platform/apps/list'
    } else if (id == "chatglmPage") {
        url = 'https://chatglm.cn/'
    } else {
        url = `https://mobile.umeng.com/platform/${obj[id]}/function/events/dashboard`
        console.log(id, obj[id], url)

    }
    window.location.href = url;
}

3、content_scripts 相关配置和编码

manifest.json 配置

"content_scripts": [
        {
            "matches": [
                "https://*/*"
            ],
            "css": [
                "bossjob.css"
            ],
            "js": [
                "jquery-2.1.4.min.js",
                "JsonExportExcel.min.js",
                "bossjob.js"
            ]
        }
    ],

bossjob.js 编码

浏览器缓存函数封装

async function getAllAppEvent() {
        // let ret = await clearStorage()
        // console.log(ret,'dsfdfds')

        let arr = ["Android1", "Android2", "IOS1", "IOS2"]
        let ret = await getStorageItem(null)
        if (!ret.Android1) {
            chrome.runtime.sendMessage({ action: "showNotification", title: "Notification", message: `缺少安卓1数据！` });
            return openInNewTab("Android1")
        }
        if (!ret.Android2) {

            chrome.runtime.sendMessage({ action: "showNotification", title: "Notification", message: `缺少安卓2数据！` });
            return openInNewTab("Android2")
        }
        if (!ret.IOS1) {

            chrome.runtime.sendMessage({ action: "showNotification", title: "Notification", message: `缺少IOS1数据！` });
            return openInNewTab("IOS1")
        }
        if (!ret.IOS2) {

            chrome.runtime.send