谷歌浏览器扩展程序开发教程之创建你的第一个扩展程序
来源:互联网 发布:bedook祛痘怎么样知乎 编辑:程序博客网 时间:2024/05/21 10:32
开始(Hello, World!)
这个指南将会教你如何创建一个简单的扩展程序。你将在谷歌浏览器上添加一个图标,当你点击这个图标时,它将会显示一个自动生成的页面。图标和页面看起来像这样子:
你可以使用任何版本的谷歌浏览器开发扩展程序,无论是在Windows、Mac或者Linux上。你在某一平台所开发的扩展程序应该可以不做任何修改就可以在谷歌浏览器所支持的任一平台上运行。
创建并加载一个扩展程序
在这里我们创建的扩展程序是一个Browser Action,它在Chrome的工具栏增添了一个你可以控制其行为的按键。
1、在你电脑上的某个地方创建一个文件夹,用于存放扩展程序的代码。
2、在这个文件夹里面,创建一个文本文件,命名为manifest.json,其内容为:
{ "name": "My First Extension", "version": "1.0", "manifest_version": 2, "description": "The first extension that I made.", "browser_action": { "default_icon": "icon.png" }, "permissions": [ "http://api.flickr.com/" ]}
3、将下面的图标复制到相同的文件夹里:
Download icon.png
4、加载扩展程序:
a、点击扳手图标,选择工具>扩展程序,打开扩展程序管理页面;
b、在开发人员模式前面的复选框里打勾,进入开发人员模式,同时会出现更多的按钮和信息;
c、点击‘载入正在开发的扩展程序’,会出现一个文件对话框;
d、在对话框中选择扩展程序文件夹,然后点击确定。
如果你的扩展程序是有效的,它的图标就会出现在地址栏的旁边,关于此扩展程序的信息就会出现在扩展程序的管理页面,如下图所示:
向扩展程序中添加代码
在这一步中,你将会让你的扩展程序做一些事情,而不仅仅是看起来好看。
1、编辑manifest.json文件,添加下面的内容:
... "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" }, ...
在你的扩展程序文件夹里面创建两个文本文件,命名为popup.html和popup.js,并分别添加下面的代码到文件中:HTML code(popup.html)和JavaScript code(popup.js)
2、回到扩展程序管理页面,点击重新载入以加载新版本的扩展程序。
3、点击扩展程序的图标,会弹出一个页面,现实popup.html文件的内容。如下图:
如果你没有看到这个页面,请严格按照上面的指示重新做一遍。不要尝试加载扩展程序目录之外的HTML文件——这将不会工作!
注:本系列教程均翻译自谷歌扩展程序官方开发文档
- 谷歌浏览器扩展程序开发教程之创建你的第一个扩展程序
- 谷歌浏览器扩展程序开发教程之基本概念
- 谷歌浏览器 扩展程序
- Chrome第一个扩展程序
- PHP扩展:第一个程序
- Day 29:编写你的第一个 Google Chrome 扩展程序
- 创建你的第一个smartrcp程序
- Chrome浏览器前端开发常用的插件和扩展程序
- 扩展你的程序——创建模块,使用库
- Chrome扩展程序开发调试简明教程
- Chrome扩展程序开发调试简明教程
- 个人常用的Chrome浏览器扩展程序
- 创建你的第一个带有窗口的Windows程序
- OpenGL开发教程之--第一个OpenGL程序
- WCF教程-创建第一个WCF程序
- PHP扩展开发-01:第一个扩展
- PHP扩展开发:第一个扩展
- PHP扩展开发:第一个扩展
- curl实现配置host
- synthesize只有一个变量指针 不会分配空间
- MS SQL Serve中的.mdf和.ldf
- sql 2008注入经验
- Android 利用【Hierarchy Viewer 】 工具学习别人的UI设计
- 谷歌浏览器扩展程序开发教程之创建你的第一个扩展程序
- WP7 pin to start 自定义应用程序的Tile
- 三天一结
- 用Android NDK r6编译Python 3.2
- 随机数生成---加法学习工具
- linux configure 交叉编译 配置参数
- 平时不关注的底层表,DBA表的源
- find 命令搜索符号链接文件夹的方法
- 老板为什么会被下属“反领导”