B站文章链接

前置知识
Chrome 插件实际上包含几个部分：

manifest.json 文件，相当于整个项目的入口，里面记录着此插件的 icon 图标展示、弹出框样式文件、新建 Tab 逻辑、选项逻辑、内容脚本逻辑等

background.js，此脚本是在整个浏览器启动或者插件加载之后就会运行的一个脚本文件，它运行在 ServiceWorker 里面，通常用于进行一些前置的数据 storage 存储操作，可以操作所有的 Chrome API

popup.html，插件的弹出框展示的模板内容，可以通过 CSS 控制样式，JavaScript 控制逻辑

options.html，右键插件 icon 时弹出菜单页，点击菜单页里面的选项打开的页面

content.js，此脚本是在你打开一个新的网页的时候，Chrome 浏览器为这个网页注入的一个脚本文件，用于辅助此网页和你的插件进行一个通信，因为插件的运行环境是经过沙盒隔离的，无法直接操作到 DOM，所以需要通过 content 脚本操作 DOM，然后发送给到插件的处理逻辑

上述 5 大文件组成了一个 Chrome 插件所需要的必须元素，逻辑关系如下：

在这里插入图片描述

可以看到，其实开发一个 Chrome 的插件也是使用 HTML/JavaScript/CSS 这些知识，只不过使用场景，每种 JavaScript 使用的权限与功能、操作的 API 不太一样，那么既然是使用基本的 Web 基础技术，我们就可以借助更为上层的 Web 开发框架如 React 等来将 Chrome 插件的开发上升到一个现代化的程度。 作者：程序员巴士 https://www.bilibili.com/read/cv14353152 出处：bilibili

# chrome
Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

嵌入式作业（七）：基于Ardunio的STM32串口通信

嵌入式作业（七）0作业要求1Ardunio 完成STM32的串口通信（1）安装Ardunio IDE（2）stm32串口通信2关于 stduino IDE0作业要求安装 Ardunio IDE 和相关软件支持库，在Ardunio 完成STM32板子的串口通信程序：（1）持续向串口输出“Hello world！”；（2）当接收到“stop!”时，停止输出。网上有一个国人版的MCU集成开发平台， st

avatar CSDN学习社区

JDBC详解

JDBC文章目录JDBC什么是JDBC?JDBC驱动程序:Java使用JDBC访问数据库的步骤:设置classpath:Oracle连接字符串的书写格式:简单的例子:常用数据库的驱动程序及JDBC URL:Oracle数据库:SQL Server数据库MySQL数据库Access数据库PreparedStatement接口:JNDI-数据源（Data Source）与连接池（Connection

avatar CSDN学习社区

“模式识别与机器学习”学习笔记no2.再谈感知机

接**上篇：上篇主要进行了PLA，Pocket算法的理论过程分析和在给定数据集上利用pocket算法对数据集进行分类学习，得到错分数量最少的分类面。上篇中pocket算法的过程已经进行了编程和测试，框架已经建立了起来，这一篇主要上篇中没有提到或涉及不深的几个问题。1.数据集的构造。上篇是直接使用了题目给的向量，这次来根据正态分布来产生数据集。np.random.normal函数可以根据均值和方差生

avatar CSDN学习社区