chrome插件开发简单实战教程

Chrome 插件开发简单实战教程 Chrome 凭借其简单，稳定，快速的优点迅速风靡全球，占领浏览器市场，直逼 IE 的市 场份额，超越也只是时间问题。初次打开 Chrome 浏览器，你会发现整个页面只有一个地 址栏，一对箭头，刷新按钮和一把扳手，当然还有最重要的空白页面，这就是 Chrome 的 整体构造，可以说是最简单的浏览器了，但是仔细深入你会 Chrome 的功能远不止这些， 通过 Chrome 的扩展中心你可以安装成千上万的插件来丰富你的浏览器功能，这时你就会 发现 Chrome 的强大之处。 Chrome 的扩展中心地址是 /webstore，里面有全球的开 发者开发的插件，你只需要选择，然后点击添加到 Chrome 即可。目前从事 Chrome 开 发的人非常少，我觉得可能是某种网络不稳定因素造成的 Google 服务不稳定，导致了大 家都不愿意开发这片市场，所以在网络上关于 Chrome 开发的资料少之又少，目前官方的 开发文档也都是英文的，阻挡了不少 E 文小白对 Chrome 开发的热情。 Chrome 官方开发文档地址： /chrome/extensions/dev/devguide.html 我大致看了一下， 对他的结构也有所了解，这里将做一个简单的实战来检测一下我的开发水平。 学艺不精， 多多包涵，老鸟路过，新手可以参考下，作为入门教程。 过去大家在添加插件后，图标会出现在地址栏的右边，点击即可快速打开插件，在新版的 Chrome 中，又多出了一个叫 Apps 的东西，如下图画红线的部分： App 的开发和扩展大同小异，为了满足大家的成就感快速开发出一个可用的 App 这里就 从 App 讲解。 一个最简单的 APP 需要由一个图标和一个名为 manifest.json 的文件组成。 第一步： 新建一个文件夹，准备一个图标，建议 128128 大小的。然后创建一个文件，命名为 manifest.json，用记事本打开，复制以下代码： “app“: “launch“: “web_url“: “/eyeofming“ , “urls“: “/eyeofming“ , “description“: “Mings China Blog“, “icons“: “128“: “eye.png“ , “name“: “Eye Of Ming“, “version“: “1.0“ web_url 和 url 是你要启动的网址， description 是 App 的描述，icons 下的 128 是图标 的尺寸，比如说你的图标是 1616 的，那么你就填 16，建议 128128 的大小，然后 eye.png 就是你的图标文件名。name 是 App 的名字，下面的 version 是版本号，这个 就自定义了，需要注意的是避免使用中文，一定要用 utf-8。 第二步： 这一步可以称之为调式，在 Chrome 中输入 chrome:/settings/extensions 打开插件 页，先勾选开发者模式，这样会出现一个载入插件的选项，如下图： 点击载入插件后，在路径中找到保存文件的文件夹然后打开就行了，如果顺利的打开，就 说明你的插件没有任何问题，如果错误的话，他会提示你在哪里错了，然后按照他的提示 修改就行了。来看看我的作品，如下图： 是不是很简单，如果你还没学会，不要急多试几次就好了，这里是打包的源码，大家可以 自行修改。 第三步： 制作好 App 后，要想出现在 Google 的扩展中心你需要提交给 Google 进行审核，提交地 址：/webstore/developer/update 注意要压缩成 zip 格 式后提交，不要用.crx 格式。上传后，填写相关信息，然后