这个简单的Safari扩展代码有什么问题？

Question

I'm creating a Safari extension that will stay in Safari's menubar, and upon being clicked, it will open all links containing a certain string. 我正在创建一个Safari扩展程序，它将保留在Safari的菜单栏中，点击后，它将打开包含某个字符串的所有链接。 However, it's not working. 但是，它不起作用。

This is what my extension builder screen looks like: http://i.imgur.com/xRXB1.png 这是我的扩展构建器屏幕的样子： http ： //i.imgur.com/xRXB1.png

I don't have any external scripts set as I have the script in my HTML file, because I only want it to run when clicked. 我没有设置任何外部脚本，因为我的HTML文件中有脚本，因为我只希望它在单击时运行。

And I have a global.html page with the following code in it: 我有一个global.html页面，其中包含以下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <script type="text/javascript" src="jquery.js"></script>
    </head>
    <body>
        <script>
            safari.application.addEventListener("comnand", performCommand, false);

            Function performCommand(event) {  
                if (event.command == "open-designs") {  
                    $(document).ready(function() {
                        $('a[href*="/Create/DesignProduct.aspx?"]').each(function() {
                            window.open($(this).attr('href'),'_blank');
                        });
                    });
                }  
            }
        </script>
    </body>
</html>

Should this not work? 这应该不起作用吗？ I'm allowed to mix jQuery and JS write, as jQuery is JS? 我被允许混合jQuery和JS写，因为jQuery是JS？ And isn't that how I'd target the links? 这不是我如何定位链接？

Answer 1

The problem is that your extensions Global page does not have direct access to the currently loaded page's DOM. 问题是您的扩展全局页面无法直接访问当前加载的页面的DOM。 To be able to achieve what you need, you'll have to use an Injected Script and use the messaging proxy to talk to the page . 为了能够实现您的需求，您必须使用注入脚本并使用消息传递代理与页面进行通信。

For instance, your global would look like: 例如，您的全局看起来像：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <script type="text/javascript" src="jquery.js"></script>
    </head>
    <body>
        <script>
            $(document).ready(function() {
                safari.application.addEventListener("command", performCommand, false);
            });

            function performCommand(event) {  
                if (event.command == "open-designs") { 
                    safari.application.activeBrowserWindow.activeTab.page.dispatchMessage("open-designs", "all");
                }  
            }
        </script>
    </body>
</html>

And then, in Extension Builder, you'd need to add two "Start Scripts", one is jquery, the other, a new file that gets loaded into the page and looks similar to this: 然后，在Extension Builder中，您需要添加两个“Start Scripts”，一个是jquery，另一个是加载到页面中的新文件，看起来类似于：

function extensionname_openAll(event)
{
    if (event.name == 'open-designs')
    {
        $('a[href*="/Create/DesignProduct.aspx?"]').each(function(index,elem) {
            window.open($(elem).attr('href'),'_blank');
        });
    }
}
safari.self.addEventListener("message", extensionname_openAll, true);

Answer 2

One clear thing I'm seeing is that your $(document).ready() function is located within another function. 我看到的一个明显的事情是你的$(document).ready()函数位于另一个函数中。 This essentially alleviates the need for a $(document).ready() provided you only call that function once the DOM and jQuery are fully loaded. 这基本上减轻了对$(document).ready()前提是只要在DOM和jQuery完全加载后调用该函数。
Rearrange your code to only add the event listener once the DOM and jQuery are loaded. 重新排列代码，只在加载DOM和jQuery后添加事件侦听器。 That is what you use the $(document).ready() callback for. 这就是你使用$(document).ready()回调的原因。
In addition there is one more issue I see with the callback function for .each() . 此外，我还看到了.each()的回调函数还有一个问题。 That function needs to handle two parameters the index and the element that it references. 该函数需要处理索引及其引用的元素的两个参数。 A call to each() iterates over a collection of elements. 对each()调用遍历元素集合。 For each element entering the callback function, its index is passed as a parameter and also the element itself that is located at that index. 对于进入回调函数的每个元素，其索引作为参数传递，也作为位于该索引处的元素本身传递。 Check out the documentation for more info. 查看文档以获取更多信息。

$(document).ready(function() {
 safari.application.addEventListener("command", performCommand, false);
 console.log("Document is ready to go!");
});

function performCommand(event) {  
  console.log("event recieved");
  if (event.command == "open-designs") {     
    console.log("got 'open-designs' event");
    $('a[href*="/Create/DesignProduct.aspx?"]').each(function(index,elem) {
      console.log("opening window", index, elem);
      window.open($(elem).attr('href'),'_blank');
    });
  }  
}

You use the $(document).ready() callback as an indication that your DOM is ready and jQuery has been initialized. 您使用$(document).ready()回调作为您的DOM已准备好并且jQuery已初始化的指示。 Once you know everything is ready, you can setup your event listener. 一旦您知道一切准备就绪，您就可以设置您的事件监听器。 The function performCommand() can not be called before the listener is added (unless there is some other reference to it). 在添加侦听器之前无法调用函数performCommand() （除非有一些其他引用）。

这个简单的Safari扩展代码有什么问题？

问题描述

2 个解决方案

解决方案1
4 已采纳 2012-05-13 12:32:22

解决方案2
3 2012-05-10 17:55:20

这个简单的Safari扩展代码有什么问题？

问题描述

2 个解决方案

解决方案1 4 已采纳 2012-05-13 12:32:22

解决方案2 3 2012-05-10 17:55:20

解决方案1
4 已采纳 2012-05-13 12:32:22

解决方案2
3 2012-05-10 17:55:20