Chrome Extension 開發經驗篇 17 - 如何取得選取的 HTML？

其實這篇要講的主題與 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。

結語：

這樣的需求好像很少見耶！如果您有問題，歡迎在下方留言。謝謝！