CODEWITHSUNDEEP
jqueryhtmldomcrossrider
user2448801
user2448801

Reputation: 7

How can I manipulate popups DOM in Crossrider?

I have a crossrider application where I created an html file in Resources folder. In background.js I did this:

So html file is opened if I click on the Button. My goal is that based on which URL the user has opened a server delivers some data in JSON format which I want to include into the html popup file. The code for server request is in the extension.js and it works. But when I try to manipulate anything in the popup html with jquery from the extension.js it just doesn't work.

I also tried to manipulate the DOM of the html from background.js but it also doesn't work. Also tried to use messaging API, by including this into the onClick event of background.js

appAPI.message.toPopup({action:'savetos'});

and this into the html file:

appAPI.ready(function ($) {
    appAPI.browserAction.onClick(function () {
        appAPI.browserAction.setPopup({
            resourcePath: 'terms.html',
            width: 455,
            height: 930
        });
    });
});

var lid = appAPI.message.addListener(function (msg) {
    if (msg.action == 'savetos') {
        alert("Hallo");
    }
});

Doesn't work too. My Extension ID:48616

Thanks!

Upvotes: 0

Views: 570

Answers (1)

Shlomo
Shlomo

Reputation: 3753

Opening remark: I checked provided extension ID and the background.js file is empty, so I presume you are working locally and have not uploaded your latest code. Hence, I am answering based upon the code provided in this thread and generically in terms of how popups work.

First allow me summarize what I understand from your question:

  1. You want to add a button to your extension, which when clicked opens a popup with HTML from your resources
  2. You want to use jQuery to customize the popup HTML with remote content depending on the URL of the active tab

To implement this scenario, you must to work in 3 scopes (extension page, background, and popup) and use messaging to communicate between them. Hence, you can achieve your goal as follows:

1) In the background scope, set up your browser button to open a popup. [NOTE: You cannot configure a button to be use both an onClick handler and a popup at the same time. For more information, see the the notes in appAPI.browserAction]

background.js:

appAPI.ready(function ($){
    // Create popup browser button
    appAPI.browserAction.setResourceIcon('icon.png');
    appAPI.browserAction.setPopup({
        resourcePath: 'terms.html',
        height: 930,
        width: 455
    });
});

2) In the popup scope, send a message to the extesnsion scope to get the page URL and when the resonse is received, make the request for the remote content and inject it into the HTML via jQuery. NOTE: You can only directly modify popup HTML in the popup scope.

terms.html:

<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <script type="text/javascript">
        function crossriderMain($) {
            // Listen for response from active tab
            appAPI.message.addListener(function(msg) {
                // If response is the page URL
                if (msg.type === 'setPageUrl') {
                    // make request to remote server for content with the page URL as a param
                    appAPI.request.get({
                        url: 'http://example.com?url=' + msg.url,
                        onSuccess: function (response, additionalInfo){
                            // Convert received JSON string to object
                            var responseObj = appAPI.JSON.parse(response);
                            // Clear loading message
                            $('#remote-content').text('');
                            // add content to popup HTML
                            $(responseObj.html).prependTo('#remote-content');
                        }
                    });
                }
            });
            // Request page URL from active tab
            appAPI.message.toActiveTab({type: 'getPageUrl'});
        }
        </script>
    </head>
    <body>
        <div id='remote-content'>Loading ...</div>
    </body>
</html>

3) In the extension scope, handle requests for the page URL

extension.js:

appAPI.ready(function ($){
    // Listen for request for page URL
    appAPI.message.addListener(function(msg) {
        // Send page URL to popup
        appAPI.message.toPopup({
            type: 'setPageUrl',
            url: encodeURIComponent(location.href)
        });
    });
});

If you have any specific requests that you wish to keep private, please feel free to contact Crossrider support ([email protected]).

[Disclaimer: I am a Crossrider employee]

Upvotes: 1

Related Questions