开发第一个Google Chrome浏览器插件

本帖使用一个简单的例子来介绍Chrome扩展插件的开发步骤。

Chrome浏览器是目前使用最广的浏览器,它的用户增长速度惊人,在短短几年就超越IE,成为用户最多的浏览器。Chrome浏览器的优势:速度快、稳定,还有强大的插件系统。

本网站访客浏览器统计:

第一个Google Chrome浏览器插件开发
开发者更倾向于使用Chrome浏览器

谷歌的Chrome浏览器最大的魅力就在于可以安装各种扩展插件,让Chrome浏览器自身的功能更加丰富。只要你有HTML、CSS和JavaScript开发经验就可以开发Chrome插件。

开发第一个Google Chrome浏览器插件

我要制作一个简单的图片替换插件-把网页中的所有图片替换为预定义的图片。

首先创建manifest.json文件

这个文件是插件的描述信息,必不可少:

解释:

  • manifest_versionmanifest版本,指定如何执行代码,目前版本为2
  • name:插件名称
  • description:插件描述
  • version:插件版本
  • icon:显示在菜单栏的指示图标,大小范围16-128像素
  • permissions:插件要使用的chrome API,我们这里需要tabs来操作DOM。完整的权限看这里
  • browser_action:点击图标,调用popup

我使用icon.png:

icon

创建popup.html文件

使用HTML、CSS创建popup窗口:

Screen Shot 2016-07-20 at 9.53.53 PM

JavaScript文件

点击Click执行的js脚本,图片替换功能实现的代码:

popup.js:

switch.js:

需要注意的是,popup.js并不能直接调用switch.js,需要间接调用一下。

到此,一个简单的插件就完成了。

加载测试插件

把上面创建的所有文件放到某个目录下:

开发第一个Google Chrome浏览器插件

打开浏览器访问 chrome://extensions/ 或 去设置->插件,进入到插件管理器。

打开开发者模式,然后加载插件:

开发第一个Google Chrome浏览器插件

打开任意带图片的网站,点击插件的Click按钮:

开发第一个Google Chrome浏览器插件

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注