编写一个突出显示“当前”行的Chrome扩展程序

Question

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

以下是我简单介绍的内容：Chrome扩展程序会使整个视口变暗/阴影除以外的“当前”行，即您正在阅读的行。< / strong>（我暂时解释“当前”行是如何确定的。）

假设以红色标出的线条是突出显示的线条，上方和下方的所有内容都显示为灰色。 （我的模型很糟糕，但我现在正在使用有限的工具。）

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

所以这是我的问题：如果您对HTML / CSS / JavaScript了解得足够好但是您从未编写过浏览器扩展程序，您将在何处以及如何开始此？先做一个普通的JS POC吗？建立POC作为扩展？

要明确的是，这不是一个“我怎么写ecomerce网站”的问题，我要求你把勺子喂给我整个事情。我只是问你要做什么 第一步 。我意识到这是一项不平凡的事业。提前谢谢。

Answer 1

如果您已经足够了解HTML / CSS / Javascript以获得后续效果，那么开始使用Chrome扩展程序应该不会很难。请阅读Chrome扩展程序开发者文档。还有大量的示例扩展。

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

开始基于注入脚本标记的bookmarklet（使用file:///path/to/yourscript.js）进行开发是有意义的，因为我认为加载新代码会稍快一些，从而导致开发周期略快。您还可以设置一个虚拟页面以始终包含此特定脚本标记，这样您只需重新加载该页面即可查看更改。甚至发烧友：使用http://livereload.com/

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

您可能希望使用Extensions Reloader来更轻松地重新加载。

我喜欢这个想法！