Chrome插件开发入门（一）

Chrome插件开发入门（一）

0序言

至于Chrome插件，你或多或少可以使用一些比如AdBlock广告拦截插件、著名的脚本管理器插件Tampermonkey（油猴）等。这些连接器为我们的日常工作提供了极大的便利。浏览器使用。那么如何开发自己的插件呢?最近学习了Google的插件开发文档和网上的一些文档，整理了一些开发笔记。由于Google正在推广该插件的V3版本，因此这里将使用最新的V3版本进行研究。

1连接器的结构概述

在开发插件之前，首先需要了解Chrome插件的结构和基础知识。以下是一些基础知识。

1.1Chrome插件的结构

alt架构

1.2基本概念

1.2.1宣言

Manifest（manifest.json）是Chrome插件配置文件，类似于前端项目中的webpack.config.js或后端maven项目中的pom.xml。它是一个json文件，应位于插件项目的根目录中，并应命名为manifest.json。清单记录了重要的元数据、定义资源、声明权限并标识哪些文件在后台和页面上运行。下面是一些重要的配置项。所有配置项均可参见官方文档：https://developer.chrome.com/docs/extensions/mv3/manifest/

{

//必填元素

“manifestversion”:3,//版本，V3是chrome插件的最新版本，类似前端node版本或者后端jdk版本

“name”:”MyExtension”,//插件名称

“version”:”1.0.1″,//插件版本

//推荐商品

“action”:{…},//点击图标弹出框，弹出框接受html文件

“description”:”Aplaintextdescription”,//插件的描述

“icons”:{…},//插件图标

//可选（重要，可选并不代表不重要）

“author”:”developer@example.com”,//插件作者

“commands”:{…},//使用命令API添加触发扩展中操作的键盘快捷键

“background”:{…},//ServiceWorker的配置

“contentscripts”:[{…}],//内容脚本设置

“optionspage”:”options.html”,//选项页面配置

“permissions”:[“…”],//插件要使用的权限

“版本名称”:”1.0beta”,

“webaccessibleresources”:[…]//配置Web可访问资源

}

1.2.2ServiceWorker

ServiceWorker是一个事件处理程序，可以侦听浏览器事件，例如导航到新页面、删除书签或关闭选项卡。一旦这些事件被触发，注册在ServiceWorker上的事件处理程序将被调用。需要明确的是，这里的事件是浏览器事件，而不是页面文档上的js事件（例如鼠标点击事件、滑动事件）。ServiceWorker有一个独立的运行时，与js页面运行时隔离，因此它无法访问页面的DOM，而是使用ChromeAPI。

1.2.3内容脚本

ContentScript也称为“内容脚本”。它在网页上下文中运行，可以访问和修改DOM，或者将信息从页面传递到插件的其他部分，例如ServiceWorker和PopupPage。虽然ContentScript运行在网页上下文中，但它与页面引入的js运行环境隔离，意味着它无法访问页面定义的变量和方法。

1.2.4弹出页面

PopupPage也称为“弹出页面”。这是点击插件图标后出现的页面，如下图：

它与普通网页非常相似，可以有自己的js和css，但不允许内联js代码。弹出页面与常规网页的区别在于弹出页面的js使用ChromeAPI。，但就像内容脚本一样，它无法访问普通页面的DOM，也无法向普通页面注入js。

1.2.5选项页面

OptionsPage也称为“选项页”。顾名思义，这是插件设置页面。用户可以在此页面配置插件。

首先我们对这些基础知识有一个基本的概念，然后我们会详细讲解如何使用它们并给出相应的演示。

2插件简介

为了让我们能够快速开始开发自己的插件，本节我们将开发一个小插件。这个插件的功能和选词翻译插件类似。用鼠标选择页面上的文本，会出现一个请求框，显示翻译后的内容。我们插件的功能是选择页面上的文本，右键打开选中的文本，无需翻译。效果展示

2.1连接器项目的结构

└──来源

├──图标

│└──标志.png

├──manifest.json

└──脚本

├──内容.js

└──库

└──jQuery.js

我们的插件项目结构与Chrome官方项目结构一致：

图标存储插件图标

插件列表manifest.json配置文件

脚本存储内容脚本和依赖库

2.2项目代码

2.2.1manifest.json

{

“清单版本”：3，

“name”:”演示连接”,

“版本”：“1.0.0”，

“description”:”这是一个演示插件”,

“图标”：{

“16”:”/icons/logo.png”,

“32”:”/icons/logo.png”,

“48”:”/icons/logo.png”,

“128”:”/icons/logo.png”

},

“内容脚本”：[

{

“火柴”：[

“https://*/*”,

“http://*/*”,

“文件夹：///*”

],

“js”：[

“脚本/lib/jQuery.js”，

“脚本/content.js”

],

“runat”：“文档空闲”

}

]

}

Manifest.json主要关心配置元素：

manifestversion这是使用的V3版本。

name为插件命名。

图标插件图标。

contentscripts配置内容脚本的执行方式。匹配路径。内容脚本在站点路径页面上运行。js来运行这些内容脚本。需要注意js之间的依赖关系，依赖的js放在前面。这里content.js使用了jQuery，所以jQuery是在content.js之前引入的。Runat脚本注入时间。值包括documentstart、documentend、documententidle，默认为documententidle。documentstart：在构建DOM和运行js页面之前注入。documentend：在构建DOM之后、加载图像和框架之前注入。documentdle：在documentend和window.onload事件之间注入。

2.2.2content.js

/**

*显示提示框

*

*@param{*}鼠标点击事件

*@param{*}显示提示的文本内容

*/

函数showType(e,类型){

$(‘#typeId’).html(类型);

$(‘#tipDiv’).css(‘left’,e.pageX’px’);

$(‘#tipDiv’).css(‘top’,e.pageY10’px’);

$(‘#tipDiv’).css(‘显示’,’块’);

}

/**

*隐藏请求框

*/

函数隐藏提示(){

$(‘#tipDiv’).css(‘显示’,’无’);

}

/**

*初始化事件监听器

*/

函数initEventListeners(){

//监听鼠标按下事件并关闭请求框

文档ument.addEventListener(“鼠标按下”,()>{

隐藏类型（）；

});

//鼠标点击请求框，防止其关闭

$(‘#tipDiv’).bind(“鼠标按下”,(e)>{

e.stopPropagation();

})

//右键打开选中的内容

document.oncontextmenu(e)>{

//获取选中的内容

constselectedwindow.getSelection().toString();

如果（！选择）{

返回真；

}

//显示选中的内容

显示提示（e，选定）；

返回假；

}

}

(()>{

//在页面中添加一个提示div(tipDiv)，用于打开建议框

$(‘body’).append(“

”）

//style太长，单独设置CSS属性

$(‘#tipDiv’).css(‘background-color’,’浅钢蓝色’);

$(‘#tipDiv’).css(‘字体大小’,’200%’);

//在tipDiv中添加一个内容div，用于放置通知内容

$(‘#tipDiv’).append(“

测试弹出页面”);

//初始化事件监听器

initEventListeners();

})();

content.js的代码注释非常清楚，这里不再重新解释代码。

2.2.3安装插件

3总结

本文首先介绍了Chrome插件开发过程中需要的基础知识，然后写了一个简短的demo来讲解如何开发Chrome插件，帮助大家快速上手。后面会有更高级的文章对ContentScript、ServiceWorker、PopupPage等做更多的研究。