摘要：提示插件可以重写默认的比如打开新时。这是在插件中定义的，因此不能后面做更改。把你的插件提交到的子版块中。从图中蓝色点开始到后面的两天曲线变化。曲线中间的那个小凸起，是二月份在发布的时候产生的。关于在插件中如何使用的教程在这里。
本文作者：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 就会注入了，它会通过发送一个消息并且接收返回的响应来检查脚本是否准备好。如果响应不是我所想要的，我就强行注入。
提示 2Chrome 插件可以重写默认的 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 视频，也允许使用图片。
实用技巧 4Reddit 如果没有很大的效果和反馈，Product Hunt 可以给你带来更好的效果。这个社区的体验更好，因为你的插件在这里会被更多人看到。在这里不会像 Reddit 的子栏目中有那么多发布的东西。Product Hunt 在 Twitter 上也很活跃。为了更直观地展示，这里是 Janus Workspace 在 Product Hunt 上的用户数增长图。从图中蓝色点开始到后面的两天曲线变化。
曲线中间的那个小凸起，是二月份在 Reddit 发布的时候产生的。
实用技巧 5Typeform.com 可以制作反馈表，当用户卸载插件的时候，它会生成一个 url，请求用户填写为什么他会卸载插件的反馈。它的使用很简单，不需要你操作什么也不需要后台。这里要意识到你会收到很多的回复，可能会有一些蹩脚的英语，一些已根本不懂的语言或者一些类似于 “ok”、“puf”、“No Me Gusta” 这样的词。但是里面也会有很多有价值的回复——“它没有自动捕捉，太棒了！”，“预设窗口分布非常容易管理。”，“从历史输入记录中提取记录，简直太方便了”。
实用技巧 6Google Analytics 可以应用在你的插件里。关于在插件中如何使用 Google Analytics 的教程在这里。用 Google Analytics 的数据观察板可以看到有那么多的朋友在使用你的插件，这真的是一件很快乐的事情。
结束语这篇文章记录了我最近开发的两个项目，总结了项目过程中的一些经验。我不认为自己在开发 Chrome 插件方面是专家，不过我相信把这些东西记录下来，对于刚刚接触 Chrome 插件开发的开发者会有所帮助。
我最近正在写一本《React.js 小书》，对 React.js 感兴趣的童鞋，欢迎指点。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/82383.html
摘要：找了一下网上应用商店，其实已经有很多款类似插件，但往往太过陈旧或者性能较差，不能够满足个人需求，估自己捣鼓了一个插件。 代码已经在github更新了 https://github.com/abc-club/c... 请移步github。另外喜欢的话请star。求star求star求star 本文已同步到 https://github.com/abc-club/f... 背景 很多网站都...
摘要：手把手教你做个人火的时候，随便一个都能赚的盆满钵满，但是，个人没有服务端，没有美工，似乎就不能开发了，真的是这样的吗秘密花园经典的中文手册。涵盖前端知识体系知识结构图书推荐以及入门视频教程，全的简直不要不要的了。 JavaScript 实现点击按钮复制指定区域文本 html5 的 webAPI 接口可以很轻松的使用短短的几行代码就实现点击按钮复制区域文本的功能，不需要依赖 flash。...
摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...
摘要：官网地址聊天机器人插件开发实例教程一创建插件在系统技巧使你的更加专业前端掘金一个帮你提升技巧的收藏集。我会简单基于的简洁视频播放器组件前端掘金使用和实现购物车场景前端掘金本文是上篇文章的序章，一直想有机会再次实践下。 2道面试题：输入URL按回车&HTTP2 - 掘金通过几轮面试，我发现真正那种问答的技术面，写一堆项目真不如去刷技术文章作用大，因此刷了一段时间的博客和掘金，整理下曾经被...
摘要：前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。它能够为我们提供类似于预处理器命名空间等多方面的辅助。 前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID：f...
阅读 4697·2021-11-18 13:23
阅读 898·2021-09-22 15:24
阅读 1921·2021-09-06 15:00
阅读 2621·2021-09-03 10:30
阅读 1279·2021-09-02 15:15
阅读 2057·2019-08-30 15:54
阅读 3031·2019-08-30 15:44
阅读 1451·2019-08-29 15:12
