I am developing a chrome extension where I want to send an object ( with some functions ) around with chrome.runtime.sendMessage.

Now doing things like this

chrome.runtime.sendMessage({something: "Funny"}); 

works just fine. But as soon as I want to create something more plex my message seems to be an empty object.

function FunnyFunction() {
    return 42;
}
var exampleObject = new Object();
exampleObject.FunnyFunction = FunnyFunction;

chrome.runtime.sendMessage({something: exampleObject });

Now on the receiving end it successfully registeres a message and also detects that it has a key "something". But exampleObject is always empty. No functions inside.

chrome.runtime.onMessage.addListener(
    function (request, sender, sendResponse) {
        console.log("got message: ");
        console.log(request);
        if ('something' in request) {
            exampleObject = request.exampleObject;
            console.log(exampleObject);
        }
    }
);

request is always an object

Object {something: Object}

But the object behind 'something', which should be exampleObject - the object I definied earlier with 2 functions - is always just empty.

Object {}

When I try to do exampleObject.FunnyFunction(); it obviously crashes, because it has no such member.

What am I doing wrong here?

I am developing a chrome extension where I want to send an object ( with some functions ) around with chrome.runtime.sendMessage.

Now doing things like this

chrome.runtime.sendMessage({something: "Funny"}); 

works just fine. But as soon as I want to create something more plex my message seems to be an empty object.

function FunnyFunction() {
    return 42;
}
var exampleObject = new Object();
exampleObject.FunnyFunction = FunnyFunction;

chrome.runtime.sendMessage({something: exampleObject });

Now on the receiving end it successfully registeres a message and also detects that it has a key "something". But exampleObject is always empty. No functions inside.

chrome.runtime.onMessage.addListener(
    function (request, sender, sendResponse) {
        console.log("got message: ");
        console.log(request);
        if ('something' in request) {
            exampleObject = request.exampleObject;
            console.log(exampleObject);
        }
    }
);

request is always an object

Object {something: Object}

But the object behind 'something', which should be exampleObject - the object I definied earlier with 2 functions - is always just empty.

Object {}

When I try to do exampleObject.FunnyFunction(); it obviously crashes, because it has no such member.

What am I doing wrong here?

• javascript
• google-chrome

• Are you sure it's empty? Does an arrow show up on the side of the Object {} log, if so click on it and you should see the properties. – Patrick Evans Commented Sep 28, 2015 at 1:35
• It is empty. No arrow. – user2329125 Commented Sep 28, 2015 at 1:36
• sendMessage may not allow passing of functions. postMessage in the Messaging api uses the Structured clone algorithm, so maybe sendMessage does as well. Which if it does it will not duplicate functions so they wouldnt be passed along. Have you tried adding on other properties (strings, numbers, nested objects, etc) – Patrick Evans Commented Sep 28, 2015 at 1:41
• Yes, the properties all stay, except functions. Guess I am not allowed to pass functions, although there is no bit of information about that in the documentation developer.chrome./extensions/runtime#method-sendMessage – user2329125 Commented Sep 28, 2015 at 1:45

1 Answer 1

You can't pass functions through the Message Passing API because it uses serialized JSON as the data interchange format, which doesn't support functions as a basic type. Ideally, you would already have the function available in the context upon which you need it (i.e. background/event page, popup page, etc.) but, in a case where you need to pass a function from one part of your extension to another, you would need to use JSON.stringify to serialize the function into a JSON string and, at the other end, use JSON.parse to deserialize the JSON string back into the original function, upon which you can then utilize it.