封面

我的第一个chrome插件 翻译聚合插件

从接触互联网开始之初便于chrome浏览器结下了缘分,尤其是它的调试工具和插件系统强大到可以击败任何一个竞争对手。第三方开发者的力量不可忽视,如果没有那么多第三方开发者贡献自己的力量。chrome的插件社区也不会像现在这么繁荣

准备工具

  1. 谷歌开发者中心注册账号并花费5美元开通权限
  2. 创建一个web工程,因为插件是使用web开发的,所以在这里我默认读者已经会了html,css,js相关的基础知识。正因为是web开发的,所以任何一个前端框架都可以开发chrome插件,但是得遵守它的规则。我使用的是vue2.6创建的项目,因为是一个小插件我没有使用vuex和router之类的东西,因为根本用不上啊。或者说连vue都用不上,因为我最近正好在学习vue所以就用vue建了个项目试试手
  3. 开发完成之后把打成zip包上传,然后审核通过就可以给全球用户使用啦。不过在没审核通过之前可以打开开发者模式在自己的chrome浏览器上运行

项目目录结构和需要包含的内容

  1. _locale文件夹
    i18n相关内容,想要添加什么语言自己把握,文件夹中的文件名一定得是message.json的名字,不然找不到会报错
  2. index.html 这个名字可以随便起,但是得和manifest.json中的default_popup字段对应上
  3. manifest文件,贴个模板上来。感觉没有什么不懂的地方不需要刻意指出来。顺便再贴一个官方的sample
{
"version": "0.0.1",
"manifest_version": 2,
"name": "translator",
"description": "translator union",
"default_locale": "en",
"icons": {
"16": "logo.png",
"48": "logo.png",
"128": "logo.png"
},
"browser_action": {
"default_icon": {
"19": "logo.png",
"38": "logo.png"
},
"default_title": "translator",
"default_popup": "index.html"
},
"options_page": "index.html",
"permissions": [
"bookmarks",
"http://*/",
"chrome://favicon/",
"storage"
]
}
  1. google的api,想要什么接口请自查。 user_interface

DEMO展示

匆匆搭了个demo项目就来记博客了生怕自己忘记,程序员像鱼一样的记忆体现的淋漓尽致。

搭好的demo是这个样子的,后续开发进度请查看插件主页

参考资料

  1. https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html
文章目录
  1. 1. 准备工具
  2. 2. 项目目录结构和需要包含的内容
  3. 3. DEMO展示
  4. 4. 参考资料


twitter分享


Fork me on GitHub