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

如何制作chrome扩展程序

崔凯博客 2012-04-26 23:36:39 累计浏览 5,672 次
本机暂存

   简单实现了一个 chrome 的扩展,方法如下:

    首先新建一个文件夹,用编辑器写一个文件名为 manifest.json 的文件:

{

    "name": "抓猫!",

    "version": "1.0",

    "description": "你能抓住她吗?",

    "browser_action": {

    "default_icon": "icons/icon_19.png",

    "popup": "files/game.html"

    },

    "icons": {

     "16": "icons/icon_16.png",

     "19": "icons/icon_19.png",

     "32": "icons/icon_32.png",

     "48": "icons/icon_48.png",

     "128": "icons/icon_128.png"

    }

   }

   这其中,如果需要多语言支持的话,可以添加default_locale,并将name&description字段修改为:

{

    "name": "__MSG_name__",

    "description": "__MSG_description__",

    "default_locale": "zh_CN"

   }

   并在插件目录下添加 _locales 目录,内置语言文件,如图所示:

   

   这其中 messages.json 内容如下:

{

    "name": {"message": "Catch Cat!"},

    "description": {"message": "Can you catch it ?"}

   }

   插件主程序完成后,直接编写插件所调用的html就可以了 “popup”: “files/game.html”

    调试时,可以勾选chrome浏览器扩展程序里面的“开发人员模式”,载入正在开发的扩展程序即可。

   

   开发完成后,使用浏览器打包扩展程序,就可以发给朋友们玩了。欢迎下载体验:

    http://uicss.cn/test/cache-cat.crx

同分类推荐文章

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