Firefox extension: passing value from context menu to contentScriptFile after selection

Question

I am developing an addon when the user selects a value and right-clicks the context menu. The properties of this object must be saved.

Below is my code

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")] } }); 

---

below is test.js where I wanted to take a selecttext object and print its innerhtml

test.js

 parseElement(document.getElementById("selectionText")); function parseElement(Element) { if (Element == null) return; alert(Element.innerHTML); 

Below are some problems that I am encountering, please kindly help me

• I cannot figure out how to get the properties of the selection text, for example, check an element

• how to pass properties of selected text to main.js

Answer 1

The function in data.js is called parseElement . But a selection can contain part of an element or many elements, each of which can have its own HTML tag and CSS properties. It is actually quite complicated.

In the contents of the script, document.getSelection() will return a Selection object. This Selection contains the Range number given by document.getSelection().rangeCount . The first range (there will be no more than one if you have not selected multiple ranges with the ctrl key) is given document.getSelection().getRangeAt(0) . For the rest of this answer, I'll take only one range in Selection , which should cover the vast majority of use cases. The following expression represents a one-time choice:

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

Unfortunately, there is no quick and dirty way (which I know) to get a list of all the HTML elements associated with a range. The Range class has a property that gives a common ancestor, which is the smallest Node that contains all the elements that are fully or partially contained in Range :

 var ancestorContainer = range.commonAncestorContainer; 

All HTML elements are, by the way, Node s. Not all Node are elements. For those that are, the .nodeType property is .nodeType to Node.ELEMENT_NODE . There are no more than two nodes that are partially inside the Range . These are range.startContainer and range.endContainer . As for nodes that are (1) completely within the selection, and (2) are elements, NodeIterator is probably the easiest way to get the final list of them:

 var nodeIterator = document.createNodeIterator( // first argument is the root node at which to begin the NodeIterator 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; } ); 

Then the task is to get the actual Node (which in this case is Element s) from NodeIterator :

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

As for the properties of each Element , their properties .tagName , .textContent and .style should contain the information that you need. Sending function information that you wrote as an onMessage property is to use self.postMessage(string) . One example (which is suitable for what you are describing) might be:

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