LetsStudy的博客

注：为什么第一个示例中没有用runtime.connect，因为runtime.connect是与后台脚本交互的，但是如果popup.js中使用tabs.connect的话，那么background.js和content_scripts都可以接收到消。配置的JS会被注入到浏览器中，它可以获取到整个页面DOM，可以发起HTTP请求，可以控制页面路由，使用浏览器api。，清单文件可以理解为一个拓展程序的配置文件，它可以配置你的拓展程序的权限，ICON路径、JS导入路径等。注：和长连接不同，如果使用tabs。

一、完整代码manifest.json{ "manifest_version": 2, "name": "NoAd", "version": "1.0.0", "description": "", "icons": { "16": "icon/icon.png", "48": "icon/icon.png", "128": "icon/icon.png" }, "options_ui": { "page": "options.html", "chrome_st

一、测试网址https://www.yy6080.info/manifest.json{ "manifest_version": 2, "name": "NoAd", "version": "1.0.0", "description": "", "icons": { "16": "icon/icon.png", "48": "icon/icon.png", "128": "icon/icon.png" }, "content_scripts": [ { .

转载：https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html转载：https://blog.csdn.net/zengraoli/article/details/104085859开发文档：https://open.chrome.360.cn/extension_dev/content_scripts.htmlhttp://www.kkh86.com/it/chrome-extension-doc/extensions/api

一、界面：recording network log，红色表示开启，灰色表示关闭，开启后，会捕获页面资源，关闭后则不会捕获：clear，清除捕获的network log：filter，过滤资源，可以手工输入条件对资源名称进行过滤，也可以根据给定的类型进行过滤，如下图除此之外还有给定的过滤方式，多属性间通过空格实现 AND 操作。如下图domain:仅显示来自指定域的资源。您可以使用通配符字符（*）纳入多个域 has-response-header：显示包含指定HTT...

一、界面二、火焰图解释a.传统火焰图y 轴表示调用栈，每一层都是一个函数。调用栈越深，火焰就越高，顶部就是正在执行的函数，下方都是它的父函数。x 轴表示抽样数，如果一个函数在 x 轴占据的宽度越宽，就表示它被抽到的次数多，即执行的时间长。注意，x 轴不代表时间，而是所有的调用栈合并后，按字母顺序排列的。b.performance的火焰图performance的火焰图是倒置的，且X轴表示的是时间三、识图A区域：1、Record：记录按钮，点击后变为红色，可以在页面上进.

一、界面1、Pagea.展示上下文环境中的所有资源2、Filesystema.可以导入本地源码，在soure面板下对源码进行编辑，ctrl + s保存会将修改的代码保存到本地，相当于编辑器。b.local Modifications:右键点击，会展示修改过后的代码，c.ctrl + s ：会将代码保存到本地，我们也可以在开发工具中开到修改过后的代码3、Overridesa.可以重新一个脚本，并且刷新不会被清除b.操作步骤①切换到Overrides页签②

a、RAIL 模型​RAIL​ 是一种以用户为中心的性能模型。每个网络应用均具有与其生命周期有关的四个不同方面，且这些方面以不同的方式影响着性能。1.响应：输入延迟时间（从点按到绘制）小于 100 毫秒。一般指的是用户输入网页快速给出结果的过程，比如点击按钮，切换表单，启动动画之类的。2.动画：每个帧的工作（从 JS 到绘制）完成时间小于 16 毫秒。指的是涉及style，layout，paint，composite过程的行为。比如：用户滚动页面，拖动刷新，页面动画等3.空.

Console说明：记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell。a.面板功能说明1、Hide console sidebar:隐藏侧边栏2、Clear console:清空控制台3、Context：展示网页上下文环境，如果该页面有多个内联iframe，则也会在这里展示，可以选择切换，如下图4、Create live expression：创建监控表达式，可以实时监控某个表达式的执行。5、Filter:过滤。6、Default..

一、Elements：查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。Elements右侧面板功能说明如图Reveal in Sources panel:在Sources面板中展示，当在html中的js、超链接上右键时，才会有此选项Open in new tab:在新页签中打开，当在html中的js、超链接上右键时，才会有此选项Add attribute:添加属性Edit attribute:编辑属性Edit as HTML:编辑