在 Crossrider 弹出窗口中更改 HTML 页面

Question

我有一个名为 picker.html 的弹出窗口，其中包含两个选项 - 转到选项页面（crossrider 本身不支持）或打开网页。还可以有更多选择。

现在，当按下 "Go to Options" 按钮时，我想将弹出窗口更改为转到文件 options.html.

我尝试使用 appAPI.browserAction.setPopup，但它只有在再次单击浏览器操作后才有效，这使其无用。 window.location 也不起作用，因为 crossrider 总是使用 background.html 并且没有 API 来获取资源文件的路径。

Answer 1

您可以使用document.open和appAPI.resources.get来改变整个HTML。然后你需要运行 crossriderMain 确保所有使用的资源都被加载。

请参阅下面的工作示例。根据我的经验，无法更改新弹出窗口/页面的高度，如果有人发现经过测试的可能性，请编辑此答案（CSS 在这里似乎不起作用）。

<!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>

在 Crossrider 弹出窗口中更改 HTML 页面

Change HTML Page in Crossrider Popup

javascript

jquery

crossrider