iT邦幫忙

DAY 17
2

Chrome Extension 學習筆記系列 第 17

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


上一篇
Chrome Extension 開發經驗篇 16 - 如何在右鍵選單上顯示選取的文字?
下一篇
Chrome Extension 開發經驗篇 18 - 如何跨域資源共享?
系列文
Chrome Extension 學習筆記30

尚未有邦友留言

立即登入留言