如何检测使用Firefox SDK（适用于插件）双击选择的文本？

missCantaloupe 发表于 Dev

坎塔卢普小姐

用户将双击网页中的一个单词，该插件应能够收听事件并获得所选的文本。

get_definitions.port.on("text-entered", function (text) {
  console.log(text);
  text_entry.hide();
});

function myListener() {
  console.log(selection.text);
}

事情是检测到任何类型的选择。我需要的是通过双击选择文本时的检测...

我无法弄清楚如何添加事件侦听器来侦听网页上的双击事件。提个醒：

addEventListener('dblclick', function);

无效，因为插件的index.js无法直接与网页进行交互。因此，它必须继续侦听通过firefox SDK提供的“双击”事件，但是该怎么做呢？

坎塔卢普小姐

因此，插件必须在窗口中获取选定的文本：

插件无法直接操作窗口或选项卡。我的意思是它可以获得有关它的详细信息-例如所有活动标签页的列表，打开标签页，获取焦点等。

附加一个contentScript

但是要真正在较低级别上像“获取选定的文本”那样工作，Firefox SDK提供了“ Content Scripts ”。它们必须附加到目标选项卡。我们可以通过两种方式附加内容脚本“ someScript.js”：

您可以使用Tabs API直接附加：

var tabs = require("sdk/tabs");

tabs.on('activate', function(tab) {
  var worker = tab.attach({
    contentScriptFile: data.url("someScript.js")
  });
});

或者您可以使用PageMod：

var pageMod = require("sdk/page-mod");

pageMod.PageMod({
  include: "*.mozilla.org",
  contentScriptFile: data.url("someScript.js")
});

使用Tabs API和PageMod API确实存在区别：

Tabs API：您可以根据不同的标准（哪个选项卡，哪个状态等）来决定将contentScript附加到哪个选项卡。

PageMod API：附加到具有匹配URL模式的所有页面。

现在，附加的contentScript就像它是附加页面的一部分一样。

用someScript.js做一些事情：

在这种情况下，通过双击获取选定的文本：

//someScript.js
document.addEventListener('dblclick', function(){
        var selObj = window.getSelection();
        oRange = selObj.getRangeAt(0);
        var selectedText = selObj.toString();

        console.log(selectedText);
}, false);

contentScript和main.js（附件）之间的通信：

如您所见，contentScript只是将选定的文本打印到控制台。要将其与Addon或main.js或index.js进行通信，我们需要使用“ port”对象。

标签API：

var tabs = require("sdk/tabs");

tabs.on('activate', function(tab) {
  var worker = tab.attach({
    contentScriptFile: data.url("someScript.js")
  });

  //Keep listening on the port named "selectedText" from someScript.js
  worker.port.on("selectedText", function(sText) {
      console.log(sText);
  });
});

PageMod API：

var pageMod = require("sdk/page-mod");

pageMod.PageMod({
  include: "*.mozilla.org",
  contentScriptFile: data.url("someScript.js"),

  //Keep listening on the port named "selectedText" from someScript.js
  onAttach: function(worker) {
      worker.port.on("selectedText", function(sText) {
          console.log(sText);
      });
  }
});

将邮件从contentScript发送到main.js：

//someScript.js
document.addEventListener('dblclick', function(){
        var selObj = window.getSelection();
        oRange = selObj.getRangeAt(0);
        var selectedText = selObj.toString();

        console.log(selectedText);

        //emit the selected text on port named "selectedText"
        self.port.emit("selectedText", selectedText);
}, false);

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。