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

Question

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

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

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

从扩展执行

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

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

Answer 1

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

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

---

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

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

2. 通过运行npm install --save-dev sinon-chrome安装sinon-chrome软件包，该软件包为您提供browser.* 存根 browser.*方法/ api。

3. （可选）安装webextensions-API假它将为您提供的嘲弄 browser.*运行方法/ API的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热重装一起提供，因此您不必每次进行任何更改都刷新。

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

通过玩笑测试框架使用sinon-chrome存根的示例用法。
假设您已经在yourModule.js编写了代码，然后通过编写以下代码来测试/验证其是否在yourModule.test.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来测试yourModule的行为，这是webextensions-api-fake软件包的附带内容。可以在github的仓库中找到示例 。

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