Chrome插件开发background_js支持跨域请求与返回async和await的处理

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    switch (request.type) {
        case 'fetchChromeXmlrpc':
            (async () => {
                const response = await fetch(request.apiUrl, request.fetchCORSParams);
                const resText = await response.text()
                // console.log("chrome.runtime.onMessage.addListener fetchChromeXmlrpc response:", resText)
                sendResponse(resText);
            })();
            break;
        case 'fetchChromeJson':
            (async () => {
                const response = await fetch(request.apiUrl, request.fetchCORSOptions);
                const resJson = await response.json()
                console.log("chrome.runtime.onMessage.addListener fetchChromeJson response:", resJson)
                sendResponse(resJson);
            })();
            break;
        // 你可以定义任意内容，使用sendResponse()来返回它
        case 'test':
            sendResponse({'msg': 'test'});
            break;
    }

    return true; // keep the messaging channel open for sendResponse
});

  "host_permissions": [ "*://*/*" ],

完整的minifist文章源自浅海拾贝-https://blog.terwergreen.com/chrome-plug-in-development-background_js-supports-cross-domain-requests-and-return-async-and-await-processing-z1siwqd.html

{
  "name": "思源笔记辅助工具",
  "version": "1.0.0",
  "manifest_version": 3,
  "author": "terwer",
  "description": "思源笔记辅助工具，支持博客式只读浏览，多平台文章发布。",
  "background": {
    "service_worker": "background.js"
  },
  "permissions": [
    "activeTab",
    "scripting"
  ],
  "host_permissions": [ "*://*/*" ],
  "web_accessible_resources": [
    {
      "resources": [
        "blog/index.html",
        "detail/index.html",
        "index.html"
      ],
      "matches": [
        "<all_urls>"
      ]
    }
  ],
  "action": {
    "default_popup": "blog/index.html"
  }
}

/**
 * 向Chrome发送消息
 * @param message 消息
 */
export function sendChromeMessage(message: any) {
    return new Promise((resolve) => {
        // @ts-ignore
        chrome.runtime.sendMessage(message, resolve)
    })
}

• xmlrpc

  /**
  * 自定义xmlrpc的请求与解析，解决apache xmlrpc的扩展问题
  * @param apiUrl
  * @param reqMethod
  * @param reqParams
  */
  export async function fetchCustom(apiUrl: string, reqMethod: string, reqParams: Array<string>) {
    let ret
  
    try {
        const methodBodyXml = Serializer.serializeMethodCall(reqMethod, reqParams, "utf8")
  
        // const response = await fetch(apiUrl, {
        //     method: "POST",
        //     headers: {
        //         "content-type": "text/xml"
        //     },
        //     body: methodBodyXml
        // })
  
        const fetchCORSParams = {
            method: "POST",
            headers: {
                "content-type": "text/xml"
            },
            body: methodBodyXml
        }
  
        const resXml = await sendChromeMessage({
            // 里面的值应该可以自定义，用于判断哪个请求之类的
            type: 'fetchChromeXmlrpc',
            apiUrl: apiUrl, // 需要请求的url
            fetchCORSParams: fetchCORSParams
        });
        logUtil.logInfo("fetchChromeXmlrpc resXml=>", resXml)
  
        const parseResult: any = xmlParser.parse(resXml)
        logUtil.logInfo("parseResult=>", parseResult)
  
        const resJson = parseResult.methodResponse || {}
        logUtil.logInfo("resJson=>", JSON.stringify(resJson))
  
        return resJson
    } catch (e: any) {
        throw new Error(e)
    }
  
    return ret
  }
  
  /**
  * 兼容Chrome插件的xmlrpc API
  * @param apiUrl 端点
  * @param reqMethod 方法
  * @param reqParams 参数
  */
  private async fetchChromeCORS(apiUrl: string, reqMethod: string, reqParams: Array<string>): Promise<string> {
    let result
    logUtil.logInfo("fetchChrome apiUrl=>")
    logUtil.logInfo(apiUrl)
  
    const fetchCORSParams = {
        reqMethod: reqMethod,
        reqParams: reqParams
    }
    logUtil.logInfo("fetchChrome fetchCORSParams=>")
    logUtil.logInfo(fetchCORSParams)
  
    result = await fetchCustom(apiUrl, reqMethod, reqParams)
    if (!result || result == "") {
        throw new Error("请求错误或者返回结果为空")
    }
    logUtil.logInfo("fetchCustom result=>", result)
  
    // @ts-ignore
    // const resText = await chrome.runtime.sendMessage({
    //     // 里面的值应该可以自定义，用于判断哪个请求之类的
    //     type: 'fetchChromeXmlrpc',
    //     apiUrl: apiUrl, // 需要请求的url
    //     fetchCORSParams: fetchCORSParams
    // });
    return result
  }
  

• json

  /**
  * 请求中转支持Chrome插件跨域
  * @param apiUrl 请求地址
  * @param fetchOptions 请求参数
  * @param formJson 可选，发送form请求才需要
  */
  private async fetchChromeCORS(apiUrl: string, fetchOptions: RequestInit, formJson?: any[]): Promise<string> {
    let result
    logUtil.logInfo("fetchChrome apiUrl=>")
    logUtil.logInfo(apiUrl)
  
    const fetchCORSOptions = fetchOptions
    // 如果是form请求，进行转换
    if (formJson) {
        // 将formJson转换为formData
        const form = new URLSearchParams();
        formJson.forEach((item: any) => {
            form.append(item.key, item.value)
        })
        fetchCORSOptions.body = form
    }
    logUtil.logInfo("fetchChrome apiUrl=>", fetchCORSOptions)
  
    const resJson = await sendChromeMessage({
        // 里面的值应该可以自定义，用于判断哪个请求之类的
        type: 'fetchChromeJson',
        apiUrl: apiUrl, // 需要请求的url
        fetchCORSOptions: fetchCORSOptions
    });
    logUtil.logInfo("fetchChromeJson resJson=>", resJson)
  
    // @ts-ignore
    return resJson;
  }
  

到此，完美实现。文章源自浅海拾贝-https://blog.terwergreen.com/chrome-plug-in-development-background_js-supports-cross-domain-requests-and-return-async-and-await-processing-z1siwqd.html