阿里妹导读

本文从阅读器架构演进、插件运转机制、插件基本引见和一些经常出现的插件成功思绪几个方向聊聊Chrome插件。

阅读器架构演进

单进程阅读器时代

单进程阅读器是指阅读器的一切性能模块都是运转在同一个进程里，这些模块蕴含了网络、插件、运转环境、渲染引擎和页面等。在2007年之前，市面上阅读器都是单进程的。

单进程阅读器的架构

很多性能模块运转在一个进程里，是造成单进程阅读器不稳固、不流利和不安保的一个关键要素。

多进程阅读器时代

早期架构

2008年Chrome颁布时的进程架构

从图中可以看出，早期的架构曾经对阅读器的才干启动了拆分，关键拆分为三类： 阅读器进程、插件进程和渲染进程。 每个页面是运转在独自的渲染进程中的，同时页面里的插件也是运转在独自的插件进程之中，进程之间是经过IPC机制启动通讯。

这就处置了单进程时代阅读器的各种疑问：

近期架构

相较之前，近期的架构又有了很多新的变动。

近期Chrome进程架构

从图中可以看出，最新的Chrome阅读器包括： 1个阅读器主进程、1个GPU进程、1个网络进程、多个渲染进程和多个插件进程。

以后架构

目前Chrome阅读器的架构正在出现一些扭转，称为 面向服务的架构(SOA) ，目标是将和阅读器自身（Chrome）相关的局部拆分为一个个不同的服务，服务化之后，这些性能既可以放在不同的进程外面运转也可以兼并为一个独自的进程运转。

这样做的关键要素是让Chrome在不异性能的配件上有不同的体现。当Chrome运转在一些性能比拟好的配件时，阅读器进程相关的服务会被放在不同的进程运转以提高系统的稳固性。相反假设配件性能不好，这些服务就会被放在同一个进程外面口头来缩小内存的占用。

面向服务的架构

插件运转机制

在运转机制前，咱们先来回忆一下关上页面会出现什么：

关上页面出现了什么

关上插件出现了什么

插件的运转相较于页面会有简化

插件基本引见

版本开展

chrome插件存在三个版本，区分是 ManifestV1、ManifestV2和ManifestV3 。

其中MV1版本曾经被废除了，目前市面上存在MV2和MV3版本，以MV2为干流，在被MV3缓缓取代。

时期线：

ManifestV2新特性

ManifestV3新特性切换MV3会带来的疑问//V2background.jsletsaveUserName="";

//其余页面，比如content-或许popup中存储数据chrome.runtime.onMessage.addListener(({type,name})=>{if(type==="set-name"){saveUserName=name;}});

//点击popup时展现数据chrome.action.onClicked.addListener((tab)=>{//这里saveUserName或许为空字符串console.log(saveUserName,"saveUserName");});

//V3serviceworkerchrome.runtime.onMessage.addListener(({type,name})=>{if(type==="set-name"){chrome.storage.local.set({name});}});

chrome.action.onClicked.addListener(async(tab)=>{const{name}=awtchrome.storage.local.get(["name"]);chrome.tabs.sendMessage(tab.id,{name});});

为什么切换MV3？

从ManifestV1到ManifestV2，可以看到Chrome想提高插件的隐衷和安保，同时也优化了不少API。

而ManifestV3除了安保性更完善外，还在性能高低了功夫。ManifestV3的外围十清楚白，就是限度裁减对系统资源的经常使用。不时以来高资源占用都是Chrome为人诟病的痛点，而且裁减由于在后盾运转，假设出现疑问，更是难以定位和治理。

只管参与了诸多限度，但ManifestV3还是有好处的：

这些变动可以让Chrome变得愈加流利，关于用户来说是善报。

展现方式

Chrome插件有以下经常出现的8中展现方式：

browserAction(阅读器右上角)

在阅读器右上角裁减程序一栏显示，蕴含一个图标、称号和popup

山海关插件popup

pageAction(地址栏右侧)

pageAction指的是在当某些特定页面关上才显示的图标。在早些版本的Chrome是将pageAction放在地址栏的最左边，左键单击弹出popup，右键单击则弹出相关自动的选项菜单。而新版的Chrome更改了这一战略，pageAction和普通的browserAction一样也是放在阅读器右上角，只不过没有点亮时是灰色的，点亮了才是黑色的，灰色时无论左键还是右键单击都是弹出选项。

右键菜单

经过开发Chrome插件可以自定义阅读器的右键菜单，关键是经过chrome.contextMenusAPI成功，右键菜单可以出如今不同的高低文，比如普通页面、选中的文字、图片、链接，等等。

掘金插件右键菜单

override(笼罩特定页面)

经常使用override可以将Chrome自动的一些特定页面交流掉，改为经常使用裁减提供的页面。

裁减可以替代如下页面：

掘金插件交流了新标签页

devtools(开发者工具)

Chrome准许插件在开发者工具(devtools)上开发，关键表如今：

ReactDeveloperTools

option(选项页)

插件的设置页面，可以在右上角入口右键，有一个选项标签。

omnibox是向用户提供搜查倡导的一种方式，可以在搜查栏输入特定的标识而后按Tab进入搜查。

JSONViewer插件

桌面通知

Chrome提供了一个chrome.notificationsAPI以便插件推送桌面通知，暂未找到chrome.notifications和HTML5自带的Notification的清楚区别及好处。

在后盾JS中，无论是经常使用chrome.notifications还是Notification都不须要放开权限（HTML5方式须要放开权限），间接经常使用即可。

外围引见

manifest.json

这是一个Chrome插件最关键也是必无法少的文件，用来性能一切和插件相关的性能，必定放在根目录。其中，manifest_version、name、version3个是必无法少的。

ManifestV2

{//清单文件的版本，这里先经常使用2展示"manifest_version":2,//插件的称号"name":"...",//插件的版本"version":"1.0.0",//插件形容"deion":"...",//图标，普通偷懒所有用一个尺寸的也没疑问"icons":{"16":"img/icon.png","48":"img/icon.png","128":"img/icon.png"},//会不时常驻的后盾JS或后盾页面"background":{"s":["js/background.js"]},//阅读器右上角图标设置，browser_action、page_action、必定三选一"browser_action":{"default_icon":"img/icon.png","default_title":"...","default_popup":"popup.html"},//当某些特定页面关上才显示的图标"page_action":{"default_icon":"img/icon.png","default_title":"...","default_popup":"popup.html"},//须要间接注入页面的JS"content_s":[{"matches":["<all_urls>"],"js":["js/content-.js"],"css":["css/custom.css"],//代码注入的机遇，document_start,document_end,document_idle，自动document_idle"run_at":"document_start"},],//权限放开"permissions":["contextMenus",//右键菜单"tabs",//标签"notifications",//通知"webRequest",//web恳求"webRequestBlocking","storage",//插件本地存储"https://*/*"//可以经过execute或许insertCSS访问的网站],//普通页面能够间接访问的插件资源列表，假设不设置是无法间接访问的"web_accessible_resources":["js/inject.js"],"homepage_url":"...",//插件主页"chrome_url_overrides":{//笼罩阅读器自动页面"newtab":"newtab.html"},"options_ui":{//插件选项页"page":"options.html","chrome_style":true},"omnibox":{"key":"..."},//向地址栏注册一个关键字以提供搜查倡导，只能设置一个关键字"default_locale":"zh_CN",//自动言语"devtools_page":"devtools.html",//devtools页面入口，留意只能指向一个HTML文件，不能是JS文件"content_security_policy":"...",//安保战略"web_accessible_resources":[//可以加载的资源RESOURCE_PATHS]}

ManifestV3（仅展现与V2版本的不同点）

{"manifest_version":3,"background":{"service_worker":js/background.js"},"action":{//browser_action和page_action，一致为Action"default_icon":"img/icon.png","default_title":"这是一个示例Chrome插件","default_popup":"popup.html"}"content_security_policy":{"extension_pages":"...","sandbox":"..."},"web_accessible_resources":[{"resources":[RESOURCE_PATHS]}]}

是Chrome插件中向页面注入脚本的一种方式（只管名为，其实还可以包括css的），借助content-s咱们可以成功经过性能的方式轻松向指定页面注入JS和CSS。

content-s和原始页面共享DOM，但不共享JS。如要访问页面JS（例如某个JS变量），只能经过injectedjs来成功。content-s不能访问绝大局部chromeAPI，除了上方这4种：

这些API绝大局部时刻都够用了，有须要调用其它API的话，可以经过通讯让background或serviceworker来帮助调用

background

后盾是一个常驻的页面，它的生命周期是插件中一切类型页面中最长的，它随着阅读器的关上而关上，随着阅读器的封锁而封锁，所以通常把须要不时运转的、启动就运转的、全局的代码放在background外面。

background的权限十分高，简直可以调用一切的Chrome裁减API（除了devtools），而且它可以有限度跨域，可以跨域访问任何网站而毋庸要求对方设置CORS。

background的概念在MV3版本中变为了serviceworker，区别在于生命周期变短了，serviceworker是持久的基于事情的脚本，所以不适宜用来保留全局变量。

popup是点击右上角图标时关上的一个小窗口网页，焦点退出网页就立刻封锁，普通用来做一些暂时性的交互。权限级别和background差不多，就是生命周期比拟短。

chrome插件中其实没有injected-这一律念，这是开发者们在开发环节中衍生进去的一种概念，指的是经过DOM操作的方式向页面注入的一种JS。

由于content-无法访问页面中的JS，只管可以操作DOM，但是DOM却不能调用它，也就是无法在DOM中经过绑定事情的方式调用content-中的代码。但是在网页中参与一个按钮来调用插件的才干是一个比拟经常出现的需求，所以降生了injected-。

插件通讯机制

讲通讯机制之前，先回忆一下插件中存在的脚本类型。

Chrome插件的JS关键可以分为这5类：injected、content-、popupjs、backgroundjs和devtoolsjs。

权限对比

JS种类	可访问的API	DOM访问状况	JS访问状况	间接跨域
和普通JS无任何差异，不能访问任何裁减API	可以访问	可以访问	无法以
只能访问extension、runtime等局部API	可以访问	无法以	无法以
可访问绝大局部API，除了devtools系列	无法间接访问	无法以	可以
background	可访问绝大局部API，除了devtools系列	无法间接访问	无法以	可以
只能访问devtools、extension、runtime等局部API	可以	可以	无法以

经过权限对比可以看到，每一种脚本在权限上都不相反，所以各种脚本间的相互通讯就十分关键，这也是插件能够成功泛滥性能的基础。

通讯概览

background
window.postMessage
window.postMessage	chrome.runtime.sendMessage chrome.runtime.connect	chrome.runtime.sendMessage chrome.runtime.connect
chrome.tabs.sendMessage chrome.tabs.connect	chrome.extension.getBackgroundPage
background	chrome.tabs.sendMessage chrome.tabs.connect	chrome.extension.getViews
chrome.devtools.inspectedWindow.eval	chrome.runtime.sendMessage	chrome.runtime.sendMessage

一些经常出现插件的成功思绪

埋点日志检测

普通业务中都会启动一些埋点上报，埋点的实质就是发送一些带特定参数的恳求，前端本地调试的时刻想实时检查埋点信息通常须要去检查上报接口的入参，或许去对应的埋点平台检查，这样十分不繁难。

基于这个，咱们可以经常使用插件来协助咱们极速的可视化检查埋点信息：

页面注入小工具

插件的另一个经常出现用法就是往页面注入一些工具代码，比如去除页面广告工具。

总结

参考资料：

《阅读器上班原理与通常》：

《Insidelookatmodernwebbrowser》：

《图解阅读器的基本上班原理》：

《WelcometoManifestV3》：

MDN文档：

web_accessible_resources：

---

离线安装chrome插件的步骤 如何离线安装谷歌浏览器插件

具体步骤如下：

1、点击Chrome浏览器右上角的自定义及控制按钮，在下拉框中选择更多工具选项，然后点击扩展程序来启动Chrome浏览器的扩展管理器页面。

2、在打开的Chrome浏览器的扩展管理界面中，可以看到已经安装的Chrome扩展程序。

3、拖拽安装扩展程序

找到已经下载到的Chrome离线扩展程序安装文件，然后将其从资源管理器中拖拽到Chrome的扩展管理中，这时候用户会发现在扩展程序界面中会多出一个拖放以安装的信息提示。

注：如果不能把扩展程序文件从资源管理器拖拽到Chrome扩展程序界面，可能是因为Chrome是以管理员身份启动的，取消以管理员身份运行就可以了。

4、松开鼠标就可以把当前正在拖动的扩展程序安装到Chrome浏览器中去，但是谷歌考虑到用户的安全隐私，在用户松开鼠标后会给予一个确认安装的提示。

5、点击添加按钮就可以把该离线Chrome扩展程序安装到Chrome浏览器中去，安装成功以后该扩展程序会立即显示在浏览器右上角（如果有扩展程序按钮的话），如果没有扩展程序按钮的话，用户还可以通过Chrome扩展管理器找到已经安装的扩展程序。

6、由于一些特殊原因，极个别Chrome插件在使用上述的安装方法的时候，Chrome会提示只能通过Chrome网上应用商店安装该程序。

7、把下载后的离线Chrome扩展程序的文件扩展名改成。

注：如果看不到Chrome扩展程序的扩展名请网络搜索相关操作系统的设置方法，这里不再叙述。

8、右键点击该文件，并使用压缩软件（如魔方压缩、360压缩等）对该压缩文件进行解压，并保存到系统的一个任意文件夹下。

9、打开刚刚解压的Chrome插件文件夹，确认metadata文件夹名称中是否包含下划线_，如果有，则去掉

10、在Chrome扩展管理器界面的右上方的开发者模式按钮上打勾，该页面就会出现加载已解压的扩展程序等按钮，点击加载已解压的扩展程序按钮，并选择刚刚解压的Chrome插件文件夹的位置。

11、如果不出意外，Chrome扩展程序就会成功加载到Chrome浏览器中。

上述便是离线安装chrome插件的步骤的详细步骤，有这个需要的用户们可以按照上面的方法来进行安装吧。

Chrome浏览器是什么

Chrome也是一个开源的浏览器，Chrome是由原先的“GoogleBrowser”项目发展而来，采用了Webkit的网页渲染引擎，还将包含Google的“GearsProject”。 比较特别的就是这个内置的Gears引擎了，为我们创建离线版的浏览器应用提供了一种新的方案。 让人没有猜到的是，Chrome并非基于那个Google一直大力推崇的老战友Firefox，而是基于苹果的WebKit引擎。 尽管Safari除了在苹果自己的iMac和iPhone上运行外，没有太多的用户了，但WebKit却向它提供了一大优势：速度。 这样对于那些对于Firefox难以忍受的用户来说，还是有这么点吸引力的。 \x0d\x0a\x0d\x0a和当前几乎所有的浏览器不同的是，Chrome采用的是多进程的架构。 将每个页面分离成单个的进程，可以通过ChromeProcessManager进行管理。 这样我们在某一个页面崩溃的时候不会影响到整个浏览器的使用。 Chrome的JavaScript.采用的是来自丹麦的V8，在对Dojo和Ext的一些应用的简单试用，感觉到JavaScript.的执行速度相对IE和Firefox有一定的优势。 \x0d\x0a\x0d\x0aGoogle给Chrome提供了一个可以在线实时更新的恶意网站列表功能，第一时间反馈给用户所要访问的网页的危险性，避免可能的危害。 这个和Google搜索提供的功能有些相似，不过基于浏览器的提醒会让用户更加注意上网的安全。 \x0d\x0a\x0d\x0a总的来说，GoogleChrome秉承了Google的一贯特色，简洁。 简洁的除了标签栏和地址栏，就再也找不到其他什么东西了，连状态栏都省掉了，连可以设置的东西也少的可怜