如何在 Firefox WebExtensions 插件中使用 chrome.storage 和 runtime.connect

Question

我正在尝试创建一个执行以下操作的 Firefox 插件：

• 点击页面正文时向后台脚本发送消息
• 发送的消息由后台脚本存储
• 后台脚本检索存储的消息
• 当点击插件浏览器按钮时，存储的消息会从后台脚本发送到内容脚本
• 内容脚本显示收到的消息

我正在使用适用于 Windows 的 Firefox 48 版，但无法正常工作。请有人指出我做错了什么。

这是我的内容脚本：

// setup message channel between this script and background script
var msgPort = chrome.runtime.connect({name:"msgPort"});

// fires when background script sends a message
msgPort.onMessage.addListener(function(msg) {
    console.log(msg.txt);
});

// sends a message to background script when page is clicked
document.body.addEventListener("click", function() {
    msgPort.postMessage({txt: "page clicked"});
});

这是我的后台脚本：

var msgPort;
var tmp;

// fires when message port connects to this background script
function connected(prt)
{
    msgPort = prt;
    msgPort.postMessage({txt: "message channel established"});
    msgPort.onMessage.addListener(gotMessage);
}

// fires when content script sends a message
frunction gotMessage(msg)
{
    // store the message
    chrome.storage.local.set({message : msg.txt});

    // read the stored message back again
    chrome.storage.local.get("message", function(item){
        tmp = item;
    });
}

// send the saved message to the content script when the add-on button is clicked
chrome.browserAction.onClicked.addListener(function() {
    msgPort.postMessage({txt: "saved message: "+tmp});
});

chrome.runtime.onConnect.addListener(connected);

这是我的清单：

{
    "name": "test",

    "manifest_version": 2,

    "version": "1.0",

    "permissions": ["activeTab","storage"],

    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["content.js"]
        }
    ],

    "background": {
        "scripts": ["background.js"]
    },

    "browser_action": {
        "default_title": "Go"
    },

    "applications": {
        "gecko": {
        "id": "test@example.com",
        "strict_min_version": "48.0a1"
        }
    }
}

Answer 1

虽然您的代码中的其他地方可能存在其他问题，但一个问题是您没有考虑到 chrome.storage.local.set 是异步的这一事实。

正如您的代码一样，您对chrome.storage.local.get 的调用会在您请求通过chrome.storage.local.set 存储数据后立即执行，而无需等待数据实际存储。因此，数据可能尚不可用。

您的gotMessage(msg) 函数应该看起来更像：

function gotMessage(msg)
{
    // store the message
    chrome.storage.local.set({message : msg.txt}, function(){
        // read the stored message back again
        chrome.storage.local.get("message", function(item){
            tmp = item;
            //Indicate that the data is available
            //Only do this if you desire.
            //chrome.browserAction.setTitle({title:'Send data to content script'});
        });
    });
}

注意：您的问题中还有一个语法错误，frunction gotMessage(msg) 应该是 function gotMessage(msg)。

storage.local 可用于内容脚本：
您当前正在内容脚本和后台脚本之间来回传递消息，以便在后台脚本中 set() 和 get() storage.local 的内容。我假设您这样做是为了测试runtime.connect、browser_action 等。另一种可能性是您不知道您可以在内容脚本中使用storage.local 来get 和set。

全功能代码：

还有多个其他问题。大多数问题是由于用户需要使其工作的一些复杂的操作序列的结果。由于 WebExtensions/Firefox 的某些特性，需要做一些事情。：

1. 完全删除以前安装的任何旧版本的插件
   1. 来自about:addons（Ctrl-Shift-A，Cmd-Shift kbd>-A 在 OSX 上），“删除”插件。
   2. 刷新所有内容页面（或至少任何您正在测试的页面）。这会从以前的安装中删除任何注入的内容脚本。当插件被移除/禁用时，内容脚本不会被 Firefox 自动移除。
2. 从about:debugging重新加载临时插件。
3. 刷新您正在测试的页面。这是必要的，因为当加载项重新加载时，内容脚本首先被注入。在内容脚本中，您执行runtime.connect()。如果没有first runtime.onConnect 侦听器，这将不会连接。因此，内容脚本必须在后台脚本之后加载。
4. 点击内容页面
5. 点击browser_action按钮`

在不知道您需要准确执行此序列的情况下，很难让它完成您希望它执行的操作。

弄清楚发生了什么的一个重要部分是您拥有大量仅包含在代码中的状态信息。没有向用户说明内容脚本或后台脚本处于什么状态。为了帮助可视化每个脚本中发生的情况，我添加了大量对 console.log 的调用更好地说明脚本中发生的事情。

我对代码进行了重大修改：

1. 当尝试发送消息时（由于页面被点击），识别出没有建立连接，并再次尝试获取连接（结果：不再需要执行上述用户序列中的#3）。
2. 如果检测到有连接并丢失连接，则禁用自身。这种情况最可能的原因是受影响的内容脚本被重新加载的加载项孤立。 （结果：不再需要按照上面的顺序执行#1；可以在不删除旧版本/重新加载内容页面的情况下重新加载加载项。）
3. 代码中存在其他问题。我相信我在代码中添加了 cmets 足以解释它们。

现在在浏览器控制台中生成的输出是：

1471884197092 addons.xpi WARN Addon with ID demo-runtime.connect-and-storage.local@example.com already installed, older version will be disabled
        content: Content script injected.
        content: Making message port available for connection
alert() is not supported in background windows; please use console.log instead.
Open the Browser Console.
background: In background script.
background: listening for a connection
        content: page clicked
        content: Sending message failed: not yet connected
        content: Retrying connection for message: Object { type: "page clicked" }
        content: Making message port available for connection
background: Port connected: sending confirmation message: Object { type: "message channel established" }
        content: Received message: type: message channel established  
        content: Sending pending message Object { type: "page clicked" }
        content: Sending message Object { type: "page clicked" }
background: Received message: Object { type: "page clicked" }
background: Got data from storage.local.get: Object { message: "page clicked" }
background: Button clicked sending message: Object { type: "saved message", data: "page clicked" }
        content: Received message: type: saved message 
                          message: data: page clicked

manifest.json：

{
    "name": "Demo runtime.connect and storage.local",
    "manifest_version": 2,
    "version": "0.1",
    "permissions": ["activeTab","storage"],
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["content.js"]
        }
    ],

    "background": {
        "scripts": ["background.js"]
    },

    "browser_action": {
        "default_title": "Data not yet available",
        "browser_style": true
    },

    "applications": {
        "gecko": {
        "id": "demo-runtime.connect-and-storage.local@example.com",
        "strict_min_version": "48.0a1"
        }
    }
}

background.js：

//* For testing, open the Browser Console
try{
    //Alert is not supported in Firefox. This forces the Browser Console open.
    //This abuse of a misfeature works in FF49.0b+, not in FF48
    alert('Open the Browser Console.');
}catch(e){
    //alert throws an error in Firefox versions below 49
    console.log('Alert threw an error. Probably Firefox version below 49.');
}
//*
console.log('background: In background script.');

var msgPort;
var dataFromStorage;

// Fires when message port connects to this background script
function connected(prt) {
    msgPort = prt;
    msgPort.onMessage.addListener(gotMessage); //This should be done first
    let message = {type: "message channel established"};
    console.log('background: Port connected: sending confirmation message:', message);
    msgPort.postMessage(message);
}

//Fires when content script sends a message
//Syntax error this line (misspelled function)
function gotMessage(msg) {
    console.log('background: Received message:', msg);
    // store the message
    chrome.storage.local.set({message : msg.type}, function(){
        // read the stored message back again
        chrome.storage.local.get("message", function(item){
            console.log('background: Got data from storage.local.get:',item);
            //You were setting tmp (now dataFromStorage) to the item object, not the
            //  message key which you requested.
            /*
            for(x in item){
                console.log('background: property of item:',x);
            }
            //*/
            dataFromStorage = item.message;
            //Indicate to the user that the data is available
            chrome.browserAction.setTitle({title:'Send data to content script'});
        });
    });
}

// send the saved message to the content script when the add-on button is clicked
chrome.browserAction.onClicked.addListener(function() {
    //msgPort not defined unless user has clicked on page
    if(msgPort) {
        let message = {type: "saved message",data:dataFromStorage};
        console.log('background: Button clicked sending message:', message);
        msgPort.postMessage(message);
    } else {
        console.log('background: No message port available (yet).');
    }
});

//Be open to establishing a connection.  This must be done prior to the
//  chrome.runtime.connect elsewhere in your code. 
chrome.runtime.onConnect.addListener(connected);
console.log('background: Listening for a connection');

content.js：

console.log('\tcontent: Content script injected.');

var isConnected=false;
var retryConnectionTimerId=-1; //In case we want to cancel it
var retryConnectionCount=0;
var messageBeingRetried=null;

//setup message channel between this script and background script
var msgPort;

function messageListener(msg){
    //Using a closure for this function is a bad idea.  This should be a named
    //  function defined at the global scope so we can remove it as a
    //  listener if the background script sends a message to disconnect.
    //  You need to be able to disable any active content scripts if the 
    //  add-on is disabled/removed.  This is a policy from Mozilla. However,
    //  for WebExtensions it is not yet possible due to the current lack of the 
    //  runtime.onSuspend event.
    if(typeof msg === 'object' && msg.hasOwnProperty('type')){
        //Should look specifically for the message indicating connection.
        console.log('\tcontent: Received message: type:', msg.type
            ,(msg.hasOwnProperty('data') ? '\n\t\t\t  Message: data:':'')
            ,(msg.hasOwnProperty('data') ? msg.data : '')
        );
        if(msg.type === 'disableAddon'){
            //Allow for the background script to disable the add-on.
            disableThisScript('Received disableAddon message');
        }
        if(isConnected && msg.type === 'message channel established'){
            //We are in a content script that is left over from a previous load
            //  of this add-on. Or, at least that is the most likely thing 
            //  while testing.  This probably needs to change for a real add-on.
            //  This is here because reloading the temporary add-on does not
            //  auto-disable any content scripts.
            disableThisScript('Received second channel established message');
            return;
        }//else
        isConnected=true; //Any correctly formatted message received indicates connection
        //Immediately send a message that was pending (being retried).
        //  Note: This only immediately sends the message which was most recently attempted
        //  to send via sendMessage, not all messages which might be waiting in timers.
        //  Any others will be sent when their timers expire.
        sendPendingMessageIfPending();
    }else{
        console.log('\tcontent: Received message without a "type":', msg);
    }
}

function receiveDisconnect(){
    //The port was disconnected
    disableThisScript('Port disconnected');
    isConnected=false;
}

function makePortAvailableForConnection(){
    console.log('\tcontent: Making message port available for connection');
    if(msgPort && typeof msgPort.disconnect === 'function'){
        //Call disconnect(), if we have already tried to have a connection
        msgPort.disconnect();
    }
    //Try to make a connection. Only works if ocConnect listener
    //  is already established.
    msgPort = chrome.runtime.connect({name:"msgPort"});
    //Fires when background script sends a message
    msgPort.onMessage.addListener(messageListener);
    msgPort.onDisconnect.addListener(receiveDisconnect);
    //Can not use runtime.onConnect to detect that we are connected.
    //  It only fires if some other script is trying to connect
    //  (using chrome.runtime.connect or chrome.tabs.connect)
    //  to this script (or generally). It does not fire when the connection
    //  is initiated by this script.
    chrome.runtime.onConnect.addListener(portConnected); //Does not fire
}

function portConnected(){
    //This event does not fire when the connection is initiated,
    //  chrome.runtime.connect() from this script.
    //  It is left in this code as an example and to demonstrate that the event does
    //  not fire.
    console.log('\tcontent: Received onConnect event');
    isConnected=true;
}

// sends a message to background script when page is clicked
function sendClickMessage() {
    console.log('\tcontent: Page clicked');
    sendMessage({type: "page clicked"});
            chrome.storage.local.get("message", function(item){
            console.log('content: Got data from storage.local.get:',item);
            });

}

function clearPendingMessage(){
    window.clearTimeout(retryConnectionTimerId);
    messageBeingRetried=null;
}

function sendPendingMessageIfPending() {
    //Pending messages should really be implemented as a queue with each message
    //  being retried X times and then sent once a connection is made. Right now
    //  this works for a single message.  Any other messages which were pending
    //  are only pending for the retry period and then they are forgotten.
    if(messageBeingRetried !== null && retryConnectionTimerId){
        let message = messageBeingRetried;
        clearPendingMessage();
        console.log('\tcontent: Going to send pending message', message);
        sendMessage(message);
    }
}

function retryingMessage(message) {
    retryConnectionTimerId=-1;
    messageBeingRetried=null;
    sendMessage(message);
}

function sendMessage(message) {
    if(isConnected){
        try{
            console.log('\tcontent: Sending message', message);
            msgPort.postMessage(message);
            retryConnectionCount=0;
        }catch(e){
            if(e.message.indexOf('disconnected port') > -1){
                console.log('\tcontent: Sending message failed: disconnected port');
                if(isConnected){
                    console.log('\tcontent: Had connection, but lost it.'
                                + ' Likely add-on reloaded. So, disable.');
                    disableThisScript('Add-on likely reloaded.');
                }else{
                    retryConnection(message);
                }
            }else{
                console.log('\tcontent: Sending message failed: Unknown error', e);
            }
        }
    }else{
        console.log('\tcontent: Sending message failed: not yet connected');
        retryConnection(message);
    }
}

function retryConnection(message){
    if(retryConnectionCount>=5){
        //Limit the number of times we retry the connection.
        //  If the connection is not made by now, it probably won't be
        //  made at all.  Don't fill up the console with a lot of
        //  messages that might make it harder to see what is happening.
        retryConnectionCount=0; //Allow more retries upon another click event.
        //The current message is forgotten. It is now just discarded.
        return;
    }
    console.log('\tcontent: Retrying connection for message:', message);
    makePortAvailableForConnection();
    //Try sending the message after a timeout.
    //  This will result in the repeated attempts to
    //  connect and send the message.
    messageBeingRetried=message;
    retryConnectionTimerId = window.setTimeout(retryingMessage,500,message);
    retryConnectionCount++;
}

function disableThisScript(reason){
    console.log('\tcontent: Disable the content script:', reason);
    //Gracefully disable everything previously set up.
    msgPort.onMessage.removeListener(messageListener);
    msgPort.onDisconnect.removeListener(receiveDisconnect);
    try{
        msgPort.disconnect();
    }catch(e){
        //most likely the port was already disconnected
    }
    chrome.runtime.onConnect.removeListener(portConnected);
    document.body.removeEventListener("click", sendClickMessage);
    isConnected=false;
}

//Making the connection available will silently fail if there is not already a
//  onConnect listener in the background script.  In the case of a "temporary"
//  add-on upon load or reload, the content script is run first and
//  no connection is made.
makePortAvailableForConnection();

document.body.addEventListener("click", sendClickMessage);

注意：
这适用于演示或学习，但不适用于生产扩展。代码中没有任何内容说明有多个选项卡。

您正在通过单击browser_action 按钮向内容脚本发送消息。这意味着您需要能够仅将消息从后台脚本显式发送到用户单击browser_action 按钮时显示在活动窗口中的选项卡中的内容脚本。例如，用户可能在一个页面中，单击内容，然后切换到另一个选项卡，然后单击browser_action 按钮。在这种情况下，应该将消息发送到当前活动的选项卡，而不是被切换离开（建立连接）的选项卡。

虽然您可以跟踪收到连接或单击消息时处于活动状态的选项卡（这会起作用，因为实际建立连接或发送消息，基于单击事件（假定为用户输入）） )，最好使用tabs.connect()，它只允许您与特定选项卡建立连接。知道哪个runtime.Port 对应于每个选项卡将允许您确保仅向在单击browser_action 按钮时处于活动状态的选项卡发送消息。您需要保留一个数组或对象，其中包含由选项卡 ID 索引的连接端口。