【技术干货】驻云前端工程师带你初步了解chrome插件的开发

  1. 云栖社区>
  2. 博客>
  3. 正文

【技术干货】驻云前端工程师带你初步了解chrome插件的开发

驻云科技 2016-04-19 14:59:46 浏览1397
展开阅读全文

、、

0?wx_fmt=png

本文作者:上海驻云Web前端工程师 


                (只爱扎啤跟撸串的骚年)


       施  翔


以下正文



随着互联网行业的崛起,网络已经成为人们生活工作时不可缺少的一部分,最直接的接触互联网的方式就是通过浏览器上网。随之而来的是用户对浏览器提出了越来越高的要求,换而言之就是对 web 的需求不断提升,单纯的浏览器已经不够满足某些场景的需要。


为了扩展浏览器的功能,形形色色的浏览器插件应运而生。比如 ie 各种内置搜索引擎,firefox 的 firebug,chrome 的 goAgent 等等。插件可以捕捉并显示指定网站的内容,识别一些网站上的广告代码并删除,甚至与别的站点通讯。给我们带来方便的同时,也带来了一些安全隐患。


为什么了解 chrome 而不是其他的浏览器插件呢?因为 chrome 的插件开发起来相对简单,开发语言就是 javascript,需要一个 chrome 浏览器和一个文本编辑器就可以,对于一个 web前端工程师来说几乎是零需求,能很快上手;firefox 的插件开发复杂许多,涉及到环境的搭建和一些 web 以外的技术;ie 的插件开发就更复杂了,需要熟悉C++和COM等客户端的技术,还需要安装微软的Visual Studio。


着手开发之前先了解下插件的文件结构,能让插件在 chrome 上正常运行的主要文件就5个:


 0?wx_fmt=png


下面用一个实例来进一步了解下插件的实现。


这个插件的功能是这样的:当你浏览某个网站的时候,它会启动并获取你浏览的网站的 title,把这个 title 显示在 popup 上,在 title 的下面有一个文本框,输入色值

(比如:#000000,red)

插件会把你所在访问的网站的 body 背景色换成你所输入的色值。听起来挺无聊的功能,但关键是为了演示。


0?wx_fmt=png

这个插件一共有11个文件。


manifest.json

0?wx_fmt=png

属性:


manifest_version:2


现在一般都是2,代表着 html 和 js 需要分离。


name:插件的名字,会在插件列表中显示


background:运行在浏览器后台的脚本文件


icons:显示在插件列表中的图标。


page_action:


default_icon显示在浏览器上的图表


default_title鼠标悬停上去以后的 alt 文本


default_popup点击以后出现的 html


其中,page_action 的图标显示在 url 栏,browser_action 的图标显示在浏览器上。


permissions:


“tabs”:访问浏览器选项卡


"http://localhost/", AJAX访问 localhost 的权限


"*://*/*" 访问任意域名的权限


content_scripts:


       matches:允许插件获取哪些域名下的数据


js:注入页面的 js 文件


注意:这里也是安全隐患的源头。

 

background.js

0?wx_fmt=png


这是一个很重要的文件,可以把它看做是一个框架里的 controller 层,起到了承上启下的作用。而且一旦启动了插件,chrome 会为这个“controller”开一个独立的运行环境。


在代码中我们做了3件事情:


1.监听新打开的tab 中,网站的 url,只要不是空的都显示了插件的 icon,在这里也可以限制插件的显示。


2.监听 message 发来的信息,并存在 sxData 中。


3.监听 request 发来的信息,并在当前的 tab 中执行 code。


content_script.js

0?wx_fmt=png

 

content_script是页面上注入的脚本,主要是获取页面元素,并发送 background 处理。


代码中我们看到 content_script 获取了页面上的 title 标签的值,并通过 sendMessage 方法发送。


popup.html

0?wx_fmt=png


popup.js

0?wx_fmt=png


这些都是简单的 html 页面,有一点 html + css + javascript基础的程序员都能看懂。这里所实现的是一旦点击 chrome 上的插件图标,popup.html 就会被加载,此时将 content_script 中获取到的 title 标签的值赋予 id 为 content-title 的 DOM 元素中去。


点击changeColor将输入框中填写的色值通过 sendRequest 与建立 background 通讯。


这里需要注意一点,出于安全考虑 popup.html 和 popup.js 必须分开存放,直接写在 html 中的 js 代码近不会被执行。


我们有了代码,剩下的就是在浏览器上加载插件。


第一:在chrome浏览器的地址栏输入

               "chrome://extensions"。


0?wx_fmt=png

 

第二:勾选"开发者模式"。


0?wx_fmt=png

  第三:点击"加载已解压的扩展程序"。


0?wx_fmt=png


第四:选择解压后的插件包文件夹。


第五:确保加载进来的插件"已启用"。


 0?wx_fmt=png


发布插件时,需要先将插件代码打包成 zip 文件,然后登录 Chrome 网上应用商店https://chrome.google.com/webstore/developer/update?hl=zh-CN

上传 zip 文件,经过审核就可以上架了。

 

这里是整套插件的源码,供大家相互学习。

https://github.com/clark1201/chrome-plugin-test


利用 chrome 插件,我们可以做出很多有用的东西,希望通过本文能让你了解如何去开发一款 chrome 插件。当然我用到的只是冰山一角,要更加深入的了解还需要借助 google 和 stackoverflow.com 。


本文到这里就结束了,如果喜欢我们的话就赶紧订阅我们吧~~~每天定时推送新鲜干货~~~也可以关注我们的微信公众号:架构云专家频道~~~每天同步更新呦~~~



网友评论

登录后评论
0/500
评论
驻云科技
+ 关注