Messages are not sent in embedded extension

Add-ons Development
#1

I am trying to intiaite a connection-oriented messaging in hybrid-extension. I have the files shown below. The problems are: 1) the webextension code gets executed (i.e. when I open a mozilla.org website, the blue border appears) but the log message that is above the border in the same script file does not appear. Why?. 2) No errors appear in the console. But, no messages transferred between the extensions. Can you please point to me why the messages do not appear in the console? and whether the webextension background script borderify.js is supposed to work in parrallel with the index.js? if so, why the first line of the borderify.js did not print? while the blue border get executed in the documents?

Here are the simple example scripts:

  1. package.json

    {
    “title”: “My Jetpack Addon”,
    “name”: “testhybridv2”,
    “version”: “0.0.1”,
    “description”: “A basic add-on”,
    “main”: “index.js”,
    “author”: “”,
    “engines”: {
    “firefox”: “>=38.0a1”,
    “fennec”: “>=38.0a1”
    },
    “license”: “MIT”,
    “hasEmbeddedWebExtension”: true,
    “keywords”: [
    “jetpack”
    ]
    }

  2. index.js

    const webExtension = require(“sdk/webextension”);
    console.log(“inside sdk embedding”);
    webExtension.startup().then(api => {
    const {browser} = api;
    browser.runtime.onMessage.addListener((msg, sender, sendReply) => {
    if (msg == “message-from-webextension”) {
    sendReply({ content: “reply from legacy add-on” });
    }
    }); });

  3. In the webextension folder: borderify.js

    console.log(“inside borderify”);
    document.body.style.border = “5px solid blue”;

    var port = browser.runtime.connect({name: “connection-to-legacy”});

    port.onMessage.addListener(function(message) {
    console.log("Message from legacy add-on: " + message.content);
    });

  4. manifest.json

    {

    “manifest_version”: 2,
    “name”: “Borderify”,
    “version”: “1.0”,

    “description”: “Adds a red border to all webpages matching mozilla.org.”,

    “icons”: {
    “48”: “icons/border-48.png”
    },

    “content_scripts”: [
    {
    “matches”: ["://.mozilla.org/*"],
    “js”: [“borderify.js”]
    }
    ]

    }

#2

I did a silly mistake. I forgot to add the required code to send message from webextension js file to the SDK as:

browser.runtime.sendMessage("message-from-webextension").then(reply => {
  if (reply) {
    console.log("response from legacy add-on: " + reply.content);
  }
});