Help needed: Embedding webextension in SDK not working

Add-ons Development
#1

I need to use embedding webextension as I have a legacy SDK. I followed the tutorial in: Embedded Websections and the extension directory contains:

  • myExtension, which contains:
    • index.js
    • package.json
  • webextension, which contains:
    • manifest.json
    • webext.js

Theindex.js contains:

    const webExtension = require("sdk/webextension");
    console.log("inside sdk embedded");
    function startup({webExtension}) {
      // Start the embedded webextension.
      webExtension.startup().then(api => {
        const {browser} = api;
        browser.runtime.onConnect.addListener((port) => {
          port.postMessage({
            content: "content from legacy add-on"
          });
        });
      });
    }

The package.json contains:

    {
      "title": "borderify",
      "name": "borderify",
      "version": "0.0.1",
      "description": "sdk addon",
      "main": "index.js",
      "author": "author",
      "engines": {
        "firefox": ">=38.0a1",
        "fennec": ">=38.0a1"
      },
      "license": "MIT",
      "keywords": [
        "jetpack"
      ]
    }

The webext.js contains:

var port = browser.runtime.connect({name: "connection-to-legacy"});
port.onMessage.addListener(function(message) {
  console.log("Message from legacy add-on: " + message.content);
});

The manifest.json contains:

{
  "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": ["webext.js"]
    }
  ]

}

The webext.js contains:

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

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

However, when I run the SDK using JPM, I get the console message from index.js which says: "inside sdk embedded" but I do not get the message which is inside webext.js. Why is that? Can you help me know how to send messages from the legacy Addon SDK to the webextension addon?

#2

Why do you need to embed it in the first place?

TBH, the only reason such embed would be used it to transfer user preferences and/or saved data from one to other. Otherwise, it is not worth the hassle. I converted mine straight to WebExtension instead of writing the code twice (one for embed and then for WebExtension)

Is that what you need it for?

#3

I don’t really get what the startup function is there for. Just run it’s code directly and it should work:

    const webExtension = require("sdk/webextension");
    console.log("inside sdk embedded");
      // Start the embedded webextension.
      webExtension.startup().then(api => {
        const {browser} = api;
        browser.runtime.onConnect.addListener((port) => {
          port.postMessage({
            content: "content from legacy add-on"
          });
        });
      });
#4

I do not get what you mean by Just run it's code directly.
The way I run the code is by using jpm. I do not get errors but I do not see the message that should be logged in the webextension code:

console.log("Message from legacy add-on: " + message.content);

The startup function is:

startup(), that returns a Promise. The promise resolves to an object with a single property browser: this contains the runtime APIs that the embedding add-on can use to exchange messages with the embedded WebExtension:

runtime.onConnect
runtime.onMessage

The whole point is to receive messages from legacy code.

#5

Your code was:

    const webExtension = require("sdk/webextension");
    console.log("inside sdk embedded");
    function startup({webExtension}) {
      // Start the embedded webextension.
      webExtension.startup().then(api => {
        const {browser} = api;
        browser.runtime.onConnect.addListener((port) => {
          port.postMessage({
            content: "content from legacy add-on"
          });
        });
      });
    }

Note the line function startup({webExtension}) {.
What I said is: Remove that line (and its closing }).

And I don’t know why you added it in the first place.

#6

Thanks a lot. I did but nothing changed. The “content from legacy add-on” does not print in the console. This means the message from the embedding sdk was not sent to the embedded web extension. Just in case, this is what in the index.js:

    const webExtension = require("sdk/webextension");
    console.log("inside sdk embedded");
    // Start the embedded webextension.
    webExtension.startup().then(api => {
    const {browser} = api;
    browser.runtime.onConnect.addListener((port) => {
      port.postMessage({
    	content: "content from legacy add-on"
      });
    });
    });