我的 Chrome 扩展程序使用消息传递从后台页面上扩展程序的内置本地存储区域检索各种值。

我喜欢 chrome 消息传递的一点是，它允许您在 sendMessage 调用中包含一个回调函数，如下所示:

chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
    console.log(response.farewell);   
});

相应的消息接收代码如下所示(来自 Chrome 扩展文档的示例代码):

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log(sender.tab ?
                "from a content script:" + sender.tab.url :
                "from the extension");
    if (request.greeting == "hello")
      sendResponse({farewell: "goodbye"});
  });

我正在尝试将我的扩展程序转换为 Safari 扩展程序格式，但我不知道如何将 Chrome 的 sendMessage/onMessage 函数映射到 Safari 的 safari.self.tab.dispatchMessage(name, data) 消息处理函数

甚至可以在 Safari 的 dispatchMessage 函数调用中包含回调函数吗？ 如果没有，我应该如何解决这个限制？

最佳答案

在只提供单向消息传递系统的环境中，您始终可以自己实现“消息回调”，方法是将唯一 ID 与每条消息相关联，并将回调存储在将这些 ID 映射到的字典中回调。

在这个答案的最后，我从我的跨浏览器的源代码中复制粘贴了 Safari 特定的存储模块 Lyrics Here extension ，它提供了以下 API:

• config.getItem(key, callback)
• config.setItem(key, value, callback)
• config.removeItem(key, callback)
• config.clear(回调)

getItem 的回调包含与键关联的值(如果找到)。其他回调接收一个 bool 值，指示操作是否成功。

源代码带有注释并包含处理一些边缘情况的片段。如果有任何不清楚的地方，请随时向我提问。

配置-safari.js ( AMD )

// Adapter for maintaining preferences (Safari 5+)
// All methods are ASYNCHRONOUS
define('config-safari', function() {
    var config = {};
    var callbacks = {};
    ['getItem', 'setItem', 'removeItem', 'clear'].forEach(function(methodName) {
        config[methodName] = function() {
            var args = [].slice.call(arguments);
            var callback = args.pop();
            var messageID = Math.random();
            callbacks[messageID] = callback;
            
            var message = {
                type: methodName,
                messageID: messageID,
                args: args
            };
            safari.self.tab.dispatchMessage('config-request', message);
        };
    });
    config.init = function() {
        if (typeof safari === 'undefined') {
            // Safari bug: safari is undefined when current context is an iframe
            // and src="javascript:''"
            // This error is only expected on YouTube.
            // config.getItem is triggered in main, so we just redefine
            // it. Don't overwrite setItem, etc., so that errors are thrown
            // when these methods are used.
            config.getItem = function(key, callback){
                callback();
            };
            return;
        }
        safari.self.addEventListener('message', function(event) {
            if (event.name === 'config-reply') {
                var messageID = event.message.messageID;
                var callback = callbacks[messageID];
                // Check if callback exists. It may not exist when the script is
                // activated in multiple frames, because every frame receives the message
                if (callback) {
                    delete callbacks[messageID];
                    callback(event.message.result);
                }
            }
        }, true);
    };
    return config;
});

global.html 片段:

<script>
(function(exports) {
    var config = {};
    config.getItem = function(key, callback) {
        var result = safari.extension.settings.getItem(key);
        if (typeof result === 'string') {
            try {
                result = JSON.parse(result);
            } catch (e) {
                // Extremely unlikely to happen, but don't neglect the possibility
                console.log('config.getItem error: ' + e);
                result = undefined;
            }
        }
        callback(result);
    };
    // callback's argument: true on success, false otherwise
    config.setItem = function(key, value, callback) {
        var success = false;
        try {
            value = JSON.stringify(value);
            // Safari (5.1.5) does not enforce the database quota,
            // let's enforce it manually (ok, set the quota per key, since
            // the performance issue only occur when a specific key has an outrageous high value)
            // 1 MB should be sufficient.
            if (value.length > 1e6) {
                throw new Error('QUOTA_EXCEEDED_ERR: length=' + value.length);
            }
            safari.extension.settings.setItem(key, value);
            success = true;
        } catch (e) {
            console.log('config.setItem error: ' + e);
        }
        callback(success);
    };
    // callback's argument: true on success, false otherwise
    config.removeItem = function(key, callback) {
        safari.extension.settings.removeItem(key);
        callback(true);
    };
    // callback's argument: true on success, false otherwise
    config.clear = function(callback) {
        safari.extension.settings.clear();
        callback(true);
    };

    // config's message handler
    function handleConfigRequest(event) {
        var args = event.message.args;
        // Last argument: Always a callback
        args.push(function(result) {
            // Note: All of the config methods send a callback only once
            // Behavior for calling the callback twice is undefined.
            
            // Send a reply to trigger the callback at the sender's end
            event.target.page.dispatchMessage('config-reply', {
                messageID: event.message.messageID,
                result: result
            });
        });
        config[event.message.type].apply(config, args);
    }
    
    // Export
    exports.handleConfigRequest = handleConfigRequest;
})(window);
</script>
<script>
safari.application.addEventListener('message', function(event) {
    switch (event.name) {
        case 'config-request':
            handleConfigRequest(event);
            break;
        /* ... other things removed ... */
    }
}, true);
</script>

关于javascript - 是否有一种简单的转换方法可以将 chrome 消息传递转换为 safari 消息传递语法？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20583309/