谷歌,火狐,360,百度,qq,IE,浏览器插件与扩展开发

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 632|回复: 1

如何从零开始写一个 Chrome 扩展?

[复制链接]

11

主题

11

帖子

130

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
130
发表于 2019-12-28 17:36:12 | 显示全部楼层 |阅读模式
作者:动感小前端悄悄地
链接:https://www.zhihu.com/question/20179805/answer/101984352
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

手把手教你从零开始写扩展并发布到chrome webstore应用商店。



准备工作 万里长城第零步,首先你得先翻墙
推荐用收费的VPN,以便于后续的一系列工作。不要把精力都花在了弄免费的翻墙工具上,毕竟收费的也不贵。
万里长城第一步,不必去办VISA卡
要想在Chrome网上应用店(下文简称webstore)发布应用,需要在webstore的开发者信息中心注册一下,填信息的时候你会发现没有中国大陆地区,所以Google在暗示天朝人民要用假的地址注册,于是我机智的选择了宝岛台湾。
然后Google还要你提供一个VISA/MasterCard账号,用来缴纳5美元注册费。我差点就真去办VISA卡了,后来网上一查,国内的VISA卡可能会认证失败,去淘宝上买虚拟卡又不放心,奋战一小时后我发现一个神奇的网站:全球付.

mastercard
这网站专门用来搞全球购物的,冲100块钱,自动给你生成MasterCard账号,然后你就可以拿这个卡号信息去注册webstore开发者了,分分钟验证通过,并没有网友说的那么麻烦。
至于剩下的钱,你可以买点儿别的,或者转到其他银行卡里,机智如我。
应用开发 基础入门
webstore有四种程序类别:应用、游戏、扩展程序、主题背景。
放心,都是用JS来写的,对于前端来说只有一星门槛。本文不会讲具体基础开发知识,因为这里已经有非常好的教学资料了:
经验之谈
webstore开发本人其实也是新手,但些许经验应该能帮助到其他人:
1.如何优雅的调试
右键Chrome工具栏的小图标会弹出一个窗口,选择审查弹出内容即可调试。
但是这种方法极度低效,直接chrome://extensions/找到你插件的ID:

然后浏览器访问:
chrome-extension://<插件ID>/插件入口html文件
比如我的是:
chrome-extension://fnfchnalfnjbjbfeccpophocngdgapad/index.html
然后就可以愉快的调试了。
2.如何查看其他插件的源码
访问chrome://version 找到Chrome插件安装的本机目录:
然后找到extension目录,所有插件和数据都在这里,可以随便参考其他插件源码。
3.不要把JS代码写在html文件里
出于安全考虑,入口html文件中的JS代码只能通过script标签引用外部脚本文件,内嵌的JS代码会失效的。
4.注意国际化
webstore面向的是全球用户,你辛辛苦苦写的小工具肯定不想只限于国内用户吧,所以在你的项目里面加上_locales文件夹,写代码的时候时刻考虑到如何才能更好地支持国际化。
5.用好Google
开发遇到的问题Google一下一般能找到,StackOverflow 和Google网上论坛这两个站点要尤其留意,大部分问题这上面都有解决方案。
更多小技巧就不一一列举了,多看官方文档,有更详细的介绍。
应用发布
应用写好之后打包上传就好了,上传时Google会让你提供几张宣传图片(自己随便ps了一下)每一个需要填写的选项后面都有详细说明,需要认真阅读一下。
发布之后大概过上几个小时就能在webstore搜索到你的应用了:

iBookmark
至此大功告成,之后可以继续关注你的应用情况,适时更新。
最后附上自己写的一个Chrome收藏夹插件源码,仅供参考交流:
GitHub - 0326/iBookmark: Chrome extension for manage bookmarks
实际上,大家看我应用里面的截图写的是plug-in,实际上我写错了,Chrome 的plug-in和extension还是有区别的555



0

主题

1

帖子

4

积分

新手上路

Rank: 1

积分
4
发表于 2020-6-16 17:19:54 | 显示全部楼层
感谢分享
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|加入QQ群|手机版|小黑屋|谷歌,火狐,360,百度,qq,IE,浏览器插件与扩展开发

GMT+8, 2020-9-30 03:28

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表