从开发 2 个 Chrome 插件中学到的（对新手的 4 个提示和 6 个技巧）

本文作者：Kristian Ivanov
编译：胡子大哈

翻译原文：http://huziketang.com/blog/posts/detail?postId=58dcb330a58c240ae35bb8d9
英文连接：Lessons From Building 2 Chrome Plugins

转载请注明出处，保留原文链接以及作者信息

简介

最近我以前开发的一个 Chrome 插件开始流行起来，主要得益于被 Product Hunt 推荐了（你可以在这看到），所以我决定把当时开发时候总结的一些 tips 和技巧发出来。我开发这个插件主要是因为看了这篇文章，也送给你们：作为开发者我是如何跟上时代脚步的。

再多一点简介

Chrome 插件可以使你的程序可以接触到更多人（我从各种统计报告中观察到，Chrome 的市场份额都超过了 50%），如果这里我说错了，请在评论中指出，感谢！Chrome 非常稳定，并且它的 API 在 Windows 和 Linux 下的使用方法都是一样的，就像 Android 可以应用于不同设备上一样。

关于插件开发

Chrome 插件脚本可以在多种场合下运行：

• 后台——后台脚本可以一直执行。把 persistent 设置成 false 会生成 事件页；

• 浏览器上——当用户点击了浏览器中插件图标时运行；

• 作为内容脚本——内容脚本是来自于插件中的脚本。注入到当前活动的网页中，浏览器允许它们某种程度的使用浏览器资源。

在以前，交互的方式是传递消息，要么通过 chrome.runtime.sendMessage(...)，要么通过 chrome.tabs.sendMessage(...)。

提示 1

内容脚本是在 manifest 文件中注册的，这就是说当 Chrome 打开了匹配的网页会自动注入脚本。或者你也可以用程序操控注入。两种都可以，但是请记住，通过 manifest 注册的内容脚本会在网页加载之后注入，而在用户安装插件之前已经打开的网页，不会注入。所以选择程序自动注入或者结合两种方式一起使用会比较好。

使用纯程序自动注入可以通过 chrome.tabs 监听来实现，使用 chrome.tabs.executeScript( null, {file: 'example.js});。

我个人的做法是，在 manifest 文件中描述内容脚本。那么正常情况下 Chrome 就会注入了，它会通过发送一个消息并且接收返回的响应来检查脚本是否准备好。如果响应不是我所想要的，我就强行注入。

提示 2

Chrome 插件可以重写默认的 Chrome url（比如打开新 tab 时）。这是在插件 manifest 中定义的，因此不能后面做更改。

你还可以对打开新 tab 加监控。检查 url，如果不是你想要的 url，可以使用 chrome.tabs.update(data, {url: 'yourUrl'}); 重写 url 并对其重定向。这个过程也非常快，和定义在 menifest 没什么区别。

提示 3

在 Chrome 插件中使用的都是相对路径，如果你需要用绝对路径，可以使用：chrome.runtime.getURL( 'your.html' );。

提示 4

最后一点很重要的是，MDN 文档 中关于浏览器插件的介绍在某些方面要比 Chrome 更加详细，里面有很多的实例。

比如这里是关于 webRequest 的 MDN 和 Chrome 文档的比较，自己来感受吧！

关于开发完以后需要做什么

你把插件上传到 Chrome 商店以后，什么都不会发生。因为那里会有上万的插件，不要期待着某个人会偶然发现你的插件，然后爱上了它，又把它分享给他的朋友。

实用技巧 1

首先在你开发插件之前检查下确认名字是免费的，开发完以后也要检查。几周之前，Darkness （漂亮的黑色系主题）的作者联系到我，因为我的一个插件也命名为 Darkness。当我在写我的插件的时候，他已经发布了。so，在你开发完成以后再检查一次，即便你在刚开始开发的时候是免费的。

实用技巧 2

利用 Reddit。把你的插件提交到 Reddit 的子版块中。例如： /r/chrome, r/SideProject, /r/Feedback 和 thread。找到一切可以使用你插件的场景，提交上去。即便它只给你带来了 20 个用户，这 10 - 20 个用户会给你很多反馈，让你更加了解用户是怎样使用你插件的，帮助你改善。

实用技巧 3

说到收集用户反馈，人们对你插件的感受和你自己是不一样的。一些你认为显而易见的、很容易理解的东西对用户来讲并不是这样。所以如果你的条件允许，尽量使用视频来讲解，而不是图片，这将会节省你很多你解释的时间。Chrome 商店允许上传 YouTube 视频，也允许使用图片。

实用技巧 4

Reddit 如果没有很大的效果和反馈，Product Hunt 可以给你带来更好的效果。这个社区的体验更好，因为你的插件在这里会被更多人看到。在这里不会像 Reddit 的子栏目中有那么多发布的东西。Product Hunt 在 Twitter 上也很活跃。为了更直观地展示，这里是 Janus Workspace 在 Product Hunt 上的用户数增长图。从图中蓝色点开始到后面的两天曲线变化。

曲线中间的那个小凸起，是二月份在 Reddit 发布的时候产生的。

实用技巧 5

Typeform.com 可以制作反馈表，当用户卸载插件的时候，它会生成一个 url，请求用户填写为什么他会卸载插件的反馈。它的使用很简单，不需要你操作什么也不需要后台。这里要意识到你会收到很多的回复，可能会有一些蹩脚的英语，一些已根本不懂的语言或者一些类似于 “ok”、“puf”、“No Me Gusta” 这样的词。但是里面也会有很多有价值的回复——“它没有自动捕捉，太棒了！”，“预设窗口分布非常容易管理。”，“从历史输入记录中提取记录，简直太方便了”。

实用技巧 6

Google Analytics 可以应用在你的插件里。关于在插件中如何使用 Google Analytics 的教程在这里。用 Google Analytics 的数据观察板可以看到有那么多的朋友在使用你的插件，这真的是一件很快乐的事情。

结束语

这篇文章记录了我最近开发的两个项目，总结了项目过程中的一些经验。我不认为自己在开发 Chrome 插件方面是专家，不过我相信把这些东西记录下来，对于刚刚接触 Chrome 插件开发的开发者会有所帮助。

---

我最近正在写一本《React.js 小书》，对 React.js 感兴趣的童鞋，欢迎指点。