Question

Trying to communicate between my background.js and contentscript.js

manifest.json

{
    "name": "xxx",
    "version": "0.1",
    "manifest_version": 2,

    "permissions": [
        "tabs"
    ],

    "description": "xxx",
    "icons": { "16": "icon16.png",
               "48": "icon48.png",
               "128": "icon128.png" },

    "browser_action": {
        "default_title" : "xxx",
        "default_icon": "icon16.png",
        "default_popup": "popup.html"
    },

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

    "content_scripts" : [
    {
        "matches" : [ "http://*/*" ],
        "js" : [ "contentscript.js", "jquery.js" ]
    }
  ]
}

background.js

var listePdt = {};
var selectedPdt = null;
var selectedId = null;

function updatePdt(tabId)
{
    chrome.tabs.sendMessage(tabId, {}, function(pdt) {
            chrome.pageAction.show(tabId);
    });
}

chrome.tabs.onUpdated.addListener(function(tabId, change, tab) {
    if(change.status == "complete")
    updatePdt(tabId);
});

chrome.tabs.onSelectionChanged.addListener(function(tabId, info) {
    selectedId = tabId;
    // and other things
});

chrome.tabs.getSelected(null, function(tab) {
    updatePdt(tab.id);
});

contentscript.js

if(window == top)
{
    chrome.extension.onMessage.addListener(
        function(req, sender, sendResponse) {
            sendResponse(findPdt());
        }
    );
}

var findPdt = function() {

    // operations on a string

    return "string";
}

But I get the following error “Port error: Could not establish connection. Receiving end does not exist” in console for generated background page … dont understand why .

Any help plz ?

Answer 1

One thing that stands out is:

chrome.tabs.getSelected(null, function(tab) {
    updatePdt(tab.id);
});

It is currently deprecated (see here and here), and the new way looks like this (note that windowId: chrome.windows.WINDOW_ID_CURRENT is included as well to account for cases where you have multiple Chrome instances open (I had a number of them, apparently 🙂 ).

chrome.tabs.query(
  {windowId: chrome.windows.WINDOW_ID_CURRENT, active: true}, function(tab) {
  updatePdt(tab.id);
  } );

However as to your main problem, this (and getSelected) will both throw the Port error you are seeing when you load the extension from chrome://extensions, the New tab screen, or any other ‘non-standard’ page (Bookmarks, View Source, Inspect Element itself, etc.), so I would just disregard them. With your code, reload the extension, open your Inspect Element window, then go to another tab in your browser and reload the page – you should see the desired action complete (I added a console.log(pdt); call as part of the sendMessage call, and the requested value was returned. In other words, everything seemed to work fine 🙂