WHAT

谷歌扩展（chrome extension），在认识之前，首先要明确一个观念，这种扩展程序，实际上不是一个exe、app之类的程序，下载了本地打开运行安装，本质上，它就是一个网页，写的用的都是前端的语言，高档点说是一个程序，通俗来讲， 就是运行在浏览器上的一个网站，网页。

我这种说法也许不对，不准确，不专业。但是起码，能把小白开发扩展的心态，调整好点，实际上是一个不难的东西，就是在写页面而已。要知道，心态不好，后面就坚持不下去了。

为什么是chrome插件而不是其它浏览器插件?

首先chrome是使用最多的浏览器，其次国内许多浏览器是基于chrome内核开发的，chrome插件可以用于许多其它浏览器上，如360、百度等浏览器上。

学习chrome插件开发需要哪些知识储备?

只需要html，css和JavaScript的基础知识即可。我们还可以选择使用如jQuery之类的JavaScript库，让开发支得更简单。 官网文档

最基本组成

这里讲的是开发一个扩展（插件）最常用最基本的所需的东西，并不像官方说的那种分类。

• manifest.json
• background script
• content script
• popup

严格上来讲主要是background script 、 content script 和 popup，毕竟他们都是贯穿在manifest里的，把manifest写出来，只是为了凸显一下它的重要性

manifest.json

任何chrome插件都有一个json格式的manifest文件，叫manifest.json，里面提供了重要的信息 。

{
    "manifest_version": 3, //插件版本号官方规定  目前是3
    "name": "flash-app",  // 插件名称
    "version": "1",    // 插件版本
    "description": "光落在你脸上",
    "icon":{  //插件的图标
        "16": "image/icon.png",         
        "48": "image/icon.png",            
        "128": "image/icon.png" 
    },
    "browser_action": {
        "default_icon": "image/icon.png", // 工具栏上插件图标
        "default_popup": "popup.html"  //点击默认弹出的html
    },
    "background": {
        "page": "js/background.js" 
    },
    "content_scripts": [
        {
            "matches": [  // 定义哪些页面需要注入content script。
                "<all_urls>" 
            ],
            "js": [  // 指定注入的js文件地址
                "./src/js/index.js"
            ],
            "css": [  // 指定注入的css文件地址
                "./src/css/index.css"
            ],
            "run_at": "document_start"  // 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle
        }
    ]

}

• background script：可以调用全部的 chrome 插件 API，实现跨域请求、网页截屏、弹出 chrome 通知消息等功能。相当于在一个隐藏的浏览器页面内默默运行。

• popup.html：点击插件图标弹出的功能页面。

• content script：早期也被称为 injected script，是插件注入到页面的脚本，但是不会体现在页面 DOM 结构里。content script 可以操作 DOM，但是它和页面其他的脚本是隔离的，访问不到其他脚本定义的变量、函数等，相当于运行在单独的沙盒里。content script 可以调用有限的 chrome 插件 API，网络请求收到同源策略限制。