javascript - Firefox add-on: (Native app + Content Script + Background script) messaging

Question

I am working on a simple add-on that can parse the text of a page, example twitter.com, and then send it an external script and receive the response. The current workflow that I have is like this:

1. Connect to background script from content script.

2. Then Connect to native App from background script and receive the response

3. Format and pass the response to the content script which can finally make changes to the DOM.

I am receiving the following error when connecting to background script. Error:

Error: Attempt to postMessage on disconnected port

while the error is on line content.js:10:17 which is:

myPort.postMessage({idx: i, str: "they clicked the page!"});

I am not able to resolve this error.

content.js

console.log("LOADED!");
var currentTweetIndex = 0;
var tweets = null;
var myPort = browser.runtime.connect({name:"port-from-cs"}); //Connect to background script
//myPort.postMessage({str: "hello from content script"});

function AnalyzeTweets(){
        tweets = document.getElementsByClassName('tweet-text');
        for(var i = 0; i < tweets.length; i++) {
                myPort.postMessage({idx: i, str: "they clicked the page!"});
        }
}
function ColorTweet(index, tweet_class) {
        var A = tweets[index];
        if(tweet_class == "neutral"){
                color = "green";
        } else if (tweet_class == "toxic"){
                color = "yellow";
        } else if (tweet_class == "hateful") {
                color = "red";
        } else {
                console.log("UNKNOWN CLASS RECEIVED");
        }
        A.parentElement.style.backgroundColor = color;
}

myPort.onMessage.addListener(function(m) {
        console.log("In content script, received message from background script: ");
        console.log(m.idx + ": " + m.tweet_class);
        ColorTweet(m.idx, m.tweet_class);
});
document.body.addEventListener("click", function() {
        AnalyzeTweets();
        //       myPort.postMessage({str: "they clicked the page!"});
});

background.js

/* On startup, connect to the "ping_pong" app. */
var port = browser.runtime.connectNative("ping_pong");
var portFromCS; // connection from content script

/* Listen for messages from the native app. */
port.onMessage.addListener((response) => {
        console.log("Received: " + response);
        portFromCS.postMessage({tweet_class: "toxic", idx: 1});
        // Send response to content script
});

/* On a click on the browser action, send the app a message. */
browser.browserAction.onClicked.addListener(() => {
        console.log("Sending:  pinggasdfasdfas");
        port.postMessage("tested!");
});

////////////////////////////////////////////////////////////////////
/// Listen for connection from content-script
function connected(p) {
        portFromCS = p;
        portFromCS.onMessage.addListener(function(m) {
                console.log("> In background script, received message from content script")
                console.log(m);
                port.postMessage(m);
        });
}
browser.runtime.onConnect.addListener(connected);
//browser.browserAction.onClicked.addListener(function() {
//       portFromCS.postMessage({tweet_class: "toxic", idx: 1});
//});

manifest.json

{
        "description": "Native messaging example add-on",
        "manifest_version": 2,
        "name": "Native messaging example",
        "version": "1.0",
        "icons": {
                "48": "icons/message.svg"
        },

        "applications": {
                "gecko": {
                        "id": "[email protected]",
                        "strict_min_version": "50.0"
                }
        },

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

        "content_scripts": [
                {
                        "matches": ["*://*.twitter.com/*"],
                        "js": ["content.js"]
                }
        ],

        "browser_action": {
                "default_icon": "icons/message.svg"
        },

        "permissions": ["nativeMessaging"]
}

Answer 1

Apparently, the above logic works. The issue was that after loading the addon after any changes, we need to reload the tab to setup a connection between the native-app + background-script + content-script, otherwise it throws the above-mentioned error.