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或背景頁面/腳本的示例 。