execute a function in content script if response is sent from Background

问题

For my Chrome extension, I am attempting to post selected text to a PHP webpage. A solved question on this website (Chrome Extension: how to capture selected text and send to a web service) has helped me a lot in achieving this, but I want a different way of posting the text.
Instead of XMLHttpRequest as mentioned there, I want to send a hidden JS form from the content script. This method allows me to view or change the text before importing it to the database.

The problem is to get the trigger from the background to the content script. I already have a message the other way, so using the function(response) is desired. However, outside the “sendMessage”, I can’t listen for the response.cmd. And inside the “sendMessage”, I can’t get the response.cmd to trigger a function. Is there a solution for this, other than sending an all new message from the background script? The code I am referring to:

Background.js

chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
  if(request.cmd == "createSelectionMenu") {
    sendResponse({cmd: "saveText"}); //Do things
  }
});

Content_script.js

chrome.extension.sendMessage({ cmd: "createSelectionMenu", data: selectedText },
  function(response) {
    if(response.cmd == "saveText") { 
      createForm();
    }
  }
});

回答1:

What I do is following:

I keep track of my opened tabs

content script:

// connect to the background script
var port = chrome.extension.connect();

background script

// a tab requests connection to the background script
chrome.extension.onConnect.addListener(function(port) {
  var tabId = port.sender.tab.id;
  console.log('Received request from content script', port);

  // add tab when opened
  if (channelTabs.indexOf(tabId) == -1) {
    channelTabs.push(tabId);
  }

  // remove when closed/directed to another url
  port.onDisconnect.addListener(function() {
    channelTabs.splice(channelTabs.indexOf(tabId), 1);
  });
});

Now I can notify all my registered tabs (i.e. content scripts) from my background script when a certain action happened:

var notification = { foo: 'bar' };
for(var i = 0, len = channelTabs.length; i < len; i++) {
  chrome.tabs.sendMessage(channelTabs[i], notification, function(responseMessage) {
    // message coming back from content script
    console.log(responseMessage);
  });
}

And again, on the other side in the content script, you can add a listener on these messages:

chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.foo == 'bar') {
    executeStuff();
    // if a callback is given:
    sendResponse && sendResponse('success');
  }
});

It's a bit of a brainf*ck, because it's redundant at some places. But I like it best that way, because you can wrap it and make it a bit easier.

If you want to see how I am using this, see my repository on GitHub: chrome-extension-communicator.

来源：https://stackoverflow.com/questions/13364004/execute-a-function-in-content-script-if-response-is-sent-from-background

标签

javascript

background

google-chrome-extension

response

content-script