12

我正在使用 addon-sdk 开发一个 Firefox 插件。此插件将菜单项添加到上下文菜单中，用户可以右键单击任何编辑控件以激活此菜单项。激活后，它会在用户键入内容时显示一个带有建议的小弹出窗口。

除了在 Gmail 上，一切都运行良好。

在 Gmail 中，以下代码失败。

self.port.on('showPopup', function(data) {
    var active = document.activeElement;
    console.log(active.type);
    if (active && getWordUnderCaret(active).word == data.input) {
        populateSuggestions(data);
        positionPopup(active);
        stylePopup();
    }
});

失败的原因是document.activeElement指向document.body和getWordUnderCaret失败，因为它期望输入/文本区域控件。这在所有其他地方都很好。我不确定它为什么指向，document.body因为我可以看到焦点在输入控件上。document.activeElement在 Firebug 控制台中输入给了我正确的对象。

或者，我尝试自己跟踪活动元素，而不是使用document.activeElement. 但我遇到了一些问题，比如在某个地方坚持这个。我不能用它作为代理window来持久化它。window我试过unsafeWindow但无法让它工作。

我想知道为什么这在 Gmail 中失败了？任何解决此问题的帮助都会很棒！

我的代码在Github上可用

编辑

看起来这是 addon-sdk 的问题。我创建了一个可用于重现问题的 Gist。它可以在这里

4

2 回答 2

12

我想，您指的是 Gmail 上的大框，您在撰写电子邮件时输入消息正文。

» 如果是这样的话；

原因：

Gmail 上的编辑控件不是文本控件（输入或文本区域）。那是一个所见即所得的编辑器，通过设置（或 取决于浏览器支持）<iframe>使其可编辑。document.designMode = "on"document.body.contentEditable = true

所以，当点击时；document.activeElement在这种情况下，您并不总是以查询的方式获得正确的元素。你得到包装（主）文档的body, （甚至不是iframe's body）。

例如; 我相信，在你的这行代码；您将click事件侦听器添加到主文档。但是您也应该将其添加到页面中的可编辑 iframe；因为页面和 iframe(s) 有不同的document对象（并且 iframe 不会将自己设置为活动的）。所以，你会弄错document.activeElement。

解决方法：

也将必要的事件侦听器添加到 iframe；因为您想收到有关它们的通知。

// Add mouseup event listener to the main document
document.addEventListener('mouseup', logActiveElement, false);
// Get all the iframes on the main document.
var iframeElems = document.getElementsByTagName('iframe');
// Add mouseup event listener to the document of the iframe elements
for (var i = 0; i < iframeElems.length; ++i) {
    addIframeEvent(iframeElems[i], true, 'mouseup', logActiveElement);
}

以下是辅助函数：（
请注意我们如何将事件侦听器从主文档添加到 iframe（文档），以及我们如何检查 iframe 当前是否可编辑。）

// Adds the specified event listener to the iframe element. 
function addIframeEvent(iframeElem, editableOnly, eventName, callback) {
    // Get the document of the iframe element.
    var iframeDocument = iframeElem.contentDocument || 
                            iframeElem.contentWindow.document;
    // Watch for editableOnly argument. 
    if ( (editableOnly && isDocEditable(iframeDocument)) || !editableOnly) {
        // Add the event listener to the document of the iframe element.
        iframeDocument.addEventListener(eventName, callback, false);
    }
}

// Checks whether the specified document is content-editable or in design mode.
function isDocEditable(doc) {
    return ( ('contentEditable' in doc.body) && (doc.body.contentEditable === true) ) || 
        ('designMode' in doc) && (doc.designMode == "on") );
}

// Handler function
function logActiveElement() {
    console.log("Active Element:", document.activeElement);
}

现在，事件处理程序将正确记录activeElement到控制台。

并发症：

因此; 现有代码中的文本选择和检查等内容与常规编辑控件（输入、文本区域等）的工作方式不同。

例如; 您的getWordUnderCaret(editor)函数获取insertionPoint（目标）editor.selectionStart中不存在的方法。对于这种选择/检查；你应该在DOM Selections，DOM Ranges之间切换；而不是文本编辑控件中的文本选择和范围。document.bodyiframe

注意：您使用的文本选择/范围 jQuery 库 ( Rangy ) 承诺在浏览器中处理这种可编辑的内容（iframe、div 等）。您是否为 iframe 尝试过（例如在 Gmail 上）？

更多的信息：

  • 请参阅Mozilla 开发者网络上的activeElement 文档。此外，它表示：“不要将焦点与文档上的选择混淆。当没有选择时，它 activeElement是页面的<body>。”

更新：

检查 Gmail 上的文本控件；我也玩过你的示例代码；

  • 添加attachTo: ["existing", "top", "frame"]到 PageMod 选项。
  • 将 PageMod 选项中的值更改contentScriptWhen为'end'（而不是 'ready'）；确保包括 DOM、CSS、JS 在内的所有内容都已加载。某些内容可能会在页面就绪/加载时通过 JS 进行更改，因此“结束”将在其之后执行。
  • 也将选择器上下文应用于菜单项；为了确保该项目仅在选择器上下文中出现。

在 Gmail（搜索框、聊天框等）和其他网站上测试；这似乎工作。在addon builder 上
查看/测试工作示例。

Gmail 搜索框文本输入

Gmail 聊天框文本区域

于 2013-01-24T04:16:57.893 回答
3

您是否尝试过使用最新的 git 版本的插件 sdk？那里的上下文菜单已经从头开始重写，我听说它修复了很多错误。

于 2013-01-11T14:57:01.703 回答