2

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

简而言之，这就是我所追求的：一个 Chrome 扩展程序，它使除“当前”行（即您正在阅读的行）之外的整个视口变暗/着色。（我暂时解释一下“当前”线是如何确定的。）

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

在此处输入图像描述

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

所以这是我的问题：如果您对 HTML/CSS/JavaScript 足够了解，但您从未编写过浏览器扩展，您将在哪里以及如何开始呢？先做一个普通的 JS POC？将 POC 构建为扩展？

需要明确的是，这不是一个“请我如何写电子商务网站”的问题，我要你用勺子喂我整件事。我只是问你第一步要做什么。我意识到这是一项不平凡的工作。提前致谢。

4

1 回答 1

1

如果您对 HTML/CSS/Javascript 的了解足以获得您想要的效果，那么开始使用 Chrome 扩展程序应该不难。只需阅读 Chrome 扩展开发者文档。还有很多示例扩展。

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

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

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

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

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

于 2013-07-22T20:37:50.213 回答