2
votes

I have a panel with script and jQuery in my addon and script which runs into page. How do I copy object from my panel to page?

main.js

var tabs = require("sdk/tabs");
var self = require("sdk/self");
var button = require("sdk/ui/button/action").ActionButton({
    id: "show-panel",
    label: "Show Panel",
    icon: {
        "16": "./icon-16.png",
        "32": "./icon-32.png",
        "64": "./icon-64.png"
    },
    onClick: handleClick
});
var panel = require("sdk/panel").Panel({
    contentURL: self.data.url("page.html"),
    contentScriptFile: [self.data.url("jquery-2.1.1.min.js"), self.data.url("panel-script.js")],
    position: button
});

function handleClick() {
    panel.show();
    var worker = tabs.activeTab.attach({
        contentScriptFile: [self.data.url("jquery-2.1.1.min.js"), self.data.url("page-script.js")]
    });
    panel.port.emit('to-panel');
    panel.port.on("from-panel", function(pic) {
        worker.port.emit("to-page", pic);
    });
}

panel.html

<html>
<head>
</head>
<body>
    <img src="icon-64.png" class="add-img" alt="">
    <button class="click">Click Me!</button>
</body>
</html>

panel.js

self.port.on("to-panel", function() {
    var pic = $('.add-img');
    $('button.click').on('click', function(){
        self.port.emit("from-panel", pic);
    });
});

page.js

self.port.on("to-page", function(pic) {
    $('body').append(pic);
});

I want to copy element from my panel and place it to page. I tried set it to variable named 'pic' and transmit to page.js for placing on webpage, but it's doesn't work. Nevertheless, the simple string is easily transmitted and placed on page.

Browser console is showing "TypeError: a is undefined".

Please help and sorry for bad english.

1

1 Answers

0
votes

var myobjStr = JSON.stringify(myObj) the object you have in the panel. Then its converted to string. So now pass that string to your page and then in your paste parse it like this:

var myobjFromStr = JSON.parse(myobjStr)