[好讀版]

其實這篇要講的主題與 Chrome Extension 沒有直接關係，那會寫這篇的原因是筆者在之前開發某個 Extension 時，需要取得使用者選取的 HTML，在這功能上花了不少時間，所以將方法記錄下來，並分享給需要的人。

取得選取的 HTML

function getSelectionHtml() {
var selectedHtml = '';
var selection = window.getSelection();
if (selection.rangeCount > 0) {
var range = selection.getRangeAt(0);
if (range) {
var div = document.createElement('div');
div.appendChild(range.cloneContents());
selectedHtml = div.innerHTML;
}
}
return selectedHtml;
}

**注意：**因為 Extension 也只會在 Chrome Browser 上執行，所以這裡的方法不適用於每個瀏覽器。

討論

通常都是在什麼情況下需要取得選取的 HTML 呢？ 似乎一般網頁也不太會有這樣的需求，反倒是 Extension 使用的機率較高一點，像是 Evernote Web Clipper。

**溫馨小提醒：**因為只有內容腳本有辦法取得當前頁面的 DOM，所以如果要在 Extension 中的頁面(如：後台頁面)取得的話，需透過 Message Passing。