谷歌扩展开发v3版本，自动请求接口

news2024/12/23 8:44:41

背景：pc端项目要是1个小时不动不请求，token会过期，写个插件每隔一段时间自动取请求一个接口，让token不过期
过程：在刚开始写的时候网上大部分是谷歌扩展开发v2版本的做法，先是把官方文档看了一下，最重要的是 manifest.json 里面的 "manifest_version": 3,"version": "2.6","name": "自动刷新2",这三个key，先要有一个初步的了解，大概得意思是从页面或者扩展上获取值，输入值，把值在popup.js contentScript.js background.js 里面传来传去，达到想要的传染效果，请求效果，改变页面的效果。v3用的请求方式是feach，v2用的xhr。看的时候一脸懵逼，可以先看看文档，然后看简单的案例，再去动手操作，比较合适。先要了解这些属性和通信方式很重要。看到boss招聘需求里有个谷歌扩展的要求，我就学了一下简单的使用。
效果：每隔3秒钟自动请求接口一次，让token不过期
使用：打开谷歌浏览器→设置→扩展程序→开启开发者模式→‘加载已解压的扩展程序’
扩展目录：

manifest.json

{
    "manifest_version": 3,
    "version": "2.6",
    "name": "自动刷新2",
    "action": {
        "default_popup": "popup.html"
    },
    "background": {
        "service_worker": "background.js",
        "type": "module"
    },

    "host_permissions": [
        "https://*/*"
    ],
    "permissions": [
        "cookies",
        "tabs",
        "storage",
        "activeTab",
        "https://*/*"
    ],
    "content_scripts": [{
        "matches": ["<all_urls>"],
        "js": ["contentScript.js"]
    }]
}

background.js

// 当插件安装后执行一次
chrome.runtime.onInstalled.addListener(() => {
    console.log('Extension installed');
});

// 监听页面更新事件
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
    if (changeInfo.status === 'complete') {
        // 向当前页面发送消息
        chrome.tabs.sendMessage(tabId, {
            action: 'getToken',
            requestUrl: 'https://www.baidu.com/api' //  自动请求的接口，尽量不要带参数，仅仅是请求一下保持token不过期就行了
        });
    }
});

// 监听来自content script的消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.action === 'sendToken') {
        function autoRequest() {
            // 获取到token后发送GET请求
            const url = request.requestUrl
            const headers = { Authorization: `Bearer ${request.token}` };
            fetch(url, { method: 'GET', headers })
                .then(response => response.json())
                .then(data => {
                    console.log(data);
                    // 在这里处理获取到的数据
                })
                .catch(error => {
                    console.log(request);
                });
        };
        autoRequest();

    }
});

contentScript.js

let timer;
let flag = false; // 防止重复请求的开关

// 监听来自background的消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.action === 'getToken') {
        function requestUrl() {
            if (timer) {
                timer = null
                clearTimeout(timer)
            }
            // 在这里获取当前页面的token
            const token = getTokenFromPage();
            if (!token) return;
            if (flag) return;
            flag = true;
            // 向background发送token
            timer = setTimeout(() => {
                flag = false
                chrome.runtime.sendMessage({ action: 'sendToken', token, requestUrl: request.requestUrl });
                requestUrl()
            }, 3000)
        };
        requestUrl()
    }
});

function getTokenFromPage() {
    // 在这里实现获取当前页面的token的逻辑
    // 返回获取到的token值
    let token = localStorage.getItem('token')
    return token || ""
}

popup.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div class="box">
        <button id="rBgInfo">按钮</button>
    </div>
</body>

</html>