Chrome扩展入门基础

最新推荐文章于 2020-09-28 15:52:14 发布

dave_haijie

最新推荐文章于 2020-09-28 15:52:14 发布

阅读量436

点赞数

文章标签： chrome javascript 扩展

本文链接：https://blog.csdn.net/dave_haijie/article/details/53634898

版权

背景

Chrome是Google公司基于Webkit开发的一款浏览器，但实际上它已经可以称做一个操作系统，我们可以在它基础上开发很多扩展或者应用。Google自行开发的V8引擎使得JavaScript在Chrome中的执行效率大幅提升。

初识chrome扩展

chrome扩展是用来补充chrome功能的，所以我们可以根据自己的需求来定制扩展，辅助开发或者测试。chrome扩展强调与浏览器的结合，比如chrome扩展可以再浏览器的工具栏和地址栏中显示图标，它可以更改当前浏览器窗口中的内容，也可以更改浏览器代理服务器的设置等。

chrome扩展是一系列文件的集合，包括HTML文件，CSS样式文件，JavaScript脚本文件、图片以及manifest文件。而manifest.json文件，正是chrome扩展得以在chrome浏览器中运行的一个入口，它的文件名称和格式都是固定的。下面来详细讲解一下manifest.json文件格式和内容。

manifest.json文件

文件名称
- 文件名称固定为manifest.json，可以看做是chrome扩展的配置文件
文件格式和基本配置模板
- 文件格式采用json格式，如果对json格式不太了解请参考:http://www.w3school.com.cn/json/json_syntax.asp
- 基本配置模板（下面这份manifest的基本配置如有需要可以保存一份，大部分的扩展有着些配置字段，基本足够了）

            {
                "manifest_version": 2,
                "name": "My Extension",
                "version": "versionString",
                "default_locale": "en",
                "description": "A plain text description",
                "icons": {
                    "16": "images/icon16.png",
                    "48": "images/icon48.png",
                    "128": "images/icon128.png"
                },
                "browser_action": {
                    "default_icon": {
                        "19": "images/icon19.png",
                        "38": "images/icon38.png"
                    },
                    "default_title": "Extension Title",
                    "default_popup": "popup.html"
                },
                "page_action": {
                    "default_icon": {
                        "19": "images/icon19.png",
                        "38": "images/icon38.png"
                    },
                    "default_title": "Extension Title",
                    "default_popup": "popup.html"
                },
                "background": {
                    "scripts": ["background.js"]
                },
                "content_scripts": [
                    {
                        "matches": ["http://yuedu.163.com/*"],
                        "css": ["styles.css"],
                        "js": ["jquery.js", "myscript.js"]
                    }
                ],
                "options_page": "options.html",
                "permissions": [
                    "http://yuedu.163.com/*"
                ],
                "web_accessible_resources": [
                    "images/*.png","css/mycss.css","js/myscrit2.js"]
            }

manifest.json文件字段详解
- 必须属性
  - manifest_version：一般固定为2，目前manifest文件的最新版本就是2
  - name：扩展管理页面展示的扩展的名称
  - version：你的扩展的版本号
- 推荐属性
  - description：扩展描述，主要描述扩展的功能
  - icons：扩展图标，16像素展示在扩展栏中，48像素的展示在扩展管理页面，128像素的用在安装的过程中，建议使用PNG格式对透明度支持好
  - default_locale：国际化语言支持（注意如果扩展有——locales目录，这个字段是必须的字段）
- browser_action---可以设置扩展信息栏的图标、图标悬浮提示、点击图标时弹出窗口等（浏览器功能扩展）
  - default_icon：选择19像素的图标显示在工作栏，如果用户使用视网膜屏幕的话会展示38像素的图片（如果有browser_action，次字段必须配置）
    - 还可以使用setIcon方法来动态设置图片
    - ```
    chrome.browserAction.setIcon(:path:"icon.png"});
```
- default_popup：一般都会关联一个html文件，用于设置点击扩展图标之后弹出的浮层中的展示内容的
- default_title：hover扩展时展示的扩展名称
- page_action---页面功能扩展,功能类似于browser_action
  - 图标会加载在地址栏里面，一般跟当前访问的URL地址进行交互
- background---非常重要的一个属性，后台脚本
  - 在其中设置scripts字段，关联后台脚本
  - 或者设置page字段，来关联html文件（注意：scripts字段和page字段是不能同时存在的）
  - background字段中定义的脚本是用来处理扩展本身的一些逻辑，可以绑定运行事件等（注：background只在加载时运行一次）
  - 例：
```
chrome.browserAction.onClinked.addListener(function(){...});
```
- content_scripts---内容脚本，与网页本身进行交互
  - content_scripts可以直接访问或修改当前页面的DOM（注：他们只是共享DOM，但是js处理本身还是在两个不同的环境中进行的）
  - matches：可以访问的url
  - css：关联的css文件
  - js：关联的js文件，用于访问或者修改当前的DOM
  - 与background的交互：
    - content_script监听消息：
      - chrome.extension.onMessage.addListener(function(msg,sender,sendResponse){...});
    - background发送消息：
      - chrome.tabs.sendMessage(tab.id,msg,function(data){...});
    - 反之，同样
- option_page---设置扩展得设置页面
- permissions---权限设置
  - 常用的一些权限："tabs","activeTab","storage","http://*/"等
  - 需要在permissions中向chrome申请相应的权限，才能进行访问
- web_accessibble_resource---指定扩展注入目标页面所需要的资源文件的路径，相当于把这些文件加白名单

实例

下面展示一个小小的示例：

示例功能：点击时间扩展，展示当前时间

示例代码：

manifest.json

{
    "manifest_version": 2,
    "name": "my clock",
    "version": "1.0",
    "description": "A simple clock extension",
    "icons": {
        "16": "images/icon16.png",
        "48": "images/icon48.png",
        "128": "images/icon128.png"
    },
    "browser_action": {
        "default_icon": {
            "19": "images/icon19.png",
            "38": "images/icon38.png"
        },
        "default_title": "my clock",
        "default_popup": "popup.html"
    }
}

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>

my_clock.js---获取当前时间

function my_clock(time){
    var today = new Date();
    var h = today.getHours();
    var m = oday.getMinutes();
    var s = today.getSeconds();
    m = m >= 10 ? m : ('0' + m);
    s = s >= 10 ? s : ('0' + s);
    time.innerHTML = h + ":" + m + ":" + s;
    setTimeout(function(){my_clock(el)}, 1000);
}

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

效果展示

推荐资料：

https://developer.chrome.com/extension/getstarted

dave_haijie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Chrome扩展入门基础

背景Chrome是Google公司基于Webkit开发的一款浏览器，但实际上它已经可以称做一个操作系统，我们可以在它基础上开发很多扩展或者应用。Google自行开发的V8引擎使得JavaScript在Chrome中的执行效率大幅提升。初识chrome扩展chrome扩展是用来补充chrome功能的，所以我们可以根据自己的需求来定制扩展，辅助开发或者测试。chrome扩展强调与浏览器的结
复制链接

扫一扫