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

Question

我正在尝试通过控制台访问“浏览器”环境e.x。 browser.cookies.getAll，但是除了扩展环境之外，其他地方都没有定义。

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

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

从扩展名执行

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

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

Answer 1

这是不可能的，browser.*或chrome.*在开发者控制台上不可用，因为它们需要扩展程序的上下文才能运行，并且开发者控制台在当前页面的上下文中运行命令。

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

---

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

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

2. 安装sinon-chrome软件包，通过运行browser.*

为npm install --save-dev sinon-chrome方法/ api提供 stubs

3. （可选）安装webextensions-api-fake，通过运行browser.*

   npm install --save-dev webextensions-api-fake方法/ api提供模拟 >

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

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

6. 为了调试扩展程序，请在所选的IDE /编辑器中设置一个断点并运行测试，该执行将在该断点处停止，并且此时您可以访问Object和Variables的状态。执行。这将帮助您了解函数执行的内容，执行的方式以及执行过程中传递的数据的执行情况。无需到处编写console.log语句来检查您的输出或变量，调试器可以提供帮助。

7. （可选）webextensions-toolbox是使用相同代码库编写跨浏览器扩展（您的扩展将适用于chrome，firefox，opera，edge）的另一个好工具。扩展程序page的热重载也附带了此功能，因此您不必每次进行任何更改都刷新。

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

通过玩笑测试框架使用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会期望存在一个使用它使用的api的全局变量browser，只有在真正的浏览器中才可以使用，但是我们使用sinon-chrome软件包伪造了它，您的模块将按预期在node.js环境中执行。

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

不过，上面的示例仅确保了browser.*方法/ api的调用方式，为了测试模块的行为，您需要模拟那些方法/ api，这就是webextensions-api-fake软件包进来。您可以在github的仓库中找到example。

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