How can i use the port.postmessage to send info fr

Question

I've been able to send data from the background page to the content script. but this is done using sendrequest(). I will need to send data back and forth so I'm trying to figure out the correct syntax for using the port.postmessage from background page to content script. I have already read, several times, the google page on Messaging and I don't seem to get it. I even copied the code directly from the page and tested with no result. All I'm trying to do for now is send data from background page to content script using connect as opposed to sendrequest. The response from the content script I will deal with later as code with this response has been the main thorn. I just want to understand the process one step at a time without the extra knowledge of sending a response back.

I'm not sure if this contravenes the rules of this board but can someone PLEASE give me an example of some code to do this (background page and content script excerpt, the background page is the sender).

I've asked for assistance several times on this site only to be told to read the documentation or check out sites I've already visited.

Answer 1

Detailed documentation and easy (the most basic) examples shown in the documentation page.

Plus, a quick search in stackoverflow will allow you to see many similar questions with detailed answers.

Answer 2

If you just want any example of opening a port from the extension to a content script, here's the simplest I can think of. The background just opens a port and sends "Hello tab!" over the port, and the content script sends a message to the background any time you click on the webpage.

I think this is pretty simple, so I don't know why you are so stressed. Just make sure that the content tab is already listening when the background tries to connect (I do this by waiting until the "complete" event).

manifest.json:

{
  "name": "TestExt",
  "version": "0.1",
  "background_page": "background.html",
  "content_scripts": [{
    "matches": ["http://localhost/*"],  // same as background.html regexp
    "js": ["injected.js"]
  }],
  "permissions": [
    "tabs"  // ability to inject js and listen to onUpdated
  ]
}

background.html:

<script>
var interestingTabs = {};
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
  // same as manifest.json wildcard
  if (changeInfo.url && /http:\/\/localhost(:\d+)?\/(.|$)/.test(changeInfo.url)) {
    interestingTabs[tabId] = true;
  }
  if (changeInfo.status === 'complete' && interestingTabs[tabId]) {
    delete interestingTabs[tabId];
    console.log('Trying to connect to tab ' + tabId);
    var port = chrome.tabs.connect(tabId);
    port.onMessage.addListener(function(m) {
      console.log('received message from tab ' + tabId + ':');
      console.log(m);
    });
    port.postMessage('Hello tab!');
  }
});
</script>

injection.js:

chrome.extension.onConnect.addListener(function(port) {
  console.log('Connected to content script!');
  port.onMessage.addListener(function(m) {
    console.log('Received message:');
    console.log(m);
  });
  document.documentElement.addEventListener('click', function(e) {
    port.postMessage('User clicked on a ' + e.target.tagName);
  }, true);
});