IT技术博客大学习 共学习 共进步

如何制作chrome扩展程序

崔凯博客 2012-04-26 23:36:39 浏览 5,561 次

   简单实现了一个 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. Chrome和goagent的配置方法,你懂的 (阅读 16,622)
  2. 警惕 Chrome 的查看源代码 (View Page Source) 功能 (阅读 7,043)
  3. webapp网页调试工具Chrome Devtools (阅读 6,783)
  4. [译]Google Chrome中的高性能网络 (阅读 6,502)
  5. 通过使用Chrome的开发者工具来学习JavaScript (阅读 5,763)
  6. chrome扩展应用开发教程之开发chrome应用基础 (阅读 5,602)
  7. Chrome开发者工具的小技巧 (阅读 5,045)
  8. 如何创建google浏览器插件 (阅读 4,961)
  9. chrome扩展应用开发教程之调试和打包上线 (阅读 4,422)
  10. 15个网站设计和开发的Chrome插件 (阅读 4,220)