Search code examples
javascriptjquerycrossrider

Change HTML Page in Crossrider Popup

I have a popup called picker.html that contains two options - either going to the options page (that crossrider doesnt natively support) or opening up a webpage. There could also be more options.

Now, when the "Go to Options" button is pressed i want to change the popup to go to the file options.html.

I tried using appAPI.browserAction.setPopup but it only work after another click on the browser action making it useless. window.location also doesnt work as crossrider always uses background.html and there's no API to just get the path of a resource file.

Solution

  • You can use document.open and appAPI.resources.get to change the whole HTML. Then you need to run crossriderMain to make sure all used resources are being loaded.

    See the working example below. From my experience it's not possible to change the height of the new popup / page, please edit this answer if someone finds a tested possibility (CSS doesn't appear to be working here).

    <!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            function crossriderMain($) {
                appAPI.resources.includeCSS('html/bootstrap.min.css');
                appAPI.resources.includeCSS('html/skin.css');

                appAPI.resources.includeJS('js/bootstrap.min.js');
            }

            appAPI.ready(function($) {
                $("#gooptions").click(function() {
                    var newDoc = document.open("text/html", "replace");
                    newDoc.write(appAPI.resources.get('options.html'));
                    newDoc.close();

                    $("body").css("width","400px");
                    crossriderMain($);

                    eval(appAPI.resources.get('js/bootstrap.min.js')); 
                    //Use eval with any JS you need to load for the new page, it won't be loaded from crossriderMain($)!
                });
                $("#goproton").click(function() {
                    appAPI.openURL({url: "https://protonmail.ch/login", where:"tab", focus:true});
                    window.close();
                });
            }); 
        </script>
    </head>
    <body>
        <div class="well bs-component" style="margin:0; border-radius:0; border:none; padding:5px;">
            <div class="form-horizontal">
              <div class="col-lg-12" style="margin-bottom:5px; padding:0;">
                <button type="submit" class="btn btn-default" id="gooptions" style="width:100%;">Go to Options</button>
              </div>
              <div class="col-lg-12" style="padding:0;">
                <button type="submit" class="btn btn-primary" id="goproton" style="width:100%;">Open ProtonMail</button>
              </div>
            </div>
        </div>
    </body>
</html>