如何从后台脚本处理内容脚本中的回调?

时间:2017-05-20 17:59:00

标签: javascript google-chrome-extension

我正在向后台脚本发送消息并在侦听器中接收数据

内容脚本中的

function sendData(formdata,callback){
  chrome.runtime.sendMessage({data: formdata, method:
 'storeform'},function(response) {
              console.log(response.data);   
 });
}

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) { 
     if(request.method == "storeform")
     {
        //do some work

        });             
    }

我需要从侦听器调用sendData()的回调函数。 Inbetween内容脚本和后台脚本之间有多个消息和进程。请帮忙。 这里从后台脚本返回的是chrome.runtime.sendMessage。

2 个答案:

答案 0 :(得分:1)

消息只是JSON;他们不能包括功能。从内容脚本中,保存对回调函数的引用,然后在内容和后台脚本之间传递消息时包含该id。完成所有中间处理后,发送消息告诉内容脚本运行回调。当内容脚本收到带有回调ID的消息时,请查找回调函数并调用它。

内容脚本

var callbacks = {};

function sendData(formdata, callback) {
  // good-enough unique id
  var callbackId = (new Date()).getTime();
  callbacks[callbackId] = callback;
  chrome.runtime.sendMessage({
      data: formdata,
      method: 'storeform',
      callbackId,
  }, function(response) {
      console.log(response.data);   
  });
}

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) { 
     // if message includes a callback id, call it
     if (request.callbackId && callbacks[request.callbackId]) {
         callbacks[request.callbackId]();
     }
  }          
)

后台脚本

// everything done; call the callback
chrome.runtime.sendMessage({callbackId});

答案 1 :(得分:0)

根据问题中的说明,发送的message应该是一个对象({data: formdata, method: 'storeform'}),但是您can send any messages that you can JSON.stringify

简单,通用的例子

在下面的示例中,消息是字符串'Hello background script!'

function sendMessageFromTab() {
    const script = `
        (function() {
            const message = 'Hello background script!';

            chrome.runtime.sendMessage(message);
        })();
    `;

    chrome.tabs.executeScript({
        code: script
    });
}

function listenForMessages() {
    chrome.runtime.onMessage.addListener((message) => {
        console.log('Received message:', message);
    });
}


chrome.browserAction.onClicked.addListener(() => {
    // ^ Run the code e.g. when clicking the icon of the Extension
    listenForMessages();
    sendMessageFromTab();
});