Nhận lựa chọn trang bao gồm HTML?

Question

Tôi đang viết một Tiện ích mở rộng của Chrome và tôi tự hỏi liệu có thể nhận được văn bản được chọn của một tab cụ thể, bao gồm cả HTML cơ bản không? Vì vậy, nếu tôi chọn một liên kết, nó cũng phải trả lại thẻ <a>.

Tôi cố gắng nhìn vào các đối tượng sự kiện menu ngữ cảnh (vâng, tôi đang sử dụng một trình đơn ngữ cảnh cho việc này), và đây là tất cả những gì đi kèm với các callback:

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

Nó cũng trả về một đối tượng Tab , nhưng không có gì trong đó cũng rất hữu ích.

Vì vậy, tôi rất thất vọng ở đây. Điều này thậm chí có thể? Nếu vậy, bất kỳ ý tưởng bạn có thể có sẽ là tuyệt vời. Cảm ơn! :)

Answer 1

Dường như các tiện ích mở rộng this và this làm những gì bạn cần.

Answer 2

Bắt văn bản đã chọn của một trang là khá dễ dàng, bạn có thể làm điều gì đó như

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

và bạn sẽ nhận được một đại diện văn bản của văn bản đang được chọn mà bạn có thể chuyển từ một kịch bản nội dung vào một trang nền hoặc cửa sổ bật lên.

Bắt nội dung HTML khó khăn hơn nhiều, chủ yếu là vì lựa chọn không phải lúc nào cũng ở ranh giới HTML rõ ràng trong tài liệu (nếu bạn chỉ chọn một phần nhỏ của liên kết dài hoặc một vài ô của bảng ví dụ). Cách trực tiếp nhất để có được tất cả các html liên kết với một lựa chọn là để tham chiếu commonAncestorContainer, là một thuộc tính trên một phạm vi lựa chọn tương ứng với nút sâu nhất chứa cả bắt đầu và kết thúc lựa chọn. Để thực hiện việc này, bạn sẽ thực hiện một số việc như:

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 

Tất nhiên, điều này có thể chứa nhiều HTML không thực sự được chọn. Có thể bạn có thể lặp lại thông qua con cái của tổ tiên chung và tỉa bớt bất cứ thứ gì không có trong vùng chọn, nhưng điều đó có liên quan nhiều hơn và có thể không cần thiết tùy thuộc vào những gì bạn đang cố gắng làm.

Để hiển thị như thế nào để bọc này tất cả thành một phần mở rộng, tôi đã viết một mẫu ngắn mà bạn có thể tham khảo: http://github.com/kurrik/chrome-extensions/tree/master/contentscript-selection/

Answer 3

Nếu bạn không muốn tất cả các anh chị em, chỉ là HTML được lựa chọn, sử dụng các phương pháp khác của range như .cloneContents() (để sao chép) hoặc .extractContents() (để cắt).

Ở đây tôi sử dụng .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 
}