Chrome擴展程序：如何顯示查找欄併爲其提供文本？

我做了一個擴展，將選中的文本從當前活動的網頁存儲到localstorage中，然後當用戶在我的擴展的彈出窗口中單擊此選定文本時，擴展會觸發chrome.tabs.create並打開選定網站文本被選中。這些函數可以工作，但我不知道如何在新選項卡打開時觸發'查找'功能。我希望新創建的選項卡高度選擇我的擴展程序存儲的文本。我認爲有兩種方法可以做到這一點...Chrome擴展程序：如何顯示查找欄併爲其提供文本？

以某種方式觸發默認瀏覽器的'查找'功能。使用'Ctrl + F'或'Command + F'觸發並在其中插入所選文本
通過突出顯示所選文本來編輯新創建頁面的HTML。

new_source = { "url" : tab[0].url, "title" : tab[0].title, "quote" : selectedQuote, "id" : idSource}; 
sources.push(new_source); 
localStorage["sources"] = JSON.stringify(sources);

這是我如何保存我的信息

來源

2012-12-04 user1871515

不能觸發的Chrome原生查找對話框，但你可以調用window.find()。本地對話和find()之間的主要區別是

find()只突出了頁面的比賽之一，而本地對話框亮點所有。準確地說，find()將從開始，突出顯示與文檔頂部距離最近的匹配，並且重複的調用會將其移到頁面上。
find()將突出顯示使用默認藍色選定的文本，而Chrome的查找對話框以橙色突出顯示其匹配。但是，這可以通過修改::selection僞類的background CSS屬性來模擬。

根據您的使用情況，這可能就足夠了。

不過，如果你想突出在頁面上具體報價，並且需要考慮該報價可能的重複，那麼它的更靠譜一點，我不知道它能夠完美實現。您需要使用window.getSelection()獲得所選文本的精確位置，找到一種方法在頁面重新加載時識別其startNode和endNode（如果他們有ID，這很容易，但如果不是，則必須訴諸黑客），然後當頁面重新打開時，使用Selection.addRange()來恢復它。

來源

2012-12-05 01:29:40 int3

不幸的是，我不記得我在哪裏看到這個，但....我曾經看到有人通過創建一個xpath（querySelector也很酷）到所選文本所在的元素，然後用選擇保存。然後，您只需打開該頁面並重新選擇該元素中的文本。 – PAEz

是的，這應該在大多數情況下工作，但如果內容是動態的，它會中斷（例如，選定的節點可以是評論列表中的一個，並且隨着更多評論被添加，其在頁面上的位置改變）。 – int3

Chrome擴展程序：如何顯示查找欄併爲其提供文本？

回答

相關問題