谈一谈|谷歌插件入门

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

欢迎加入团队圈子！与作者面对面！直接点击！

1 谷歌插件简介

谷歌插件及ChormeExtensions是一个小型的程序，它可以修改并增强chrome浏览器的功能。可以使用web技术（如HTML，CSS，JavaScript）来编写。一个扩展就是一个压缩的包，里面有HTML、CSS、JavaScript、图片或者任何你需要的资源。从本质上来讲，扩展就是一个web页面，它也可以使用浏览器为web页面提供的API。

如XMLHttpRequest、JSON、HTML5等。

 

2 插件基础

2.1 创建manifest.json文件

任何谷歌插件都必须拥有的文件，这个文件的作用简单来说就是这个插件的组成清单，在这个清单上大约能看的这个插件的大体作用

代码展示：

{ "manifest_version":2    "name": "我的扩展",//扩展名字    "version": "1.0",//扩展版本    "description": "第一次没啥好说的.",//扩展描述    //浏览器小窗口    "browser_action": {      "default_icon": "icon.png",//小窗口图标      "default_popup": "popup.html"//小窗口内容    },    //扩展图标    "icons":{      "16": "images/get_started16.png",      "32": "images/get_started32.png",      "48": "images/get_started48.png",      "128": "images/get_started128.png"      }, }

下面是manifest.json的配置项

（1）Icons

插件的程序图标，可以一个或多个16的是插件页面图标48是管理界面图标

128是安装界面图标

（2）brower_action和page_action

这两个功能都是用来处理扩展在浏览器工具栏上的表现

区别是前者啥地方都能用后者是特定页面才能用

（3）default_popup

在用户点解扩展图标时可以设置弹出一个popup页面这个页面可以说是一个简单的网页也可以有自己的js脚本点击图标时运行此脚本

（4）Permissions

在background里使用一些chrmoeapi，需要授权才能使用。

2.2 background

background可以认为是插件运行是在浏览器中的一个后台脚本，与当前浏览页面无关。

Backgropund包括（page，scripts，persistent）

Page是后台网站的主页（不一定要求有）

Scripts就是后台引入的脚本文件

Persistent就是后台程序是否持久运行

2.3 content script

这部分脚本，简单来说是插入到网页中的脚本。它具有独立而富有包容性。所谓独立，指它的工作空间，命名空间，域等是独立的，不会说跟插入到的页面的某些函数和变量发生冲突。所谓包容性，指插件把自己的一些脚本（content script）插入到符合条件的页面里，作为页面的脚本，因此与插入的页面共享dom的，即用dom操作是针对插入的网页的，在这些脚本里使用的window对象跟插入页面的window是一样的。

主要用在消息传递上（使用postMessage和onmessage）

3 成果

图3.1成果展示

图3.2成果展示

图3.3成果展示

4 总结

谷歌插件开发必须要有一定的前端开发基础，而我的前端基础才处于起步阶段，只初步了解一些静态网页的制作。所以还不能为其添加后台脚本，并且无法实现前端后台脚本之间的信息交流。总的来说，我能实现的只有插件的安装与小图标的设置与工具栏页面的简单显示。

END

实习主编   |   王楠岚

责       编   |   王自强

 where2go 团队

---

   

微信号：算法与编程之美          

长按识别二维码关注我们!

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！