Using DDP in a Chrome extension

In the Chrome extension I am building, I would like to connect to a Meteor server from the extensions popup window, for user registration, login and

I've found a brief explanation from Meteor Spotting from 2014 that indicates that it is possible to do this using ddp.js, but the project it describes appears to have disappeared.

The current version of ddp.js uses import statements, which Chrome objects to. My understanding is that these scripts are designed for Node.js. How should I edit these scripts so that they can be used in a Chrome extension as described in the Meteor Spotting article?

Alternatively, is there any example of a bare-bones Chrome extension which connects with a bare-bones Meteor server via DPP, that I can use for inspiration?

Solution

I have found my own solution. Here is a bare-bones implementation of a call to a Meteor server from a Chrome extension:

manifest.json { "manifest_version": 2

, "name": "DDP Test"
, "version": "0.1"

, "background": {
    "scripts": [
      "jquery-3.1.0.js"
    , "meteor-ddp.js"
    , "meteor.js"
    , "background.js"
    ]
  }
}

jquery-3.1.0.js can be found here
eddfirs meteor-ddp.js can be found here

meteor.js (adapted from Meteor Spotting)

var Meteor 

;(function meteor(){
  "use strict"

  var endpoint = "ws://localhost:3000/websocket"
  // Use your own endpoint ^^^

  Meteor = {
    call : function(){
      var args = [].slice.call(arguments)
      var methodName = args.shift()
      var callback = args.pop()
      var ddp = new MeteorDdp(endpoint)
      if (!(callback instanceof Function)) {
        args.push(callback)
        callback = function (error, data) {
          console.log("Result of "+methodName+" call:", error, data)
        }
      }

      ddp.connect().done(MeteorCall)

      function MeteorCall() {
        console.log('Connected!');

        var $deferred = ddp.call(methodName, args)
        $deferred.done(function (result) {
          callback(null, result)
        })
        $deferred.fail(function (error) {
          callback(error)
        })
      }
    }
  };
})()

background.js

;(function background(){
  "use strict"

  Meteor.call("test", 1, "two", { three: [4]})
  Meteor.call("test", "using", "a", "custom", callback)

  function callback(error, result) {
    console.log("Custom callback error:", error, ", Result:", result)
  }
})()

Output in the server console when the extension is loaded:

I20160917-19:35:19.352(-4)? test 1 two { three: [ 4 ] }
I20160917-19:35:19.377(-4)? test using a custom

Output in the Inspector for the background view:

Connected!
meteor.js:18 Result of test call: null test method activated with arguments {"0":1,"1":"two","2":{"three":[4]}}
meteor.js:25 Connected!
background.js:8 Custom callback error: null , Result: test method activated with arguments {"0":"using","1":"a","2":"custom"}