0

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

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

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

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

谢谢！

4

1 回答 1

1

开场白：我检查了提供的扩展 ID 并且 background.js 文件是空的，所以我认为你在本地工作并且没有上传你的最新代码。因此，我根据此线程中提供的代码以及一般弹出窗口的工作方式来回答。

首先请允许我总结一下我从您的问题中理解的内容：

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

要实现此场景，您必须在 3 个范围内工作（扩展页面、背景和弹出窗口）并使用消息传递在它们之间进行通信。因此，您可以通过以下方式实现您的目标：

1）在后台范围内，设置您的浏览器按钮以打开一个弹出窗口。[注意：您不能将按钮配置为同时使用 onClick 处理程序和弹出窗口。有关更多信息，请参阅appAPI.browserAction中的注释]

背景.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。

条款.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的请求

扩展.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 的员工]

于 2013-12-24T13:00:11.647 回答