IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

如何创建google浏览器插件

前端技术 2010-04-14 13:35:59 累计浏览 5,151 次
本机暂存

教程:开始(Hello,World!)

这个教程先带着你做一个简单的Chrome插件。添加一个图标到Google Chrome上,当你点击的时候,将自动生成一个页面。如下图示例:

a window with a grid of images related to HELLO WORLD

准备好浏览器

Window下可用一般的稳定版开发扩展,但是要在其他Linux或者Mac上开发扩展要使用其他的最新的Google Chrome分支。

编写和装载一个扩展

在这个部分,你将编写一个添加在Chrome工具栏的浏览器动作的扩展。.

  1. 随意在电脑上创建一个文件夹来存放你的扩展代码.
  2. 在文件夹内,创建一个名为“manifest.json“的文本文件,添加如下代码:
    {
        "name": "My First Extension",
        "version": "1.0",
        "description": "The first extension that I made.",
        "browser_action": {
        "default_icon": "icon.png"
        },
        "permissions": [
        "http://api.flickr.com/"
        ]
        }
  3. 拷贝下图到你的扩展文件夹下:
    原图已失效
    Download icon.png

   4.   装载扩展.

  1. 点击原图已失效打开扩展管理,点击"扩展管理程序".
  2. 假如开发人员模式旁边有个"+",点击加号,打开开发的面板
  3. 点击载入正在开发的扩展程序,一个本地文件选择打开
  4. 在文件对话框中,找到你的扩展文件夹选中,点击确定。

如果你的扩展无措可用的话,那个图标将会出现在工具栏上,扩展信息出现在扩展管理页面上,如下图所示.

原图已失效

向扩展中添加代码

接下来,让你的扩展干点事情吧,它可不只是个装饰。

  1. 向manifest.json添加一行:

      ...
        "browser_action": {
        "default_icon": "icon.png",
        "popup": "popup.html"
        },
        ...
        
    在扩展文件夹下,创建popup.html文件,添加如下代码:
    :
    CSS and JavaScript code for hello_world(查看源文件)
  2. 回到Chrome的扩展控制面板,点击重新载入,刷新扩展程序.
  3. 点击扩展图标,弹出的面板显示出了popup.html中的内容。看起来像这样子.
a popup with a grid of images related to HELLO WORLD

假如运行没有成功,在按照教程来一遍,保证操作正确,加载一个不属于扩展文件夹的Html文件是不行的!

 我当时参照教程写的插件:http://cssrain.cn/article.asp?id=1434

原文:http://code.google.com/chrome/extensions/getstarted.html
来自:http://www.cnblogs.com/island205/archive/2010/03/18/1688609.html

同分类推荐文章

  1. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. JQuery实现Excel表格呈现 (累计阅读 48,349)
  2. 50个活力和动感的网页设计-颜色的灵感 (累计阅读 34,442)
  3. 深入理解Javascript之执行上下文(Execution Context) (累计阅读 18,404)
  4. 从输入 URL 到页面加载完成的过程中都发生了什么事情? (累计阅读 15,933)
  5. 图片动态局部毛玻璃模糊效果的实现 (累计阅读 14,848)
  6. 天朝第二代身份证号码的验证机制 (累计阅读 14,762)
  7. HTML 5 的data-* 自定义属性 (累计阅读 14,349)
  8. 分享一个JQUERY颜色选择插件 (累计阅读 14,223)
  9. 什么是全栈工程师? (累计阅读 14,038)
  10. 视觉设计前瞻实用性研究(PNVD) 第二期 (累计阅读 12,977)