最新消息:

chrome 扩展开发教程——HelloWorld(二)

Ajax/js 大步 851浏览 0评论
这篇文章开始,我们开发一个hello world 简单的扩展

1.扩展的组件构成

我们先创建个HelloWorld/文件夹,用以存放开发需要的文件。

2.manifest.json

用来声明插件的版本号、名字、属性和权限等。如下:
将下面的内容拷贝到你的manifest.json文件中
英文单词应该都认识,这里就不介绍了,更多详细见:

3.HTML

可以用外联的方式插入到js中。
如下: 使用了jquery
注意,需要在manifest.json中注册:
"default_popup": "popup.html"

4.添加icon图标

将icon添加到HelloWorld/ 中,作为扩展到按钮图标。
注意,需要在manifest.json中的default_icon设置icon图标的文件名:
"default_icon": "icon.png",

5. Javascript

插件中最关键的部分,因为逻辑都是用js来写的。
同时,为了快速开发,我们引入jquery。自己去jquery官网下载jquery,然后放到 HelloWorld/文件夹中。前面我们已经在popup.html中加入了jquery的链接。
剩下的是popup.js:
解释:keyup事件是指你用输入完,松开键盘按键,就会触发我们指定的函数,来同步将我们在输入框输入的内容显示到<h2>标签中。
如下图:
91208875

6.添加CSS

css使得界面更加美观,这里我只是演示下效果
创建popup.css:
效果:
91221046
===============================================

7.测试扩展

将上面的文件,放到HelloWorld/文件夹中。

开启“开发者模式”

然后打开chrome——选项——更多工具——扩展工具
或者直接打开:chrome://extensions/
开启“开发者模式”,如下图:
91166171
点击上图中的“加载已解压的扩展程序”,选择我们的HelloWorld/文件夹,就可以将我们写的hellworld扩展安装到chrome上了,如下图:
91174781
然后浏览器的右上角就有我们扩展到icon了,点击它:
91186109
在输入框中输入内容,就会同步显示了。

调试扩展

因为扩展就是html+js+css,所以,可以直接使用chrome自带的调试。
点击扩展按钮,然后在扩展的弹窗界面,右键鼠标,选择“检查(inspect)”,就可以开始调试了。js错误,可以看console。
==============
这篇教程只是见到介绍一些概念,连chrome的api都没有调用,最多算个browser action extension。其实下面还有,page action,content script等。现在已经在写一个youdao的翻译的chrome扩展了,到时候写篇教程吧。

转载请注明:大步's Blog » chrome 扩展开发教程——HelloWorld(二)

SiteMap