HTML을 포함하여 페이지를 선택 하시겠습니까?

Question

Chrome 확장 프로그램을 작성 중이며 기본 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 콘텐츠를 가져 오는 것이 훨씬 더 어렵습니다. 대부분 선택이 항상 문서의 깨끗한 HTML 경계에 있지 않기 때문입니다 (긴 링크의 작은 부분 만 선택하거나 표의 셀 몇 개만 선택하면 예를 들어). 선택과 관련된 모든 HTML을 가져 오는 가장 직접적인 방법은 선택 범위의 시작 부분과 끝 부분을 모두 포함하는 가장 깊은 노드에 해당하는 속성 인 commonAncestorContainer를 참조하는 것입니다. 이를 얻으려면 다음과 같이하십시오 :

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

당신은 단지 선택된 HTML을 형제 모두를 원하지 않는 경우 :

는 확장에 모든 걸 포기하고이를 포장하는 방법을 보여주기 위해, 당신이 참조 할 수있는 간단한 예제를 작성했습니다 .cloneContents() (복사) 또는 .extractContents() (잘라 내기)과 같은 range의 다른 방법을 사용하십시오.

여기

나는 .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 
}