干货hrome插件扩展开发全攻略博客

另外，本文图片较多，且图片服务器带宽有限，右下角的目录滚动监听必须等到图片全部加载完毕之后才会触发，所以请耐心等待加载完毕。

本文目录：

demo部分截图：

严格来讲，我们正在说的东西应该叫Chrome扩展(​​Chrome Extension​​)，真正意义上的Chrome插件是更底层的浏览器功能扩展，可能需要对浏览器源码有一定掌握才有能力去开发。鉴于Chrome插件的叫法已经习惯，本文也全部采用这种叫法，但读者需深知本文所描述的Chrome插件实际上指的是Chrome扩展。

个人猜测​​crx​​​可能是​​Chrome Extension​​如下3个字母的简写：

另外，其实不只是前端技术，Chrome插件还可以配合C++编写的dll动态链接库实现一些更底层的功能(NPAPI)，比如全屏幕截图。

由于安全原因，Chrome浏览器42以上版本已经陆续不再支持NPAPI插件，取而代之的是更安全的PPAPI。

增强浏览器功能，轻松实现属于自己的“定制版”浏览器，等等。

Chrome插件提供了很多实用API供我们使用，包括但不限于：

从右上角菜单->更多工具->扩展程序可以进入 插件管理页面，也可以直接在地址栏输入 chrome://extensions 访问。

勾选​​开发者模式​​​即可以文件夹的形式直接加载插件，否则只能安装​​.crx​​​格式的文件。Chrome要求插件必须从它的Chrome应用商店安装，其它任何网站下载的都无法直接安装，所以，其实我们可以把​​crx​​文件解压，然后通过开发者模式直接加载。

开发中，代码有任何改动都必须重新加载插件，只需要在插件管理页按下​​Ctrl+R​​即可，以防万一最好还把页面刷新一下。

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

示例配置：

特别注意，如果没有主动指定​​run_at​​​为​​document_start​​​（默认为​​document_idle​​），下面这种代码是不会生效的：

其实看到这里不要悲观，这些API绝大部分时候都够用了，非要调用其它API的话，你还可以通过通信来实现让background来帮你调用（关于通信，后文有详细介绍）。

好了，Chrome插件给我们提供了这么强大的JS注入功能，剩下的就是发挥你的想象力去玩弄浏览器了。

后台（姑且这么翻译吧），是一个常驻的页面，它的生命周期是插件中所有类型页面中最长的，它随着浏览器的打开而打开，随着浏览器的关闭而关闭，所以通常把需要一直运行的、启动就运行的、全局的代码放在background里面。

background的权限非常高，几乎可以调用所有的Chrome扩展API（除了devtools），而且它可以无限制跨域，也就是可以跨域访问任何网站而无需要求对方设置​​CORS​​。

配置中，​​background​​​可以通过​​page​​​指定一张网页，也可以通过​​scripts​​直接指定一个JS，Chrome会自动为这个JS生成一个默认的网页：

它的生命周期是：在被需要时加载，在空闲时被关闭，什么叫被需要时呢？比如第一次安装、插件更新、有content-script向它发送消息，等等。

除了配置文件的变化，代码上也有一些细微变化，个人这个简单了解一下就行了，一般情况下background也不会很消耗性能的。

​​popup​​​是点击​​browser_action​​​或者​​page_action​​图标时打开的一个小窗口网页，焦点离开网页就立即关闭，一般用来做一些临时性的交互。

​​popup​​​可以包含任意你想要的HTML内容，并且会自适应大小。可以通过​​default_popup​​​字段来指定popup页面，也可以调用​​setPopup()​​方法。

配置方式：

这里的​​injected-script​​是我给它取的，指的是通过DOM操作的方式向页面注入的一种JS。为什么要把这种JS单独拿出来讨论呢？又或者说为什么需要通过这种方式注入JS呢？

这是因为​​content-script​​​有一个很大的“缺陷”，也就是无法访问页面中的JS，虽然它可以操作DOM，但是DOM却不能调用它，也就是无法在DOM中通过绑定事件的方式调用​​content-script​​​中的代码（包括直接写​​onclick​​​和​​addEventListener​​2种方式都不行），但是，“在页面上添加一个按钮并调用插件的扩展API”是一个很常见的需求，那该怎么办呢？其实这就是本小节要讲的。

在​​content-script​​​中通过DOM方式向页面注入​​inject-script​​代码示例：

你以为这样就行了？执行一下你会看到如下报错：

至于​​inject-script​​​如何调用​​content-script​​中的代码，后面我会在专门的一个消息通信章节详细介绍。

开发者或者插件主页设置，一般会在如下2个地方显示：

通过配置​​browser_action​​​可以在浏览器的右上角增加一个图标，一个​​browser_action​​​可以拥有一个图标，一个​​tooltip​​​，一个​​badge​​​和一个​​popup​​。

示例配置如下：

​​browser_action​​​图标推荐使用宽高都为19像素的图片，更大的图标会被缩小，格式随意，一般推荐png，可以通过manifest中​​default_icon​​字段配置，也可以调用setIcon()方法。

修改​​browser_action​​​的manifest中​​default_title​​​字段，或者调用​​setTitle()​​方法。

所谓​​badge​​​就是在图标上显示一些文本，可以用来更新一些小的扩展状态提示信息。因为badge空间有限，所以只支持4个以下的字符（英文4个，中文2个）。badge无法通过配置文件来指定，必须通过代码实现，设置badge文字和颜色可以分别使用​​setBadgeText()​​​和​​setBadgeBackgroundColor()​​。

效果：

所谓​​pageAction​​​，指的是只有当某些特定页面打开才显示的图标，它和​​browserAction​​最大的区别是一个始终都显示，一个只在特定情况才显示。

而新版的Chrome更改了这一策略，pageAction和普通的browserAction一样也是放在浏览器右上角，只不过没有点亮时是灰色的，点亮了才是彩色的，灰色时无论左键还是右键单击都是弹出选项：

具体是从哪一版本开始改的没去仔细考究，反正知道v50.0的时候还是前者，v58.0的时候已改为后者。

调整之后的​​pageAction​​​我们可以简单地把它看成是可以置灰的​​browserAction​​。

示例(只有打开百度才显示图标)：

效果图：

效果：

效果如下：

使用​​override​​页可以将Chrome默认的一些特定页面替换掉，改为使用扩展提供的页面。

扩展可以替代如下页面：

注意：

下面的截图是默认的新标签页和被扩展替换掉的新标签页。

代码（注意，一个插件只能替代一个默认页，以下仅为演示）：

使用过vue的应该见过这种类型的插件：

是的，Chrome允许插件在开发者工具(devtools)上动手脚，主要表现在：

先来看2张简单的demo截图，自定义面板（判断当前页面是否使用了jQuery）：

自定义侧边栏（获取当前页面所有图片）：

来一张官方图片：

每打开一个开发者工具窗口，都会创建devtools页面的实例，F12窗口关闭，页面也随着关闭，所以devtools页面的生命周期和devtools窗口是一致的。devtools页面可以访问一组特有的​​DevTools API​​​以及有限的扩展API，这组特有的​​DevTools API​​只有devtools页面才可以访问，background都无权访问，这些API包括：

setPage时的效果：

以下截图示例的代码：

修改了devtools页面的代码时，需要先在 chrome://extensions 页面按下​​Ctrl+R​​重新加载插件，然后关闭再打开开发者工具即可，无需刷新页面（而且只刷新页面不刷新开发者工具的话是不会生效的）。

所谓​​options​​页，就是插件的设置页面，有2个入口，一个是右键图标有一个“选项”菜单，还有一个在插件管理页面：

在Chrome40以前，options页面和其它普通页面没什么区别，Chrome40以后则有了一些变化。

这个页面里面的内容就随你自己发挥了，配置之后在插件管理页就会看到一个​​选项​​按钮入口，点进去就是打开一个网页，没啥好讲的。

效果:

看起来是不是高大上了？

几点注意：

​​omnibox​​​是向用户提供搜索建议的一种方式。先来看个​​gif​​图以便了解一下这东西到底是个什么鬼：

注册某个关键字以触发插件自己的搜索建议界面，然后可以任意发挥了。

首先，配置文件如下：

最简单的通知：

代码：

通知的样式可以很丰富：

这个没有深入研究，有需要的可以去看官方文档。

Chrome插件的JS主要可以分为这5类：​​injected script​​​、​​content-script​​​、​​popup js​​​、​​background js​​​和​​devtools js​​，

JS种类

可访问的API

DOM访问情况

JS访问情况

直接跨域

injected script

和普通JS无任何差别，不能访问任何扩展API

可以访问

可以访问

不可以

content script

只能访问 extension、runtime等部分API

可以访问

不可以

不可以

popup js

可访问绝大部分API，除了devtools系列

不可直接访问

不可以

可以

background js

可访问绝大部分API，除了devtools系列

不可直接访问

不可以

可以

devtools js

只能访问 devtools、extension、runtime等部分API

可以

可以

不可以

JS类型

调试方式

图片说明

injected script

直接普通的F12即可

懒得截图

content-script

打开Console,如图切换

popup-js

popup页面右键审查元素

background

插件管理页点击背景页即可

devtools-js

暂未找到有效方法

前面我们介绍了Chrome插件中存在的5种JS，那么它们之间如何互相通信呢？下面先来系统概况一下，然后再分类细说。需要知道的是，popup和background其实几乎可以视为一种东西，因为它们可访问的API都一样、通信机制一样、都可以跨域。

注：​​-​​表示不存在或者无意义，或者待验证。

injected-script

content-script

popup-js

background-js

injected-script

content-script

popup-js

background-js

devtools-js

popup可以直接调用background中的JS方法，也可以直接访问background的DOM：

小插曲，今天碰到一个情况，发现popup无法获取background的任何方法，找了半天才发现是因为background的js报错了，而你如果不主动查看background的js的话，是看不到错误信息的，特此提醒。

至于​​background​​​访问​​popup​​​如下（前提是​​popup​​已经打开）：

双方通信直接发送的都是JSON对象，不是JSON字符串，所以无需解析，很方便（当然也可以直接发送字符串）。

注意事项：

​​content-script​​​和页面内的脚本（​​injected-script​​自然也属于页面内的脚本）之间唯一共享的东西就是页面的DOM元素，有2种方法可以实现二者通讯：

第一种方法（推荐）：

​​injected-script​​中：

content script中：

第二种方法：

​​injected-script​​中：

短连接的话就是挤牙膏一样，我发送一下，你收到了再回复一下，如果对方不回复，你只能重新发，而长连接类似​​WebSocket​​会一直建立连接，双方可以随时互发消息。

短连接上面已经有代码示例了，这里只讲一下长连接。

JS：

JS代码：

一般有2种方法：

获取当前选项卡id的另一种方法，大部分时候都类似，只有少部分时候会不一样（例如当窗口最小化时）

通过webRequest系列API可以对HTTP请求进行任性地修改、定制，这里通过​​beforeRequest​​来简单演示一下它的冰山一角：

英文效果：

中文效果：

比较常用用的一些API系列：

已安装的插件源码路径：​​C:\Users\用户名\AppData\Local\Google\Chrome\User Data\Default\Extensions​​，每一个插件被放在以插件ID为名的文件夹里面，想要学习某个插件的某个功能是如何实现的，看人家的源码是最好的方法了：

如何查看某个插件的ID？进入 chrome://extensions ，然后勾线开发者模式即可看到了。

很多时候你发现你的代码会莫名其妙的失效，找来找去又找不到原因，这时打开background的控制台才发现原来某个地方写错了导致代码没生效，正式由于background报错的隐蔽性(需要主动打开对应的控制台才能看到错误)，所以特别注意这点。

在对popup页面审查元素的时候popup会被强制打开无法关闭，只有控制台关闭了才可以关闭popup，原因很简单：如果popup关闭了控制台就没用了。这种方法在某些情况下很实用！

也就是不支持将js直接写在html中，比如：

报错如下：

解决方法就是用JS绑定事件：

如果这样写：

报错如下：

由于通过​​content_scripts​​注入的CSS优先级非常高，几乎仅次于浏览器默认样式，稍不注意可能就会影响一些网站的展示效果，所以尽量不要写一些影响全局的样式。

之所以强调这个，是因为这个带来的问题非常隐蔽，不太容易找到，可能你正在写某个网页，昨天样式还是好好的，怎么今天就突然不行了？然后你辛辛苦苦找来找去，找了半天才发现竟然是因为插件里面的一个样式影响的！

打包的话直接在插件管理页有一个打包按钮：

然后会生成一个​​.crx​​文件，要发布到Google应用商店的话需要先登录你的Google账号，然后花5个$注册为开发者，本人太穷，就懒得亲自验证了，有发布需求的自己去整吧。

推荐查看官方文档，虽然是英文，但是全且新，国内的中文资料都比较旧（注意以下全部需要翻墙）：

部分中文资料，不是特别推荐：

附图：Chrome高清png格式logo：

项目简介：该项目实现了基于 Scenario 框架的全屏展开组件，用于在多层滚动场景中实现某个元素的展开和收起效果。该组件利用 Scenario 的动画和手势事件，提供了流畅的交互体验。开发步骤： 1. 环境准备确保你已经安装了 DevEco Studio 并配置好了开发环境。如果还没有安装，可以从华为开发者官网下载并安装。 2. 创建新项目打开 DevEco Studio，点

当涉及到网络通信和高性能的Java应用程序时，Netty是一个强大的框架。它提供了许多功能和组件，其中之一是JNI传输。JNI传输是Netty的一个特性，它为特定平台提供了高效的网络传输。在本文中，我们将深入探讨Netty提供的特定平台的JNI传输功能，分析其优势和适用场景。我们将介绍每个特定平台的JNI传输，并讨论其性能、可靠性和可扩展性。通过了解这些特定平台的JNI传输，您将能够更好地选择和配置适合您应用程序需求的网络传输方式，以实现最佳的性能和可靠性。

本文主要：如何开发一个 visual Studio 扩展，其实扩展也叫插件。那么就是如何开发一个 vs插件。

[背景]          今天我们的网络工程师在使用cacti时,想看到一天中每半个小时的平均端口流量,本可以在cacti的图中,选择时间,可工程量太大了,手工操作也太繁琐了,就想有没有什么好的方法,于是我的简单思路就出来了.......这是初稿,我想随着需求,我还要进一步完善吧![过程] rrd

# Chrome Java扩展下载与开发指南在信息技术日益发达的今天，浏览器扩展已经成为开发者与用户之间的重要桥梁。其中，Chrome浏览器的扩展因其强大的功能和便利的使用方式，受到众多开发者的青睐。在这篇文章中，我们将探讨如何创建一个简单的Chrome扩展，并附上代码示例，助你快速入门。## Chrome扩展的基本结构一个Chrome扩展通常包含以下几个基本文件：1. **man

# Unity Android 扩展开发：打造自定义模块## 引言Unity 是一个强大的跨平台游戏引擎，广泛应用于游戏开发、虚拟现实（VR）和增强现实（AR）等领域。在 Unity 中开发 Android 应用时，有时候需要使用 Java 或 Kotlin 编写一些原生功能模块来扩展 Unity 的功能。本文将探讨如何在 Unity 中进行 Android 扩展开发，包括代码示例和相关步

skipper 的扩展包含filter类型的，以及Predicates ，当然script（lua）脚本也是 这次主要是filter类型的开发 filter 接口约定 格式 filter 至少需要包含spec&&filter 类型 spec 包含用户初始化filter 必备的参数，spec 必须实现

整体参考概述 krakend的原则 Reactive 是核心 快速失败 简单最好 所有都是插件 每个请求都必须在自己的请求范围上下文处理 krakend 内部状态 krakend 内部包含了两种状态building && working building 状态 主要进行启动以及系统的准备，方便进行流

================================Start 开发步骤 Start================================+------------------------------------+1.准备PHP源码包、Windows下的二进制包、安装Visual C+++------------------------------------+

PHP 扩展开发初探

# 如何使用 jQuery 实现全屏截图许多开发者在工作中都有过需要将网页的某一部分或全部进行截图的需求。本篇文章将指导你使用 jQuery 实现全屏截图的功能。我们将涵盖整个流程，并详细展示每一步所需的代码和相关注释。## 流程概述下面是实现全屏截图的流程图：```mermaidjourney title jQuery 全屏截图流程 section 开始

FFmpeg扩展开发 对FFmpeg RTMP/FLV部分做了扩展，用于支持H.265。 针对《video_file_format_spec_v10_1》 VIDEODATA部分扩展如下： VIDEODATA The VideoTagHeader contains video-specific me

公司项目开发用到angular2.0+webpai,特此记录学习开发笔记。WebStorm是Angular2.0开发的不二选择，下面将逐步介绍WebStorm的安装配置及使用示例。 1.下载最新版本WebStorm:WebStorm下载2.创建一个Angular项目 Angular CLI             &n

1 适用范围本文档适用于希望使用基于SylixOS进行Python扩展库开发的用户。2 SylixOS Python简介Python是一门面向对象的解释型的脚本语言，Python具有丰富和强大的库。它常被昵称为胶水语言，能够把用其他语言制作的各种模块（尤其是C/C++）很轻松地联结在一起。常见的一种应用情形是，使用Python快速生成程序的原型（有时甚至是程序的最终界面），然后对其中有特别要求的部

Google Chrome 自去年9月发布以来，差不过就快一年了。Chrome 确实带来了一些新的变化，但这些变化仍不足使我抛弃目前的首选浏览器 FireFox。主要原因是 Google Chrome 没有我想要的两个功能（或扩展）：SearchStatus (在不安装 Google Toolbar 和 Alexa Toolbar 的情况下，显示 Google PageRan

近日来申请通过CSDN准专家,为了顺利在六个月后升级为认证专家,并对得起这个勋章，我感觉 不能松懈博客的更新频率以及质量了。C/C++ windows下的开发是我相对来说做的比较多的地方,对于Linux下的服务器开发 等等也算是半路出家,恰逢近来在研究分布式存储,涉及到了 Nginx 扩展开发以及配置,查阅了好多的资料发现Nginx配置部署起来相当的容易,但是源代码是真的晦涩难懂,经常会看的我们百

目录一、CDN二、懒加载三、回流与重绘四、节流与防抖1. 对节流与防抖的理解五、图片优化六、Webpack优化1. 如何提⾼webpack的打包速度?2. 如何减少 Webpack 打包体积3. 如何⽤webpack来优化前端性能？4. 如何提⾼webpack的构建速度？七、Vue 优化一、CDN使 ...

由于我们用户在使用题库的时候，会用到使用关键词去搜索题目我们需要根据用户给的关键词去进行搜索，我们如果沿用之前的mysql进行数据库查询，那样的话效率太慢了（系统管理员那里可以用，因为那里不太要求效率），那如果使用redis呢？使用redis的话，如果使用redis原生逻辑来解决的话，很明显，red ...

一、基础SVM分类代码示例 1. 使用fitcsvm函数（推荐新版MATLAB） % 加载数据集（以鸢尾花为例） load fisheriris; X = meas(:,1:2); % 选取前两个特征 Y = species; % 划分训练集和测试集（70%训练，30%测试） cv = cvpart ...

当我们谈论数据平台或数据架构时，我们需要了解数据湖、数据仓库和数据湖屋是什么。由于我们生活在一个数据越来越多的世界——几年前人们总是说“数据是新的黄金”——因此我们相应地也需要能够存储、处理和利用大量数据的系统。在出现这三个术语之前，数据主要存储在关系数据库中（用于结构化数据）。公司中的数据世界不仅在数量上增加，而且在种类上也增加了。想想你在日常工作中遇到的数据格式：结构化数据，如客户数据、库存水平或销售数据，非结构化数据，如电子邮件、社交媒体帖子或支持票证，半结构化数据，如 JSON 和 XML 文件。

1.算法仿真效果matlab2022a仿真结果如下（完整代码运行后无水印）：通过不断与环境交互并更新Q值函数，智能体能够逐渐学习到在不同状态下的最优动作，从而实现杆的平衡控制。仿真操作步骤可参考程序配套的操作视频。2.算法涉及理论知识概要强化学习作为一种强大的机器学习范式，为解决这类复杂的控制问题提供了有效的途径。其中，Q-learning算法因其简单性和通用性，在Cart-Pole推车杆平衡控制