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

How to detect text selected by double clicking using Firefox SDK (for addons)?

本文关键字：双击 检测 选择 文本 插件 Firefox 何使用 SDK 用于      更新时间：2023-09-26

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

供选择的SDK页面给出了一个示例：

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提供的"双击"事件，但如何做到呢？

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

插件不能直接操作窗口或选项卡。我的意思是，它可以获得有关它的详细信息——比如所有活动选项卡的列表，打开选项卡，获取焦点等。

  1. 附加内容脚本

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

您可以使用标签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")
});

使用标签API和PageMod API之间确实存在差异：

标签API：您可以根据不同的条件（哪个标签、哪个状态等）来决定contentScript附加到哪个标签。

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

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

  1. 用someScript.js做一些事情：

在这种情况下，双击获得所选文本：

//someScript.js
document.addEventListener('dblclick', function(){
        var selObj = window.getSelection();
        oRange = selObj.getRangeAt(0);
        var selectedText = selObj.toString();
        console.log(selectedText);
}, false);
  1. 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);
相关文章：