Chrome 插件开发

最新推荐文章于 2024-06-19 22:44:47 发布

—Qeyser

最新推荐文章于 2024-06-19 22:44:47 发布

阅读量64

点赞数

分类专栏： Chrome JavaScript 文章标签： chrome 前端

本文链接：https://blog.csdn.net/weixin_42581036/article/details/134293631

版权

JavaScript 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

Chrome

1 篇文章 0 订阅

订阅专栏

目录结构

manifest.json

这是一个 Chrome 插件最重要也是必不可少的文件，用来配置所有和插件相关的配置，必须放在根目录。其中，manifest_version、name、version 这三个是必不可少的，description 和 icons 是推荐的；

字段名	介绍
manifest_version	清单文件的版本，这个必须写，我们这里写 3
name	插件的名称
version	插件的版本
description	插件描述
icons	图标
background	配置插件在后台运行的js代码
content_scripts	定义一系列匹配规则，当URL被匹配时，自动执行js
permissions	插件运行需要的权限
action	浏览器右上角图标设置
options_page	右键插件图标的 -> 选项页面，允许用户进行个性化设置
omnibox	向地址栏注册一个关键字以提供搜索建议，只能设置一个关键字
web_accessible_resources	用来指定可从扩展程序中访问的资源，包括 HTML、图片、CSS、JavaScript 等文件

Chrome 插件没有严格的项目结构要求，只要保证本目录有一个 manifest.json 即可，我们来创建一个插件的清单；

然后创建 icons 文件夹，用来存放所用到的图标；

{
    "name": "扩展名称",
    "version": "1.0",
    "manifest_version": 3,
    "description": "介绍",
    "icons": {
        "16": "icons/icon16.png",
        "32": "icons/icon32.png",
        "48": "icons/icon48.png",
        "64": "icons/icon64.png",
        "128": "icons/icon128.png"
    }
}

脚本

content-scripts

所谓 content-scripts，其实就是 Chrome 插件中向页面注入脚本的一种形式

字段名	类型	说明
matches	array of strings	必须，定义哪些页面需要注入content script，具体见匹配模式
css	array of strings	可选，需要向匹配页面中注入的CSS文件，按照定义的顺序依次注入
js	array of strings	可选，需要向页面中注入的 javascript 文件，按定义顺序注入。
run_at	string	可选。控制content script注入的时机。可以是document_start， document_end或者document_idle。默认是document_idle。如果是document_start, 文件将在所有CSS加载完毕，但是没有创建DOM并且没有运行任何脚本的时候注入。如果是document_end，则文件将在创建完DOM之后，但还没有加载类似于图片或frame等的子资源前立刻注入。如果是document_idle，浏览器会在document_end和发出window.onload事件之间的某个时机注入。具体的时机取决与文档加载的复杂度，为加快页面加载而优化
include_globs	array of string	可选（包含）。控制将content_script注入到哪些匹配的页面中
exclude_globs	array of string	可选（排除）。控制将content_script注入到哪些匹配的页面中

打开我们上面的创建的清单 manifest.json，添加 content_scripts 配置，当访问 “CSDN” 的网页时我们运行脚本

"content_scripts": [
    {
        "matches": [
            "https://www.csdn.net/*",
            "https://www.csdn.net/*"
        ],
        "js": [
            "js/script.js"
        ],
        "css": [],
            "run_at": "document_idle"
    }
]

创建 js 文件夹，编写 script.js 文件

console.log('来了 >>>>')

窗口网页

popup

打开我们上面的创建的清单 manifest.json，配置 popup 页面

"action": {
    "default_title": "CustChromePlug popup",
    "default_popup": "popup.html",
    "default_icon": {
        "16": "icons/icon16.png",
        "32": "icons/icon32.png",
        "48": "icons/icon48.png"
    }
}

编写 popup.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   内容
</body>
</html>

—Qeyser

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Chrome 插件开发

这是一个 Chrome 插件最重要也是必不可少的文件，用来配置所有和插件相关的配置，必须放在根目录。其中，manifest_version、name、version 这三个是必不可少的，description 和 icons 是推荐的；打开我们上面的创建的清单 manifest.json，添加 content_scripts 配置，当访问 “CSDN” 的网页时我们运行脚本。Chrome 插件没有严格的项目结构要求，只要保证本目录有一个 manifest.json 即可，我们来创建一个插件的清单；
复制链接

扫一扫