如何在 Crossrider 中操作弹出窗口 DOM？答案

【问题标题】：How can I manipulate popups DOM in Crossrider?如何在 Crossrider 中操作弹出窗口 DOM？
【发布时间】：2014-01-12 11:54:59
【问题描述】：

我有一个 crossrider 应用程序，我在 Resources 文件夹中创建了一个 html 文件。在 background.js 我这样做了：

所以如果我点击按钮，就会打开 html 文件。我的目标是基于用户打开服务器的 URL 以 JSON 格式提供一些数据，我想将这些数据包含到 html 弹出文件中。服务器请求的代码在 extension.js 中，它可以工作。但是，当我尝试使用 extension.js 中的 jquery 操作弹出 html 中的任何内容时，它就不起作用了。

我还尝试从 background.js 操作 html 的 DOM，但它也不起作用。还尝试使用消息传递 API，将其包含在 background.js 的 onClick 事件中

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

并将其写入 html 文件：

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");
    }
});

也不行。 My Extension ID:48616

谢谢！

【问题讨论】：

标签： jquery html dom crossrider

【解决方案1】：

开场白：我检查了提供的扩展 ID 并且 background.js 文件是空的，所以我假设你在本地工作并且尚未上传您的最新代码。因此，我根据该线程中提供的代码，一般来说是关于如何弹出窗口有效。

首先请允许我总结一下我对您的问题的理解：

您想向您的扩展程序添加一个按钮，单击该按钮会打开一个弹出窗口，其中包含来自您的资源的 HTML
您想使用 jQuery 根据活动标签的 URL 自定义带有远程内容的弹出 HTML

要实现此场景，您必须在 3 个scopes（扩展页面、背景和弹出窗口）中工作，并在它们之间使用messaging to communicate。因此，您可以通过以下方式实现您的目标：

1) 在后台范围内，设置您的浏览器按钮以打开一个弹出窗口。 [注意：您不能将按钮配置为同时使用 onClick 处理程序和弹出窗口。更多信息请参见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) 在弹出范围内，向扩展范围发送消息以获取页面 URL，当收到响应时，对远程内容进行请求并通过 jQuery 将其注入 HTML。注意：您只能在弹窗范围内直接修改弹窗 HTML。

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）在扩展范围内，处理对页面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)
        });
    });
});

如果您有任何需要保密的具体要求，请随时联系 Crossrider 支持 (support@crossrider.com)。

[免责声明：我是 Crossrider 的员工]

【讨论】：

谢谢！帮了大忙！