Google chrome extension 编写一个Chrome扩展，突出显示；“当前”；线

我有一个有用工具的想法，但我不知道从哪里开始。（我为这个问题的模糊性道歉，但我认为可以用一种特定的方式来回答，因此适合这样做。）

简而言之，这就是我想要的：一个镀铬扩展，它可以使除“当前”线（即您正在阅读的线）之外的整个视口变暗/着色。（我马上解释“当前”线是如何确定的。）

假设以红色勾勒的线是高亮显示的线，上面和下面的所有内容都灰显。（我的模型很糟糕，但我现在使用的工具有限。）

加载页面并打开扩展名时，“当前”行是段落文本的第一行。要转到下一行，请按向下箭头。理想情况下，突出显示的行位于正中间，页面的其余部分“在下方滑动”，以使您的眼睛不必移动

因此，我的问题是：如果您对HTML/CSS/JavaScript非常了解，但从未编写过浏览器扩展，从哪里开始，如何开始？先做一个简单的JSPOC？将POC构建为扩展

---

要明确的是，这不是一个“plz我如何写ecomerce网站”的问题，我要你用勺子喂我整件事。我只是问你第一步要做什么。我意识到这是一项不平凡的事业。提前感谢。

如果您对HTML/CSS/Javascript非常了解，能够获得您想要的效果，那么开始使用Chrome扩展应该不难。只需阅读Chrome扩展开发人员文档。还有大量的示例扩展

您基本上需要创建一个包目录，其中包含manifest.json，并指定一个包含所有代码的“内容脚本”

开始开发基于bookmarklet的bookmarklet是有意义的，bookmarklet注入了一个脚本标记（使用

file:///path/to/yourscript.js

）因为我认为wrt加载新代码会稍微快一点，从而导致开发周期稍微快一点。您还可以设置一个虚拟页面，使其始终包含此特定的脚本标记，这样您只需重新加载该页面即可查看所做的更改。甚至爱好者：使用

否则，您需要指示chrome在每次代码更改后手动重新加载扩展

您可能希望使用更方便的重新加载

---

顺便说一句，我喜欢这个主意

你有时间完成这件事吗？我在找完全一样的东西！谢谢，我还没来得及开始呢！已经有太多的项目了。随便拿着球跑吧。当我发现一个叫Chrome的扩展名时，我正在寻找像你描述的那样让我阅读更容易的东西。它使用Spritz技术。