前言 🔻

- 🔴 1.概念

Chrome拓展程序就是我们常说的谷歌插件，也就是安装在谷歌浏览器中的软件程序，用来修改浏览器的功能。我们作为非常喜欢浏览各式各样网站的用户，为了方便一些操作或者特需一些特定的功能，我们浏览器中肯定多多少少安装并正在使用某些插件。

插件是基于web技术构建的，即写(html、js、css)。我们自己想要某个功能，可以自己开发给自己，发布到应用商店的插件，尽量要做到功能易于理解，目的单一统一，UI用户交互界面小但目的强。

通俗来讲，chrome插件就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包。

chrome插件通过向chrome浏览器添加特性和功能来增强浏览体验，这些特性和功能包括： ✅1、生产力工具、

✅2、网页内容丰富、

✅3、信息的聚合

◾ web技术构建:

html

css

javascript
web platform apis 网页平台api

- 🔴 2.名字由来

crx -> chrome extension

- 🔴 3.应用范围

chrome插件可以应用在除了chrome浏览器之外国内所有其他webkit内核的浏览器上，比如:

✅360安全（极速）浏览器

✅搜狗浏览器

✅QQ浏览器

Manifest插件配置 🔻

1、创建一个文件夹叫chrome-extensions，用来放这个插件的所有文件。

2、创建文件manfest.json，这个文件是插件的配置文件。其中描述了插件的名称、版本、权限、还有其它一些相关信息。chrome插件开发没有什么项目结构要求，就一点就是，保证根目录有一个manifest.json文件。其中manifest_version、name、version、key这3个是必须要写的。

Manifest 版本V3 属性介绍:

🔴 必需

✅ "name" : "demo" // 插件名

✅ "version" : "1.0.0" // 插件版本

✅ "manifest_version": 3 // 清单文件的版本，这个必须写

🔴 推荐

"description": "chrome拓展" // 插件描述

icons : 图标

json 复制代码

"icons": { 
   "16": "img/icon.png", 
   "48": "img/icon.png", 
   "128": "img/icon.png"
}

🔴 可选

content_scripts：指定静态加载的javascript或者css文件，每次打开或者url模式下匹配的页面，都会用到配置到的文件。

ruby 复制代码

{
    "name": "人生时钟",
    ...
    "content_scripts": [
        {
            // 这三个是必须的，matches、css、js
            "matches": ["https://*.example.com/*"], // matches是个数组，可以这样写["http://*/*", "https://*/*"]; 也可以直接这样写匹配所有地址 ["<all_urls>"]
            "css": ["my-styles.css"], // 可以按相对路径这样写 ["css/custom.css"]
            "js": ["content-script.js"], // js可以这样写["js/jquery-1.8.3.js", "js/content-script.js"]
            
            // 可选
            "exclude_matches": ["*://*/*foo*"],
            "include_globs": ["*example.com/???s/*"],
            "exclude_globs": ["*bar*"],
            "all_frames": false,
            "match_origin_as_fallback": false,
            "match_about_blank": false,
            
            "run_at": "document_idle", // 代码注入的时间, 可选值: "document_start", "document_end", 或者"document_idle"：表示页面空闲的时候
            ...
        }
    ],
    ...
}

其它可选的属性部分可以自行查阅官方文档进行按需拿取

案例 🔻

做一个预期文章阅读时间的插件，像现在掘金文章会有一个预估阅读时间总长的这么一个计算：

🔴 文件目录结构

根目录一定要有manifest.json配置文件

🔴 配置文件配置

js 复制代码

{
    // 基本配置
    "manifest_versiion": 3, // 用的最新的版本 3
    "name": "预估阅读时长", // 插件名字
    "version": "1.0", // 插件版本
    "description": "这是一个预估文章阅读时长的插件", // 插件描述
    "icons": {
        "16": "images/icon-16.png",
        "32": "images/icon-32.png",
        "48": "images/icon-48.png",
        "128": "images/icon-128.png"
    }, // 插件图标 几个尺寸都可以用同一个图标
    
    
    // 页面配置
    "permissions": ["notifications", "storage"], // 这里由于用到插件通知图标和插件存储
    
    "background": {
        "service_worker": "background.js" // 这个用来作为插件的后台脚本文件，就是在后台运行的，配置的文件将会负责后台的逻辑，处理一些特定的任务，比如说网络请求拦截、消息传递等等，可以长时间在后台运行，不堵塞主线程。
    }
    
    "action": {
        "default_title": "阅读时长", // 鼠标悬停在图标时显示的文本
        "default_popup": "popup.html" // 点击图标弹出的交互页面
    }
    
    // 插件的内容脚本，就是在特定网页上注入并执行的js代码，允许指定多个内容脚本，也允许匹配多个网页地址
    "content_scripts": [
        {
            "js": ["background.js"],
            "matches": [
                "https://juejin.cn/post/*" // 当访问这个网页的时候，执行background.js文件的js代码
            ]
        }
    ]
    
}