TypeScript中使用chrome.scripting注入脚本的类型报错咨询

问题场景 #

需要将实现「点击按钮打印当前页用户选中文本」功能的Chrome扩展JS代码适配为TypeScript版本，原JS代码如下：

const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
let result;
try {
    [{ result }] = await chrome.scripting.executeScript({
        target: { tabId: tab.id },
        function: () => getSelection().toString(),
    });
} catch (e) {
    return;
}
console.log('Selection: ' + result);

适配过程中遇到两类报错：

• 解构executeScript返回值时提示：Property 'result' does not exist on type 'InjectionResult<unknown> | undefined'
• 调整result声明后触发：No overload matches this call.
  此前尝试过非空断言、可选链、抽离注入函数为独立函数等方式，均未解决问题，同时需要了解InjectionResult类型的官方查询渠道。

报错核心原因 #

• 类型定义中chrome.scripting.executeScript的返回值是InjectionResult<T>[]，数组元素可能为undefined，直接解构时TS无法确认元素存在，因此不允许读取result字段；默认泛型参数为unknown，TS无法自动推断注入函数的返回值类型
• 类型定义中注入脚本的配置字段为func，原代码使用function作为字段名，无法匹配TS重载规则，触发重载报错

可直接运行的修复后代码 #

const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
let result: string | undefined;
try {
    // 显式指定泛型为string，匹配选中文本的返回值类型
    const injectionResults = await chrome.scripting.executeScript<string>({
        target: { tabId: tab.id! }, // 当前激活标签页一定存在id，加非空断言
        func: () => window.getSelection().toString(), // 使用类型定义要求的func字段
    });
    // 先判断首项存在再读取result，排除undefined分支
    if (injectionResults[0]) {
        result = injectionResults[0].result;
    }
} catch (e) {
    return;
}
console.log('Selection: ' + result);

关键修复点说明 #

• 显式传入泛型参数<string>，替换默认的unknown类型，让TS识别result的类型为字符串
• 将配置字段从function改为func，匹配@types/chrome的类型定义，解决重载不匹配问题
• 给tab.id加非空断言，跳过标签页无id的边缘类型校验（当前窗口激活标签页必然存在合法id）
• 放弃直接解构返回值，先校验数组首项非空再读取result字段，排除元素为undefined的类型分支

InjectionResult类型参考查询渠道 #

• 本地查询：项目安装@types/chrome依赖后，直接在node_modules/@types/chrome/index.d.ts文件中搜索InjectionResult即可查看完整的类型定义、字段说明
• 官方文档查询：在Chrome开发者官方文档的扩展API板块，找到chrome.scripting命名空间，即可查看该类型的官方说明

内容的提问来源于stack exchange，提问作者muddv