火狐扩展。如何从控制台访问 "browser" 命名空间？

Question

我正在尝试使用控制台访问 "browser" 环境 e.x。 browser.cookies.getAll 但除了扩展环境外，这在任何地方都没有定义。

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

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

从扩展执行

如果在控制台执行此命令

如何从控制台访问 "browser" 命名空间？

Answer 1

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

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

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

选择测试框架（Jest、Mocha + chai 等）并根据需要进行设置
安装 sinon-chrome 软件包，它为运行ning 提供 stubs for browser.* methods/apis npm install --save-dev sinon-chrome
（可选）安装 webextensions-api-fake 为 browser.* methods/apis 提供 mocks by 运行宁npm install --save-dev webextensions-api-fake
（可选）安装 webextensions-jsdom 可帮助您为 browser_action default_popup、sidebar_action default_panel 或后台编写测试page/scripts
按照下面的示例开始编写测试
为了调试您的扩展，在您选择的 IDE/Editor 和运行测试中设置一个断点，执行将在断点处停止，您将可以访问执行时对象和变量的状态。这将帮助您了解事情正在执行什么以及如何执行，以及您在函数中传递的数据发生了什么。无需为了检查输出或变量而到处编写 console.log 语句，调试器可以提供帮助。
（可选）webextensions-toolbox 是另一个用于编写跨浏览器扩展的好工具（您的扩展可以在 chrome、firefox、opera、edge 上使用相同的代码）根据。这也伴随着您的扩展程序的热重载 page，因此您不必在每次进行任何更改时都点击刷新。

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

使用 jest 测试框架的 sinon-chrome 存根的示例用法。
假设您已经在 yourModule.js 中编写了代码，然后在 test/verify 中可以正常工作 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 时，你的模块会期望存在一个全局变量 browser 和它使用的 api ，这只有在真实的浏览器中才有可能，但是我们使用 sinon-chrome 包伪造了它，您的模块将按预期在 node.js 环境中执行。

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

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

browser_action default_popup、sidebar_action default_panel 或后台 page/scripts 的示例也在 webextensions-jsdom 仓库中提供 github.

火狐扩展。如何从控制台访问 "browser" 命名空间？

Firefox extension. How to access "browser" namespace from console?

javascript

firefox

firefox-addon

firefox-addon-sdk

firefox-addon-webextensions