无法为“webextension-polyfill”库工作打字稿类型答案

【问题标题】：Unable to get work Typescript typings for 'webextension-polyfill' library无法为“webextension-polyfill”库工作打字稿类型
【发布时间】：2018-03-26 18:57:02
【问题描述】：

目前，我正在尝试将现有的 google chrome 扩展迁移到 Typescript。它在后台脚本中使用“webextension-polyfill”库，但 npm 中没有此库的定义。

我有以下“webextension-polyfill.d.ts”文件

interface Window {
    browser: typeof browser;
}

declare namespace browser.tabs {
    export function create(createProperties: chrome.tabs.CreateProperties): Promise<void>
    export function query(queryInfo: chrome.tabs.QueryInfo): Promise<chrome.tabs.Tab[]>
}

declare namespace browser.windows {
    export function getAll(getInfo: chrome.windows.GetInfo): Promise<chrome.windows.Window[]>
    export function create(window?: chrome.windows.CreateData): Promise<void>
}

我的导入看起来像：

import 'webextension-polyfill';

使用库的代码如下：

function createTab(url: string) {
    browser.tabs.create({url: url}).then(...)
}

编译成功，但出现运行时错误：

未捕获的类型错误：无法读取未定义的属性“选项卡”

在 DevTools 中我可以看到浏览器未定义。

我做错了什么？

【问题讨论】：

请edit 成为主题的问题：包括一个minimal reproducible example 重复问题。对于 Chrome 扩展程序或 Firefox WebExtensions，您几乎总是需要包含您的 manifest.json 和一些背景、内容和/或弹出脚本/HTML，通常是网页 HTML/脚本。寻求调试帮助的问题（“为什么我的代码没有按我想要的方式工作？”）必须包括：（1）期望的行为，（2）特定的问题或错误以及（3）重现它所需的最短代码在问题本身中。另请参阅：What topics can I ask about here? 和 How to Ask。
@Makyen 我认为这无关紧要......
@akaSybe 您描述的错误实际上不是来自 Typescript - 这是浏览器告诉您 browser 的值未定义。
@DerekBrown，我们没有得到足够的代码来复制错误。因此，我的评论是准确的。正如我所说，调试问题要求将重复问题的minimal reproducible example 包含在问题中。对于 Chrome 扩展，这几乎总是需要一个 manifest.json，因为它定义了代码的每个部分在什么上下文中运行，即非常与此错误相关，因为它适用于大多数问题。我们要么需要足够的代码/配置来复制，要么我们需要查看浏览器创建和实际加载的内容。
@DerekBrown 错误是因为 'webextension-polyfill' 的定义文件错误，我无法弄清楚如何正确导出所需的命名空间和函数

标签： google-chrome typescript google-chrome-extension firefox-addon-webextensions

【解决方案1】：

我找到了解决办法。

这是模块定义的工作示例：

webextension-polyfill.d.ts

declare namespace browser.tabs {
    export function create(tabInfo: chrome.tabs.CreateProperties): Promise<void>
    export function query(queryInfo: chrome.tabs.QueryInfo): Promise<chrome.tabs.Tab[]>
}

declare namespace browser.windows {
    export function create(createInfo: chrome.windows.CreateData): Promise<void>
    export function getAll(getInfo: chrome.windows.GetInfo): Promise<chrome.windows.Window[]>
}

declare module 'webextension-polyfill' {
    export = browser;
}

现在我可以导入“webextension-polyfill”库了：

import * as browser from 'webextension-polyfill';

有效

【讨论】：

感谢您的提示，您解除了对我的阻止 :) 我也刚刚尝试过，并且成功了：import * as browser from 'webextension-polyfill-ts'; 所以可能发生了一些变化（可能变得更容易了）。无论如何，您上面的类型声明很有帮助。