1.       Google Chrome扩展简介

Google Chrome扩展是一种软件,以增强Chrome浏览器的功能。

Google Chrome扩展使用HTML、JavaScript、CSS和图片等Web技术开发。

Google Chrome扩展与Google Chrome插件不同。Google Chrome扩展无需了解浏览器的源代码,而Google Chrome插件是更底层的浏览器功能扩展,需要深入掌握浏览器的源代码。

 

2.       Google Chrome扩展的基本组成

Google Chrome扩展,至少包括一个manifest.json和一个js文件

  • manifest.json是扩展的调度中心,用于声明各种资源。该文件采用JSON格式定义
  • js文件中定义要执行的操作

Google Chrome扩展,通常还可以包括图标、页面和CSS等资源

  • 图标通常是19px*19px的PNG文件
  • 页面通常是HTML文件,用于定义显示给用户的窗口,如popup页面或options页面等

注意:控制popup窗口或options窗口的分别是popup.js和options.js文件

  • CSS是常见的定义页面样式的文件

作为一个Google Chrome扩展,上述所有文件应该都位于一个根目录之下,各个不同类型的文件可以位于不同的子目录下。

3.       Google Chrome扩展的部署运行

Google Chrome扩展的运行无需依赖任何Web服务器。Chrome 浏览器可以方便地进行部署、测试和运行。通过Chrome 浏览器打开chrome://extensions页面可以查看当前Chrome 浏览器部署的全部扩展,该页面也可以通过Chrome 浏览器的“ ->更多工具->扩展程序”打开。chrome://extensions页面如下:

 

在chrome://extensions页面中,选中右上角的“开发者模式”,出现开发辅助按钮如下:

 

在开发者模式中,开发人员可以通过“加载已解压缩的扩展程序…”按钮,直接加载并调试Google Chrome扩展。当然,也可以直接将扩展程序所在的目录拖放到chrome://extensions页面中,实现对扩展程序的加载。Chrome 浏览器会对加载的扩展程序的manifest.json文件进行语法有效性验证,通过验证的扩展程序将会立刻在Chrome 浏览器中生效。

注意:manifest.json文件仅在加载过程中被读取一次。对manifest.json文件的修改必须通过重新加载才能够生效。

在开发过程中,开发人员可以通过“立即更新扩展程序”按钮,查看Google Chrome扩展的最新变化。

Google Chrome扩展开发完毕,开发人员可以通过“打包扩展程序…”将程序打包为一个.crx文件,以便于发布。

通过Chorme Developer Dashboard (注册需要$5),可以将Google Chrome扩展发布到Chrome Web Store

Chrome浏览器扩展开发系列之一:初识Google Chrome扩展的更多相关文章

  1. Chrome浏览器扩展开发系列之三:Google Chrome浏览器扩展的架构

    1) 不可视的background页面 Google Chrome扩展往往包含一个不可见的background页面,Google Chrome扩展的主要业务逻辑都位于此.有两种类型的backgroun ...

  2. Chrome浏览器扩展开发系列之十九:扩展开发示例

    翻译总结了这么多的官网内容,下面以一款博主开发的“沪深股票价格变化实时追踪提醒”软件为例,介绍Chrome浏览器扩展程序的开发,开发环境为Eclipse IDE+Chrome Browser. “沪深 ...

  3. Chrome浏览器扩展开发系列之十六:扩展中可用的Chrome浏览器API

    除了Chrome浏览器支持的chrome.* API之外,Chrome浏览器扩展还可以使用Chrome浏览器为Web页面或Chrome app提供的APIs.对于Chrome浏览器2支持的API,还可 ...

  4. Chrome浏览器扩展开发系列之十八:扩展的软件国际化chrome.i18n API

    i18n是internationalization 的简写,这里将讨论软件国际化的问题.熟悉软件国际化的朋友应该知道,软件国际化要求,页面中所有用户可见的字符串都必须置于资源属性文件中.资源属性文件中 ...

  5. Chrome浏览器扩展开发系列之九:Chrome浏览器的chrome.alarms.* API

    Chrome浏览器扩展程序通过chrome.alarms.* API,可以制定计划周期性地执行代码,或在指定时间执行代码. 要使用chrome.alarms.* API,首先需要在manifest.j ...

  6. Chrome浏览器扩展开发系列之十四

    Chrome浏览器扩展开发系列之十四:本地消息机制Native messaging 时间:2015-10-08 16:17:59      阅读:1361      评论:0      收藏:0    ...

  7. Chrome浏览器扩展开发系列之十四:本地消息机制Native messagin

    Chrome浏览器扩展开发系列之十四:本地消息机制Native messaging 2016-11-24 09:36 114人阅读 评论(0) 收藏 举报  分类: PPAPI(27)  通过将浏览器 ...

  8. Chrome浏览器扩展开发系列之六:options 页面

    options 页面用以定制Chrome浏览器扩展程序的运行参数. 通过Chrome 浏览器的“工具 ->更多工具->扩展程序”,打开chrome://extensions页面,可以看到有 ...

  9. Chrome浏览器扩展开发系列之十三:消息传递Message

    由于content scripts运行在Web页面的上下文中,属于Web页面的组成部分,而不是Google Chrome扩展程序.但是content scripts又往往需要与Google Chrom ...

随机推荐

  1. vmvare虚拟机经验

    关于网络连接:如果宿主机网络类型:如果是无线网络网络适配器选择桥接模式:如果是物理网线选择NAT模式: 关于刚装完系统apt-get update出现could not lock /var/lib/l ...

  2. iOS安全攻防之阻止GDB依附

    GDB是大多数hackers的首选,阻止GDB依附到应用的常规办法是: #import <dlfcn.h> #import <sys/types.h> typedef int ...

  3. 并行类加载与OSGI类加载

    这回来分析一下OSGI的类加载机制. 先说一下OSGI能解决什么问题吧. 记得在上家公司的时候,经常参与上线.上线一般都是增加了一些功能或者修改了一些功能,然后将所有的代码重新部署.过程中要将之前的服 ...

  4. MPP 一、Greenplum 集群安装

    Installating and Initializing a Greenplum Database System... 1 安装说明 1.1 环境说明 名称 版本 下载地址 虚拟机 Oracle V ...

  5. setTimeout异步加载

    两道经典的面试题,直接上代码 for(var i=0; i<3; i++){ setTimeout(function(){ i+=i; console.log(i); },1000) } var ...

  6. vue2入坑随记(二) -- 自定义动态组件

    学习了Vue全家桶和一些UI基本够用了,但是用元素的方式使用组件还是不够灵活,比如我们需要通过js代码直接调用组件,而不是每次在页面上通过属性去控制组件的表现.下面讲一下如何定义动态组件. Vue.e ...

  7. [Leetcode] Binary search--275 H-Index

    Follow up for H-Index: What if the citations array is sorted in ascending order? Could you optimize ...

  8. JDBC复习

    -----------------------------------------JDBC复习----------------------------------------- 1.JDBC (Jav ...

  9. JDK和Tomcat的简单配置(菜鸟巧记一)

    JDK和Tomcat的配置 1.先好安装JDK 1.1先到oracle官网下载合适自己的JDK 地址http://www.oracle.com/technetwork/java/javase/down ...

  10. WPF MVVM 架构 Step By Step(6)(把actions从view model解耦)

    到现在为止,我们创建了一个简单的MVVM的例子,包含了实现了的属性和命令.我们现在有这样一个包含了例如textbox类似的输入元素的视图,textbox用绑定来和view model联系,像点击but ...