火狐扩展。如何从控制台访问“浏览器”命名空间？

Question

我正在尝试使用控制台访问“浏览器”环境 exbrowser.cookies.getAll但这在除扩展环境之外的任何地方都没有定义。

如果使用浏览器 API 请求的 .js 文件制作简单的 firefox 插件（扩展）： browser.cookies.getAll({}).then(console.log);

获取具有交互式预览的数组。

从扩展执行

如果在控制台中执行此命令

如何从控制台访问“浏览器”命名空间？

Answer 1

这是不可能的，browser.*或者chrome.*在开发者控制台上不可用，因为他们需要一个扩展的上下文来运行，而开发者控制台在当前页面的上下文上运行命令。

以下方法需要学习/了解 JavaScript 和 node.js 中的单元测试和集成测试，提供的示例过于简化，这绝不是生产就绪代码。

测试扩展和调试它的更好方法是为它编写测试。

1. 选择测试框架（Jest、Mocha + chai 等）并根据需要进行设置

2. 安装兴农铬包，它为您提供了存根的browser.*运行方法/ API的npm install --save-dev sinon-chrome

3. （可选）安装webextensions-API假票它为您提供了嘲笑的browser.*方法，通过运行/原料药npm install --save-dev webextensions-api-fake

4. （可选）安装webextensions-jsdom，它可以帮助您为 browser_action default_popup、sidebar_action default_panel 或背景页面/脚本编写测试

5. 按照以下示例开始编写测试

6. 为了调试您的扩展，在您选择的 IDE/编辑器中设置一个断点并运行测试，执行将在断点处停止，您将可以访问当时执行中的对象和变量的状态。这将帮助您了解事情正在执行的内容和方式，以及您在函数中传递的数据发生了什么。无需在console.log任何地方编写语句来检查您的输出或变量，调试器可以提供帮助。

7. （可选）webextensions-toolbox是另一个伟大的工具，用于编写具有相同代码库的跨浏览器扩展（您的扩展将在 chrome、firefox、opera、edge 上运行）。这还伴随着扩展的热重载page，因此您不必每次进行任何更改时都点击刷新。

通过遵循这种方法，它将改进您的开发工作流程并减少您必须在浏览器上点击刷新的次数。

使用 jest 测试框架的 sinon-chrome 存根的示例用法。
假设您已经编写了代码yourModule.js来测试/验证它是否适用于 yourModule.test.js您编写的代码：

import browser from 'sinon-chrome';
import yourModule from './lib/yourModule';

describe('moduleName', () => {
  beforeAll(() => {
    // To make sure yourModule uses the stubbed version
    global.browser = browser;
  });
  it('does something', async () => {
    await yourModule();
    // Lets assume your module creates two tabs
    expect(browser.tabs.create.calledTwice).toBe(true);
    // If you want to test how those browser methods where called
    expect(browser.tabs.create.firstCall.calledWithExactly({
      url: 'https://google.com',
    })).toBe(true);
    // Notice the usage of `.firstCall` here, this makes sure only the first time 
    // `browser.tabs.create` was called with the given args.
  });
});

当您使用 jest 运行此测试时， yourModule 将期望存在一个全局变量browser及其使用的 apis，这仅在真实浏览器中才有可能，但我们使用 sinon-chrome 包伪造了它，您的模块将在 node.js 中执行环境符合预期。

您无需在浏览器中运行它即可查看更改。您只需编写测试，编写代码以通过这些测试以及当所有测试都通过时。通过在浏览器中运行它来检查您的扩展程序，此时您的扩展程序将按您的预期运行。如果您向您的模块添加另一个功能并且您的测试失败，您就知道出了什么问题。

然而，上面的例子只确保browser.*方法/apis 是如何被调用的，为了测试你的模块的行为，你需要模拟这些方法/apis，这是 webextensions-api-fake 包进来的。你可以找到例子在其 github 上的 repo 中。

github 上的webextensions-jsdom 存储库中还提供了用于测试 browser_action default_popup、sidebar_action default_panel 或背景页面/脚本的示例。