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

2,853 阅读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 的 MDNChrome 文档的比较,自己来感受吧!

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

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

实用技巧 1

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

实用技巧 2

利用 Reddit。把你的插件提交到 Reddit 的子版块中。例如: /r/chrome, r/SideProject, /r/Feedbackthread。找到一切可以使用你插件的场景,提交上去。即便它只给你带来了 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 感兴趣的童鞋,欢迎指点