編寫一個突出顯示「當前」行的Chrome擴展

我有一個有用的工具的想法，但我不知道從哪裏開始。（我對這個問題的性質模糊道歉，但我做認爲它可以以特定的方式來回答，因此適合SO）編寫一個突出顯示「當前」行的Chrome擴展

這就是我概括地說以後我： Chrome擴展程序會使整個視口變暗/變暗，但爲「當前」行，即您正在閱讀的行。（我暫時解釋「當前」行是如何確定的。）

假裝以紅色顯示的線是高亮顯示的行，上下的所有內容都是灰顯的。（我的小樣很爛，但我現在用有限的工具的工作。）

enter image description here

頁面加載後，你打開的延長，「當前」行是段落文本的第一行。要轉到下一行，請按向下箭頭。理想情況下，突出顯示的線條處於中間位置，並且頁面的其餘部分「在其下滑動」，以至於它可以讓您的眼睛不必移動。

所以這裏是我的問題：如果你知道HTML/CSS/JavaScript足夠好，但你從來沒有寫過瀏覽器擴展，在哪裏以及如何開始這個？首先做一個普通的JS POC？將POC構建爲擴展？

要清楚的是，這不是一個「我怎麼寫ecomerce網站」的問題，我要求你用勺子餵我整件事。我只是問你會做什麼第一步。我意識到這是一項不平凡的事業。提前致謝。

來源

2013-07-22 Jason Swett

你有沒有完成這個？我正在尋找完全相同的東西！謝謝。 –

我甚至沒有想到要開始它！已經有太多的項目了。隨意拿球並用它跑。 –

我正在尋找類似於您所描述的內容，以便在我找到名爲[Readline]的Chrome擴展程序（https://chrome.google.com/webstore/detail/readline/hjbkmfadmomgaokjodomncmbgmmodona?hl=zh-CN）時使閱讀更容易。它使用Spritz技術。 – Hasan

如果您知道HTML/CSS/Javascript足以讓您獲得後續效果，那麼開始使用Chrome擴展應該不難。只需閱讀Chrome擴展程序開發者文檔。還有很多示例擴展。

您基本上需要製作一個包目錄，其中包含一個manifest.json，並指定一個包含所有代碼的單個「內容腳本」。

開始基於書籤注入腳本標籤（與file:///path/to/yourscript.js）開發開發是有意義的，因爲我認爲加載新代碼的速度稍快，從而導致開發週期稍微更快。您也可以設置一個虛擬頁面來始終包含此特定的腳本標記，因此您只需重新加載該頁面即可查看您的更改。即使發燒友：使用http://livereload.com/

否則，您需要指示chrome在每次更改代碼後手動重新加載擴展。

您可能會喜歡使用Extensions Reloader以更輕鬆地重新加載。

我喜歡這個想法！

來源

2013-07-22 20:37:50

編寫一個突出顯示「當前」行的Chrome擴展

回答

相關問題