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

本文做者：Kristian Ivanov

编译：胡子大哈

翻译原文：huziketang.com/blog/posts/…

英文链接：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 感兴趣的童鞋，欢迎指点。