chrome extensions

WebApp是通过应用(扩展)的方式实现的,一个应用(扩展)其实是压缩在一起的一组文件,包括HTML,CSS,Javascript脚本,图片文件,还有其它任何需要的文件。 应用(扩展)本质上来说就是web页面。

每个应用(扩展)都应该包含下面的文件:

1.一个manifest文件
2.一个或多个html文件
3.可选的一个或多个javascript文件
4.其他文件

一个简单的扩展可以有下面的三个 icon.png,manifest.json,popup.html 文件组成。

其中icon.png是一个图片文件,popup.html 是一个普通的html文件,manifest.json。

名为manifest.json的文件包含了应用(扩展)的基本信息,例如重要的文件列表,应用(扩展)所需要的权限等。

{ "name": "Rcc", "version": "1.2", "description": "this is a test", "permissions": ["topSites"], "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" }, "manifest_version": 2 }

Paste_Image.png

Browser Actions可以理解成扩展图标,它的功能就是把你的应用显示在Chrome工具栏上,上图是在地址栏的右侧。可以看出在文件manifest.json中来把相应的图标和其他参数注册到Browser Actions。

点击图标可以弹出一个下面这个框。

Paste_Image.png

chrome://extensions/中可显示插件的基本信息。如下图:

Paste_Image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 周日在家无聊,研究了下chrome的扩展程序(extensions),所谓的扩展程序其实没那么难,基本会html、...
    陆志均阅读 8,999评论 0 0
  • chrome扩展开发入门教程 最近在开发chrome插件,看到一篇非常适合入门的教程,特记录一下 注:转载 本文首...
    谢大见阅读 11,519评论 1 25
  • Chrome扩展开发 标签(空格分隔): Chrome扩展 1、写在前面 Chrome插件是一个用Web技术开发...
    记忆的时间差阅读 11,235评论 0 15
  • 需求 Font Awesome是个好东西,绝对是前端开发者必不可少的矢量字体图标库,有了它,再也不需要各种小图片各...
    陆志均阅读 4,516评论 0 0
  • 前端时间看到别人博客上面写的chrome扩展开发,自己也想动手试下,就顺便写了一个小例子(为公司的测试环境设置co...
    Tiny_z阅读 9,570评论 0 1

友情链接更多精彩内容