Webextensions API - 将数据从后台脚本传递到 devtools 面板

Question

我正在尝试将 Firefox Webextensions API 中的 POST 数据从后台脚本传递到我的自定义开发工具面板。

我得到了这样的 POST 数据：

browser.webRequest.onBeforeRequest.addListener( 
    getPostData, 
    { urls: ['<all_urls>'], types: ["main_frame"] }, 
    ['requestBody']
);

function getPostData( e )
{
    if( e.method == 'POST' )
    {
        window.postData = e.requestBody.formData;
        // do something...
    }
}

首先，我尝试使用 sendMessage 传递数据，但它需要在页面加载时打开 devtools，而我不希望那样。

然后，我尝试使用 runtime.getBackgroundPage()，但出现 getBackgroundPage is not a function 错误。

后来，我考虑过使用 Storage 保存数据，但我不确定该怎么做（以前从未做过），而且我认为这不是正确的方法。

有什么想法吗？我很困惑，尤其是因为这是我的第一个 Webextension。

Answer 1

我找到了一个不错的解决方案：

在 background.js 我有这个代码：

var postData = '';

// get POST data for each loaded page
browser.webRequest.onBeforeRequest.addListener(
    getPostData,
    { urls: ['<all_urls>'], types: ['main_frame'] }, 
    ['requestBody']
);

// listen to messages from devtools panel
browser.runtime.onMessage.addListener( ( message, sender, sendResponse ) => {

    switch( message.action )
    {
        // return POST data to devtools panel
        case 'getPostData':
            sendResponse({
                postData: postData
            });
            break;

        default:
            break;
    }

});

在我的 devtools.js 中我有这个代码：

let sending = browser.runtime.sendMessage({
    action: 'getPostData'
});

sending.then(

    response => {
        console.log( response.postData );
    },

    error => {
        console.error( error );
    }

);

希望对以后的人有所帮助。

Webextensions API - 将数据从后台脚本传递到 devtools 面板

Webextensions API - Pass data from background-script to devtools panel

javascript

firefox-addon

firefox-addon-webextensions