एचटीएमएल सहित पेज चयन प्राप्त करें?

Question

मैं क्रोम एक्सटेंशन लिख रहा हूं, और मैं सोच रहा था कि अंतर्निहित HTML सहित किसी विशेष टैब का चयनित टेक्स्ट प्राप्त करना संभव था? इसलिए यदि मैं एक लिंक चुनता हूं, तो इसे <a> टैग भी वापस करना चाहिए।

मैं संदर्भ मेनू घटना वस्तुओं को देखकर की कोशिश की (हाँ, मैं इस के लिए एक संदर्भ मेनू का उपयोग कर रहा है), और यह सब है कि कॉलबैक के साथ आता है:

editable : false 
menuItemId : 1 
pageUrl : <the URL> 
selectionText : <the selected text in plaintext formatting, not HTML> 

यह भी एक टैब ऑब्जेक्ट , लेकिन वहां कुछ भी बहुत उपयोगी नहीं था, या तो।

तो मैं यहां एक नुकसान का प्रकार हूं। क्या यह भी संभव है? यदि हां, तो आपके पास जो भी विचार हो सकते हैं वह बहुत अच्छा होगा। धन्यवाद! :)

Answer 1

this और this एक्सटेंशन की तरह दिखता है जो आपको चाहिए।

Answer 2

एक पेज के चयनित पाठ हो रही काफी आसान है, तो आप की तरह

var text = window.getSelection().toString(); 

कुछ कर सकते हैं और यदि आप वर्तमान में चयनित पाठ का एक पाठ प्रतिनिधित्व है कि आप एक सामग्री स्क्रिप्ट से एक करने के लिए पारित कर सकते हैं मिल जाएगा पृष्ठभूमि पृष्ठ या एक पॉपअप।

एचटीएमएल सामग्री प्राप्त करना बहुत कठिन है, अधिकांशतः क्योंकि चयन हमेशा दस्तावेज़ में एक स्वच्छ HTML सीमा पर नहीं होता है (क्या होगा यदि आप केवल एक लंबे लिंक का एक छोटा सा हिस्सा चुनते हैं, या तालिका के कुछ कक्ष उदाहरण के लिए)। चयन के साथ जुड़े सभी एचटीएमएल को प्राप्त करने का सबसे सीधा तरीका आम पूर्ववर्ती कंटेनर का संदर्भ देना है, जो चयन श्रेणी पर एक संपत्ति है जो गहरे नोड के अनुरूप है जिसमें चयन की शुरुआत और अंत दोनों शामिल हैं। इसे प्राप्त करने के लिए, आप कुछ ऐसा करेंगे:

var selection = window.getSelection(); 
// Only works with a single range - add extra logic to 
// iterate over more ranges if needed 
var range = selection.getRangeAt(0); 
var container = range.commonAncestorContainer; 
var html = container.innerHTML 

बेशक, इसमें बहुत से HTML शामिल होंगे जो वास्तव में नहीं चुने गए थे। यह संभव है कि आप आम पूर्वजों के बच्चों के माध्यम से पुन: प्रयास कर सकें और चयन में नहीं होने वाली किसी चीज को छीन सकें, लेकिन यह कुछ और शामिल होगा और आप जो भी करने की कोशिश कर रहे हैं उसके आधार पर आवश्यक नहीं हो सकते हैं।

कैसे एक विस्तार में इस रैप करने के लिए बिल्कुल ही दिखाई करने के लिए, मैं एक छोटा नमूना है जो आप संदर्भित कर सकते हैं लिखा है: http://github.com/kurrik/chrome-extensions/tree/master/contentscript-selection/

Answer 3

आप भाई-बहनों में सब नहीं करना चाहते, केवल चयनित एचटीएमएल हैं, range की अन्य विधियों जैसे .cloneContents() (प्रतिलिपि बनाने के लिए) या .extractContents() (कटौती करने के लिए) का उपयोग करें।

यहाँ मैं .cloneContents() का उपयोग करें:

function getSelectedHTML() { 
    var range = window.getSelection().getRangeAt(0); // Get the selected range 
    var div = document.createElement("div"); 
    div.appendChild(range.cloneContents()); // Get the document fragment from selected range 
    return div.innerHTML; // Return the actual HTML 
}