使用 crossrider 从扩展中获取当前页面 url

Question

我正在尝试为 firefox、chrome、safari 和 internet explorer 设置扩展，我正在使用 crossrider。

基本上，我想在单击时显示一个浏览器操作，显示一个弹出窗口，其中包含当前页面的输入文本 url 和一个将打开新选项卡的按钮 url 通过 url作为参数。

以下是我根据我在文档中找到的内容所做的；

extension.js :

appAPI.ready(function($) {
    appAPI.message.addListener(function(msg) {
        if (msg.request === 'getUrl'){
            appAPI.message.toPopup({url:location.href});
        }
    });
});

background.js :

var activeTabUrl;

appAPI.ready(function($) {
    appAPI.browserAction.setResourceIcon('logo-19.jpg');
    appAPI.browserAction.setBadgeText('extn', [255,0,0,125]);
    appAPI.browserAction.setTitle('Add Url to Site');

    appAPI.browserAction.setPopup({resourcePath:'pin.html', height: 300, width: 300});

});

pin.html :

<!DOCTYPE html>
<html>
    <head>
        <title>
        </title>

        <script type="text/javascript">
        function crossriderMain($) {
            activeTabUrl = null;

            appAPI.message.addListener(function(msg) {
                if (msg.url) {
                    activeTabUrl = msg.url;

                    $('#url').val(activeTabUrl);

                    if(activeTabUrl){
                        $('#addurl').prop('disabled', false);
                    }
                }
            });

            appAPI.message.toActiveTab({request:'getUrl'});


            $('#addurl').click(function(){
                var fullUrl = 'http://my.site.com/addurl?url=' + activeTabUrl;
                appAPI.openURL(fullUrl, "tab"); 
            });

        }
        </script>
    </head>
    <body>
        <input id="url" name="url" readonly="true" type="text"/>
        <input id="addurl" type="submit" value="Add Url" disabled/ >

    </body>
</html>

有时包含url的字段没有填写，它不会发生在特定页面上，对于同一页面，有时会显示，有时不会。我无法确定具体原因。

我是不是做错了什么？

Answer 1

除了在 pin.html 代码中声明 activeTabUrl 而不是 background.js 代码，因为它们是不同的范围。

根据经验，我能想到的唯一可能导致问题的是有时浏览器 return 在消息侦听器初始化之前的消息响应。为了缓解这种情况，在 pin.html 代码中，添加延迟以发送请求 URL 的消息，如下所示：

setTimeout(funtion() {
  appAPI.message.toActiveTab({request:'getUrl'});
}, 0);

[披露]我是 Crossrider 员工

使用 crossrider 从扩展中获取当前页面 url

Getting current page url from an extension using crossrider

crossrider