我正在开发一个插件,当用户选择一个值并右键单击上下文菜单时......必须存储该对象的属性。
下面是我的代码
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")]
}
});
下面是我想获取 selectiontext 对象并打印其 innerhtml 的 test.js
测试.js
parseElement(document.getElementById("selectionText"));
function parseElement(Element)
{
if (Element == null)
return;
alert(Element.innerHTML);
下面是我遇到的一些问题,请帮助我
我无法理解如何获取选择文本的属性,例如检查元素
如何将选定的文本属性传递给 main.js
最佳答案
data.js
中的函数称为 parseElement
。但是一个选择可以包含一个元素的一部分,或者多个元素,每个元素都可以有自己的 HTML 标签和 CSS 属性。这实际上相当复杂。
在内容脚本中,document.getSelection()
将返回一个Selection
对象。此 Selection
包含 document.getSelection().rangeCount
给定的多个 Range
。第一个范围(不会超过一个,除非您使用 ctrl 键选择了多个范围)由 document.getSelection().getRangeAt(0)
给出。对于此答案的其余部分,我将假设 Selection
中只有一个范围,它应该涵盖绝大多数用例。以下表达式表示单范围选择:
var selection = document.getSelection();
var range = selection.getRangeAt(0);
不幸的是,没有快速而肮脏的方法(据我所知)来获取与该范围关联的所有 HTML 元素的列表。 Range
类确实有一个提供共同祖先的属性,它是最小的 Node
,它包含 Range< 全部或部分包含的所有元素
:
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
获取实际 Node
(在本例中是 Element
)的业务:
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;
})));
关于javascript - Firefox 附加组件 : passing value from context menu to contentScriptFile after selection,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32517216/