Chrome扩展及应用开发入门笔记（一）

最新推荐文章于 2021-01-27 18:31:43 发布

多则惑少则明

最新推荐文章于 2021-01-27 18:31:43 发布

阅读量2.7k

点赞数 1

分类专栏：【技术】JavaScript/python/shell 【测试】工具【技术】手机m站

【测试】工具同时被 3 个专栏收录

54 篇文章 1 订阅

订阅专栏

【技术】JavaScript/python/shell

45 篇文章 1 订阅

订阅专栏

【技术】手机m站

24 篇文章 0 订阅

订阅专栏

chrome特点：

Chrome是Google公司基于WebKit开发的一款浏览器；

页面渲染速度快；

JavaScript执行速度快；

支持开发者为其编写各种各样的扩展来扩充其功能，用HTML5编写桌面程序

chrome插件与应用区别：

Chrome扩展是用于扩充Chrome浏览器功能的程序，Chrome应用是以Chrome为平台运行的程序，二者区别如下：

1. Chrome扩展主要用于对浏览器功能的增强，它更强调与浏览器相结合。比如Chrome扩展可以在浏览器的工具栏和地址栏中显示图标，它可以更改用户当前浏览的网页中的内容

2. Chrome应用更强调是独立的程序，你可以不打开Chrome浏览器而运行这些程序。

同时这些程序可以调用更加底层的系统接口，比如串口、USB、本地文件读写等等。

同时Chrome应用可以拥有样式更加自由的独立窗口，而Chrome扩展的界面只能限定在浏览器窗口中。

chrome插件与应用相同点：

Chrome扩展是用于扩充Chrome浏览器功能的程序，Chrome应用是以Chrome为平台运行的程序，

两者似乎并没有太明确的区别，甚至有些程序既可以设计成Chrome扩展也可以设计成Chrome应用。

注：以下Chrome扩展的介绍同样适用于Chrome应用。

扩展简介：

Chrome扩展是一系列文件的集合： HTML文件、CSS样式文件、JavaScript脚本文件、图片等静态文件以及manifest.json。

个别扩展还会包含二进制文件，如DLL动态库和so动态库等，但这需要调用NPAPI，而Google出于安全性考虑已经决定逐渐淘汰NPAPI

扩展被安装后，Chrome就会读取扩展中的manifest.json文件。这个文件的文件名固定为manifest.json，

内容是按照一定格式描述的扩展相关信息，如扩展名称、版本、更新地址、请求的权限、扩展的UI界面入口等等。

这样Chrome就可以知道在浏览器中如何呈现这个扩展，以及这个扩展如何同用户进行交互。

由于Chrome扩展是基于Chrome平台的，说得直白些，是基于WebKit浏览器的——所以Chrome扩展在处理逻辑运算和实现程序功能时所采用的编程语言必然只能是JavaScript

注：Chrome扩展---利用Chrome平台提供的丰富的接口，获得更加全面的信息，进行更加复杂的操作

界面-----使用HTML和CSS进行描述，这样的好处是可以用很短的时间构建出赏心悦目的UI

扩展的形式：

Chrome扩展的启动入口可以在浏览器的工具栏和地址栏中，用户单击后激活扩展进行下一步的操作，也可以干脆没有图标，在后台静默地运行。

特别注意

由于Chrome不允许将JavaScript内嵌在HTML文件中，所以我们单独编写一个.js脚本文件，并在HTML文件中引用它

第一个扩展例子：

编写一款显示用户计算机当前时间的扩展(浏览器的工具栏中显示一个时钟的图标)

重要的代码:

{
    "manifest_version": 2,
    "name": "我的时钟",
    "version": "1.0",//<code>version</code>的值最多可以是由三个圆点分为四段的版本号，每段只能是数字，每段数字不能大于65535且不能以0开头（可以是0，但不可以是0123），
                     //版本号段左侧为高位，比如1.0.2.0版本比1.0.0.1版本更高。每次更新扩展时，新的版本号必须比之前的版本号高。
    "description": "我的第一个Chrome扩展",
    "icons": {//<code>icons</code>定义了扩展相关图标文件的位置
        "16": "images/icon16.png",
        "48": "images/icon48.png",
        "128": "images/icon128.png"
    },
    "browser_action": {//<code>browser_action</code>指定扩展的图标放在Chrome的工具栏中
        "default_icon": {//<code>browser_action</code>中的<code>default_icon</code>属性定义了相应图标文件的位置
            "19": "images/icon19.png",
            "38": "images/icon38.png"
        },
        "default_title": "我的时钟",//<code>default_title</code>定义了当用户鼠标悬停于扩展图标上所显示的文字
        "default_popup": "popup.html"//<code>default_popup</code>则定义了当用户单击扩展图标时所显示页面的文件位置
    }
}

popup.html:

<html>
<head>
<style>
* {
    margin: 0;
    padding: 0;
}

body {
    width: 200px;
    height: 100px;
}

div {
    line-height: 100px;
    font-size: 42px;
    text-align: center;
}
</style>
</head>
<body>
<div id="clock_div"></div>
<script src="js/my_clock.js"></script>
</body>
</html>

js文件夹中的my_clock.js 内容：

function my_clock(el){
    var today=new Date();
    var h=today.getHours();
    var m=today.getMinutes();
    var s=today.getSeconds();
    m=m>=10?m:('0'+m);
    s=s>=10?s:('0'+s);
    el.innerHTML = h+":"+m+":"+s;
    setTimeout(function(){my_clock(el)}, 1000);//<code>my_clock</code>函数1000毫秒之后又会再次调用自身，这样<code>clock_div</code>中显示的时间就会被更新
}

var clock_div = document.getElementById('clock_div');
my_clock(clock_div);

源码

https://github.com/xiaohuhuanxiang/chromedev/tree/chrome/getTIME

详细参考：http://www.ituring.com.cn/article/60134

多则惑少则明

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Chrome扩展及应用开发入门笔记（一）

chrome特点：Chrome是Google公司基于WebKit开发的一款浏览器；页面渲染速度快；JavaScript执行速度快；支持开发者为其编写各种各样的扩展来扩充其功能，用HTML5编写桌面程序chrome插件与应用区别：Chrome扩展是用于扩充Chrome浏览器功能的程序，Chrome应用是以Chrome为平台运行的程序，二者区别如下：
复制链接

扫一扫