Question

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

如果单击Button，则打开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

谢谢！

Answer 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）在弹出范围中，向extesnsion范围发送消息以获取页面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员工]

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

1 个答案: