Firefox 附加组件：选择后将值从上下文菜单传递到 contentScriptFile

Question

我正在开发一个插件，当用户选择一个值并右键单击上下文菜单时..必须存储该对象的属性。

下面是我的代码

Main.js

var contextMenu = require("sdk/context-menu");

var menuItem = contextMenu.Item({
  label: "Log Selection",
  context: contextMenu.SelectionContext(),
  contentScript: 'self.on("click", function () {' +
                 '  var text = window.getSelection().toString();' +
                 '  self.postMessage(text);' +
                 '});',
  accessKey: "l",
  onMessage: function (selectionText) {
    console.log(selectionText);
    contentScriptFile: [data.url("test.js")]

    }
});

下面是 test.js 我想在其中获取 selectiontext 对象并打印其 innerhtml

test.js

parseElement(document.getElementById("selectionText"));

function parseElement(Element)
{
  if (Element == null)
    return;
alert(Element.innerHTML);

以下是我遇到的一些问题，请帮助我

我无法理解如何获取选择文本的属性，例如 inspect element
如何将选定的文本属性传递给 main.js

Answer 1

您 data.js 中的函数称为 parseElement。但是一个选择可以包含一个元素的一部分，或者多个元素，每个元素都可以有自己的 HTML 标签和 CSS 属性。其实挺复杂的。

在内容脚本中，document.getSelection() 将 return 一个 Selection 对象。 Selection 包含 document.getSelection().rangeCount 给出的 Range 的数量。第一个范围（不会超过一个，除非您使用 ctrl 键选择了多个范围）由 document.getSelection().getRangeAt(0) 给出。对于这个答案的其余部分，我将假设 Selection 中只有一个范围，它应该涵盖绝大多数用例。以下表达式表示单范围选择：

var selection = document.getSelection();
var range = selection.getRangeAt(0);

不幸的是，没有快速而肮脏的方法（据我所知）来获取与该范围关联的所有 HTML 元素的列表。 Range class 确实有一个属性给出了共同的祖先，它是最小的 Node 包含了 [=20 完全或部分包含的所有元素=]:

var ancestorContainer = range.commonAncestorContainer;

所有 HTML 元素都由 Node 表示，顺便说一下。并非所有 Node 都是元素。对于那些，.nodeType 属性的值为 Node.ELEMENT_NODE。最多有两个节点部分位于 Range 内。它们是 range.startContainer 和 range.endContainer。至于 (1) 完全在选择范围内且 (2) 是元素的节点，NodeIterator 可能是获得它们的最终列表的最直接方法：

var nodeIterator = document.createNodeIterator(
  // first argument is the root node at which to begin the NodeIterator's traversal:
 ancestorContainer,
 // second argument 'whatToShow'; we're interested in elements:
 NodeFilter.SHOW_ELEMENT,
 // third argument 'filter', a function whose return value tells iterator which nodes to iterate over.
 function (node) {
  return selection.containsNode(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
 }
);

然后是从 NodeIterator:

中获取实际 Nodes（在本例中为 Elements）的业务

var elementsWithinSelection = [];
var e = nodeIterator.nextNode();
while (e) {
 elementsWithinSelection.push(e);
 e = nodeIterator.nextNode();
}

至于每个 Element 的属性，它们的 .tagName、.textContent 和 .style 属性应该包含您需要的信息。将信息发送到您编写的 onMessage 的属性函数是使用 self.postMessage(string) 的问题。一个例子（那种符合你所描述的）可能是：

self.postMessage(JSON.stringify(elementsWithinSelection.map(function (e) {
 return e.outerHTML;
})));

Firefox 附加组件：选择后将值从上下文菜单传递到 contentScriptFile

Firefox add-on : passing value from context menu to contentScriptFile after selection

javascript

firefox-addon

firefox-addon-sdk

Main.js