这篇文章主要站在浏览器进程架构模型的发展史来聊一下页面的渲染，及渲染过程中，进程之间是如何通信的。 浏览器任务管理器.png 这些进程的职责是什么，怎么来的呢？为什么这么设计呢？...，由进程来管理 线程阻塞：进程中的线程是阻塞的（如果此线程操作了公共内存区），任意线程执行出错都会导致进程崩溃 数据共享：线程之间共享进程中的数据 进程隔离：进程之间是相互隔离相互独立的内存空间，可以通过...，如果要换一个操作系统、换一个设备，依然能够让chrome稳定运行如何做到呢？...1.4 面向服务架构 image.png 这有些关键字：更内聚、松耦合、易维护和扩展，简单、稳定、高速、安全、多设备，其他的可以自己思考一下了，这不就是一个小型的操作系统要做的事情么，目前很多微服务的...- 我们切换到local.test.com页面（local.test.com页面是在新标签页中打开），在控制台查看window.opener发现为null 会发现在不同进程中，不具有同一浏览上下文组的页面之间是相互隔离的
执行环境 chrome插件的执行环境主要有三种，一种是后台页，一种是popup页面，还有一种叫内容脚本( content script )。 这三种执行环境分别在三个不同的沙箱中执行。...但是可以通过chrome提供的消息管道的形式相互访问。...关于通信 由于不同的执行环境（后台、popup、centent script和网页原生的脚本环境）在不同的沙箱中，他们之间要进行通信可以使用chrome的消息管道API。...调试 chrome的调试已经非常强大了，在扩展页面上打开开发者模式，可以载入正在开发中的插件的文件夹。 后台页的调试可以在扩张页面点击插件下面的地址打开调试面板。...content script可以在网页上打开网页的脚本调试面板，然后脚本列表那里有个tab是Content scripts 打包和自动更新 chrome浏览器自带了打包工具，在扩展页面上就有。
你可以在 chrome 应用商店下载到它： 开发它的原因是因为，在我们的业务开发中，开发过程经常需要面对超长的 URL，带有 N 多个参数，它可能长这样： 不是开玩笑，真实情况可能比这个还长。...中的微格式数据 我们可以这样理解它，在页面加载完毕之后，我们的扩展程序会向这个页面注入一个或者额多个脚本，这个脚本可以获得浏览器所访问的 web 页面的详细信息。...接下来，我们的扩展要灵活地完成各种功能，最重要的就是互相间的通信！ 信息数据在内容脚本、弹窗页面以及事件页面之间传递是一个扩展程序最重要的部分。...扩展程序的消息传递 消息传递存在的必要性是因为内容脚本在网页而不是扩展程序的环境中运行，所以它们通常需要某种方式与扩展程序的其余部分通信。...打开浏览器，试一下，chrome 对象其实包含了非常多的功能： 各种类型的消息传递都是通过这个 chrome 对象进行，分为： 1.简单的一次性请求 2.长时间的连接 3.跨扩展程序消息传递 4.
Extension API 360浏览器的插件文档 中文, 虽然内核差不多但是不一定与 Chrome api 一致, 可以作为参考 Chrome 官方案例库 案例 如何实现网页和Chrome插件之间的通信...扩展在他们的后台脚本中监视这些事件，然后用指定的指令进行响应 关于后台脚本的状态 首次下载后或者更新后被加载 后台脚本下载后会处于休眠状态，直到它侦听的某个事件被触发， 侦听到事件后，会使用指定的指令响应...（怎么相应自定义） 以下情况会需要调用到后台脚本 扩展首次下载或者版本更新 后台脚本中正在监听事件，并且这事件被触发了 content_script 或者其他扩展中调用了 sendMessage...当前扩展中的其他部分，例如弹窗中调用了 runtime.getBackgroundPage 后台脚本定义选项 { ......使用 chrome_ui_overrides 配置，详细配置查看文档,可以设置一些书签方面的规则 内置页面替换 使用 chrome_url_overrides 配置，详细配置查看文档，标签页、历史页、
此外，进程可以通过信号进行通信，相互通知特定的事件或请求。socket利用网络协议将 IPC 扩展到不同的机器。 多进程浏览器增强了稳定性，隔离进程可以防止崩溃影响到整个浏览器。...同时，在呈渲染进程中运行 JavaScript 也可以隔离其影响。如果脚本阻塞呈现进程，它只影响当前页，浏览器和其他页不受影响，因为每个页都在其专用渲染进程中运行脚本。...4.3.3 后台脚本 Chrome 扩展中的后台脚本具有最长的生命周期，并且在浏览器打开时连续运行。它拥有广泛的权限，允许访问大多数 Chrome 扩展 API 和跨源请求，而不受 CORS 限制。...4.4 Chrome 插件的通信机制 在 Chrome 插件中，通信依赖于五种类型的脚本: 注入脚本，表示动态注入到网页中的脚本，通常依赖于 window.postMessage。...内容脚本，在特定网页上下文中执行的脚本，利用 window.postMessage、 chrome.runtime.sendMessage 和 chrome.runtime.connect 进行脚本间通信
看完您可以会收获 用vue从零开始写一个chrome插件 如何用Object.defineProperty拦截fetch请求` 如何使用油猴脚本开发一个扩展程序 日常提效的一些思考 油猴脚本入门示例 因为接下来的两个小工具都是基于油猴脚本来实现的...油猴脚本（Tampermonkey）是一个流行的浏览器扩展，可以运行用户编写的扩展脚本，来实现各式各样的功能，比如去广告、修改样式、下载视频等。 如何写一个油猴脚本? 1....模拟手机设备来开发，所以往往会涉及到在chrome浏览器中模拟用户登录，其涉及以下三步(这个步骤比较繁琐)。...，我们会演示如何插入脚本并且在网页加载的时候弹一个hello world popup与background通信部分 popup完成用户的主要交互，在viewA页面点击获取自定义的ua信息 修改ajax请求...参考 【干货】Chrome插件(扩展)开发全攻略 油猴脚本编写教程
开发自己的扩展程序 OK，简单了解完什么是扩展程序后，下面我们来看看如何开发一款扩展程序。 当然，首先我们要搞清楚为什么我们需要扩展程序，它有什么作用呢？...接下来，我们的扩展要灵活地完成各种功能，最重要的就是互相间的通信！ 信息数据在内容脚本、弹窗页面以及事件页面之间传递是一个扩展程序最重要的部分。...扩展程序的消息传递 消息传递存在的必要性是因为内容脚本在网页而不是扩展程序的环境中运行，所以它们通常需要某种方式与扩展程序的其余部分通信。...使用 chrome.* API 消息传递，主要使用了 Chrome 浏览器的内置 chrome 对象进行。打开浏览器，试一下，chrome 对象其实包含了非常多的功能： ?...在 chrome 浏览器中访问 chrome://extensions（或者单击多功能框最右边的按钮：打开 Chrome 浏览器菜单，并选择更多工具 (L) 菜单下的扩展程序 (E)，进入相同的页面）。
像类似掘金插件又是怎么实现的，当我安装稀土掘金插件后，我的导航页都被改掉了，因此你也可以做一个类似的插件，来导航你公司的一些产品，方便快捷的实现你的内部导航 在开始本文之前，主要是从零认识一个chrome...chrome.runtime几个通信API 正文开始......content_scripts指定加载对应脚本js,css注意matches中匹配的是当前访问的url,当选择时，匹配任何url,必须要有matches[3]否则不会生效 "content_scripts...({ text: inputColorValue }); // 扩展脚本向content发出信息 chrome.tabs.query({ active: true, currentWindow...与content.js通信，就可以修改我当前页面上的元素了 另外推荐一个chrome插件官方的例子chrome-extensions-samples[4]，看完一些例子多插件哟更深刻的认识，在下一节里，
在我们印象中，它就像跑在浏览器中的应用，可以把浏览器想象成手机，那么插件就像是应用，我们从Chrome应用商店中下载，然后安装到Chrome浏览器中，就可以在浏览器中进行运行了。...，彼此之间如何进行通信？...实例3：标签控制 使用chrome.tabs API与浏览器的标签系统进行交互，可以查询，创建、修改和重新排列浏览器中的标签页;我们在使用浏览器时，经常会打开很多标签页，显得很混乱，中途想要找打开的某个页面时...，效率低且痛苦，如果能将这些标签页进行整理并有序的展示该多好，这里给大家推荐一个Chrome扩展插件：OneTab，该插件将所有打开的标签页在新的页面中有序的排列出来，如下图，一目了然。...，出于安全考虑，tab的属性中没有document, 因此无法在扩展中直接获取某个标签页面中的dom元素，但是可以通过发送事件请求来实现： chrome.tabs.sendRequest(tab_id,
交互界面与组成模块 一个扩展的组成模块如下图所示，整个 Chrome 扩展主要包含六个模块：扩展图标、插件弹窗、选项页、单独页、注入页面脚本、后台脚本。...各个模块互通信、协作、配合，就构成了一个完整的 Chrome 扩展。 当然，除了上面的六大模块，还有一个非常非常重要的组成部分，那就是 manifest.json。...3）选项页 选项页的显示时机为当用户在扩展图标上右键-选项可打开，点击之后打开新 Tab 页。 在如上 manifest.json 文件中的 options_page 字段中配置。...6）后台脚本 后台脚本在如上 manifest.json 文件中的 background.service_worker 字段中配置。...这段代码是位于“后台脚本”的一段代码，大概意思就是当扩展安装加载完成之后将 color 变量存储在本地 storage 中。
当我们访问扩展程序的页面可以获得相应的插件id 然后我们可以在https://chrome-extension-downloader.com/中下载相应的crx包。...contextMenus 右键菜单 通过在chrome中调用chrome.contextMenus这个API，我们可以定义在浏览器中的右键菜单。...在chrome中，如果你在地址栏输入非url时，会将内容自动传到google搜索上。...中console选择相应的域 popup js: 在插件右键的列表中有审查弹出内容 background js: 需要在插件管理页面点击背景页然后调试 5.通信方式 在前面介绍过各类js之后，我们提到一个重要的问题就是...那么插件怎么和浏览器前台以及相互之间进行通信呢？
1.1 难以预料第三方公共组件导致的卡顿 腾讯文档管理的公共组件(以下称FC)主要通过 script-loader 动态加载承载了各个页面的公共业务逻辑，然后将脚本注入到品类的 HTML 中，比如登陆、...目前在 excel 调用公共组件过程中，会手动停止卡顿监控，从而让公共组件逻辑不影响详情页的卡顿数据。然而，这无法从根本上改变用户主进程卡顿的体验问题。...插件体系有几个比较关键的点：第一是，第三方插件质量会参差不齐，如何约束插件的运行不会导致页面的卡顿。第二点是，插件如何调用文档SDK，也即使如何规范插件和主线程的通信问题。...在初始化的过程注入到一个 API 服务工厂中返回给一个缓存对象，提供给插件使用。这些对象如何暴露给插件？...2.5 如何兼容多品类 公用组件插件化依赖品类有相同的服务化机制。但各个品类因为代码并不统一，插件化如何兼容各个品类呢？
所以Chrome Ext的代码也就是html、js、css这类，那我们如何获取插件的代码呢？...当我们访问扩展程序的页面可以获得相应的插件id 把crx改名成zip之后解压缩就可以了 manifest.json 在插件的代码中，有一个重要的文件是manifest.json，在manifest.json...contextMenus 右键菜单 通过在chrome中调用chrome.contextMenus这个API，我们可以定义在浏览器中的右键菜单。...中console选择相应的域 popup js: 在插件右键的列表中有审查弹出内容 background js: 需要在插件管理页面点击背景页然后调试 通信方式 在前面介绍过各类js之后，我们提到一个重要的问题就是...那么插件怎么和浏览器前台以及相互之间进行通信呢？
从油猴脚本管理器的角度审视Chrome扩展 在之前一段时间，我需要借助Chrome扩展来完成一个需求，当时还在使用油猴脚本与浏览器扩展之间调研了一波，而此时恰好我又有一些做的还可以的油猴脚本 TKScript...通信方案 Chrome扩展在设计上有非常多的模块和能力，我们常见的模块有background/worker、popup、content、inject、devtools等，不同的模块对应着不同的作用，协作构成了插件的扩展功能...，并且成为开发者并上架Chrome应用商店需要支付5$的注册费，如果我们只是希望在Web页面中进行一些轻量级的脚本编写，使用浏览器扩展级别的能力会显得成本略高，所以在没有特殊需求的情况，在浏览器中实现级别的轻量级脚本是很不错的选择...xmlHttpRequest 接着我们来聊最后一个问题，脚本管理器是如何做到的可以跨域请求，实际上因为在前边我们明确了用户脚本是在浏览器当前的页面执行的，那么理所当然的就会存在同源策略的问题，然后在脚本管理器中只要声明了链接的域名...那么解决这个问题的方式也比较简单，很明显在这里发起的通信并不是直接从页面的window发起的，而是从浏览器扩展发出去的，所以在这里我们就需要讨论如何做到在用户页面与浏览器扩展之间进行通信的问题。
Evernote的代码注入链是从扩展的manifest (manifest.json)开始的，其中BrowserFrameLoader.js content脚本会被注入到所有页面和frame中。...由于注入到frame的敏感性，只有这一个脚本使用了all_frames来减少攻击面。内容脚本的主要的主要目的是作为扩展的C2服务器来加载其他必需的代码到页面中。...对通信信道来说，脚本使用通过postMessage API的Windows消息机制(Windows Messaging)。...最后，因为提供有效URL给扩展域名（chrome-extension://...）的_getBundleUrl函数中的逻辑检查和输入检查不当，研究人员发现URL的第一部分可以被handler的resourcePath...用户可以复制chrome://extensions/?id=pioclpoplcdbaefihamjohnefbikjilc到Chrome扩展页来检查是否是最新版本，并确保版本号大于7.1.1。
，而测血糖页面（单Activity+多Fragment）注册了对应的Handler，并在Handler.handleMessage回调函数中，处理各类页面跳转等页面切换操作 通过在采血页加入测试模拟代码拿到采血页注册的...那么现在又遇到新的问题，测试模拟代码在采血页内部执行，很容易拿到采血页注册的Handler对象，但是测试代码不在采血页内部，并且Activity的创建是由系统完成的，如何拿到测量页Activity实例内的...对于自动化脚本来说，它并不关心通信的细节，而且如果暴露了通信细节，反而会加大自动化脚本的开发难度，所以通过封装成SDK的形式来屏蔽通信细节，自动化脚本只需要关注业务即可 SDK设计 在sdk设计中，把一次通信流程抽象为的...，从而导致自动化脚本crash 糖大夫APP内测试接口设计 在糖大夫APP这一侧，结合已有工具并考虑到后续糖大夫项目会加入越来越多的自动化，通信的接口会越来越多，这一部分必须要易扩展，易维护 通过代码分层设计...接口的复合类型，考虑到序列化/反序列化操作难以程度，读取/解析效率，以及后续的可扩展性，选用了json这一常见数据交换方式作为通信协议载体（json和String可以很容易相互转换，json增加一个字段后
中的代码（包括直接写onclick和addEventListener2种方式都不行），但是，“在页面上添加一个按钮并调用插件的扩展API”是一个很常见的需求，那该怎么办呢？...": ["js/inject.js"], } 至于inject-script如何调用content-script中的代码，后面我会在专门的一个消息通信章节详细介绍。...URL，造成困扰； 下面的截图是默认的新标签页和被扩展替换掉的新标签页。...5种JS，那么它们之间如何互相通信呢？...; }); } }); 其它补充 动态注入或执行JS 虽然在background和popup中无法直接访问页面DOM，但是可以通过chrome.tabs.executeScript来执行脚本，从而实现访问
此时，插件可以在background脚本中监听chrome.runtime.onInstalled事件，执行初始化操作。...更多权限可以在 Chrome 扩展官方文档 中查询。...（'self'）和https://example.com加载脚本，只允许从扩展包自身加载插件。...插件中的消息传递 在插件中，我们通常需要在不同的脚本之间进行通信，例如在background脚本和content脚本之间，或者在popup脚本和background脚本之间。...以下是一个在content脚本中发送消息，并在background脚本中接收消息的示例： // content script chrome.runtime.sendMessage({greeting:
你将收获 如何快速上手浏览器插件开发 浏览器插件开发的核心概念 浏览器插件的通信机制 浏览器插件的数据存储 浏览器插件的应用场景 开发一款抓取网站图片资源的浏览器插件 正文 在开始正文之前,我们先来看看笔者总结的概览...中不能直接使用script脚本,需要用引入脚本文件的方式.如下: <!...3.1 popup和background相互通信 由官方文档可知popup可以直接访问background页的方法,所以popup可以直接与其通信: // background.js var getData...(); bgObj.getData(); // 访问bg的函数 复制代码 3.2 popup或者background页和content_script通信 这里我们使用chrome的tabs API,如下...这里我们主要关注popup.js和content_script.js, popup.js中主要用来获取从content_script页传过来的图片数据，并展示在popup.html中，另外又一个需要注意的是当页面没有注入生成按钮时
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
