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

Question

I'm trying of the console to access the "browser" environment ex browser.cookies.getAll but this not defined anywhere except extension environment.

If make simple firefox addon (extension) with one .js file where browser API request: browser.cookies.getAll({}).then(console.log);

get an array with an interactive preview.

Execute from extension

If execute this command in console

How to access "browser" namespace from console?

Answer 1

This is not possible, browser.* or chrome.* are not available on developer console because they need an extension's context to run and developer console runs commands on the context of current page.

The following approach requires learning/knowledge of unit testing and integration testing in JavaScript and node.js, the example provided is over-simplified, this is by no means production ready code.

---

A better approach for testing your extensions and debugging it is to write tests for it.

1. Choose a testing framework (Jest, Mocha + chai, etc) and set it up according to your needs

2. Install sinon-chrome package which provides you with stubs for browser.* methods/apis by running npm install --save-dev sinon-chrome

3. (Optional) Install webextensions-api-fake which provides you with mocks for browser.* methods/apis by running npm install --save-dev webextensions-api-fake

4. (Optional) Install webextensions-jsdom which helps you to write tests for your browser_action default_popup, sidebar_action default_panel or background page/scripts

5. Start writing tests by following the example below

6. In order to debug your extension, set a breakpoint in your IDE/Editor of choice and run the tests, the execution will stop at the breakpoint and you will have access the states of Objects and Variables at that time in execution. This will help you know what and how exactly things are executing and what's happening to the data you pass around in functions. There is no need for writing console.log statements everywhere for checking your output or variables, debuggers can help with that.

7. (Optional) webextensions-toolbox is another great tool for writing cross-browser extensions (Your extension will work on chrome, firefox, opera, edge) with the same code base. This also comes with hot-reloading of your extension page , so you don't have to hit refresh every time you make any changes.

By following this approach, it will improve your development workflow and will reduce the number of times you have to hit refresh on your browser.

Example usage of sinon-chrome stubs using jest testing framework.
Lets say you have written your code in yourModule.js then to test/verify that it works in yourModule.test.js you write:

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.
  });
});

When you run this test using jest, yourModule will expect there to exist a global variable browser with the apis it uses which is only possible in a real browser, but we faked it using the sinon-chrome package, your module will execute in node.js environment as expected.

You don't need to run it in the browser to see changes. You just write tests, write code to pass those tests and when all tests pass. Check your extension by running it in the browser, at this point in time your extension will run as you'd expect it to. If you add another feature to yourModule and your tests fail you know exactly what went wrong.

However the above example only makes sure how browser.* methods/apis were called, for you to test the behavior of yourModule you'd need to mock those methods/apis, this is were the webextensions-api-fake package comes in. You can find example in its repo on github.

Examples for testing your browser_action default_popup, sidebar_action default_panel or background page/scripts are also provided in the webextensions-jsdom repo on github.