Writing a Chrome extension that highlights "current" line

I have an idea for a useful tool but I have no idea where to start. (I apologize for the vague nature of the question, but I do think it can be answered in a specific way and therefore is appropriate for SO.)

Here's what I'm after in a nutshell: a Chrome extension that darkens/shades the whole viewport except for the "current" line, i.e. the line you're reading. (I explain momentarily how the "current" line is determined.)

Pretend the line outlined in red is the highlighted line and everything above and below is grayed out. (My mockup sucks but I'm working with limited tools right now.)

When the page loads and you turn on the extension, the "current" line is the first line of paragraph text. To go to the next line, press the down arrow. Ideally, your highlighted line is in the exact middle and the rest of the page "slides underneath" to the extent that it can so your eyes don't have to move.

So here's my question: if you knew HTML/CSS/JavaScript well enough but you'd never written a browser extension, where and how would you start this? Do a plain JS POC first? Build the POC as an extension?

To be clear, this isn't a "plz how i write ecomerce site" question where I'm asking you to spoon feed me the whole thing. I'm just asking what you'd do as the first step. I realize this is a non-trivial undertaking. Thanks in advance.

If you know HTML/CSS/Javascript well enough to get the effect you after, then getting started with a Chrome extension shouldn't be hard. Just read the Chrome extension developer documentation. There are loads of example extensions as well.

You basically need to make a package directory, containing a manifest.json, and specifying a single "content script" which would contain all your code.

It could make sense to start out developing based on a bookmarklet that injects a script tag (with file:///path/to/yourscript.js) because I think that would be slightly faster wrt loading new code, resulting in a slightly faster development cycle. You could also set up a dummy page to always include this particular script tag so you only have to reload that page to see your change. Even fancier: Use http://livereload.com/

Otherwise you need to instruct chrome to reload the extension manually after each change in your code.

You may like to use Extensions Reloader for easier reloads.

I like the idea by the way!