浏览器扩展程序是可以修改和增强 Web 浏览器功能的小程序。它们可用于各种任务，例如阻止广告，管理密码，组织标签，改变网页的外观和行为等等。 好消息是浏览器扩展并不难写。可以用你已经熟悉的 Web 技术（HTML、CSS 和 JavaScript）创建 —— 就像普通网页一样。…

浏览器使用流式布局模型 (Flow Based Layout)。 浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了Render Tree。 有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点…

见解有限，如有描述不当之处，请帮忙及时指出，如有错误，会及时修正。 ----------超长文+多图预警，需要花费不少时间。---------- 如果看完本文后，还对进程线程傻傻分不清，不清楚浏览器多进程、浏览器内核多线程、JS单线程、JS运行机制的区别。那么请回复我，一定是我…

最近更新比较佛系，一方面，工作确实有点忙，但是做的都特么旧项目。09 年的代码都出来了，贼特么恶心。感觉待不久了。另一方面，没想好最近有啥要跟大家分享。刚好今天打开 Chrome ，发现自己一直在用的几个很不错的 Chrome 插件，顺手推荐给你们了。 不知道大家注意到没有，有…

前面两节简单的总结了一些关于什么是浏览器插件，以及浏览得的manifest.json文件配置。同时在后续也给插件增加了页面和逻辑，说明了background、popup、content三个字段的具体使用。 不同字段对应着不同的作用，协作构成了插件的强大功能。合作就得沟通，就像E…

it can contain links to stylesheets and script tags, but does not allow inline JavaScript. matches：必填 数组，用来匹配注入Content Script的页面地址。可以使用通配符来…

我花了将近一个多月的时间断断续续写下这篇博文，并精心写下完整demo，所以转载务必保留出处。本文所有涉及到的大部分代码均在这个demo里面：https://github.com/sxei/chrome-plugin-demo ，大家可以直接下载下来运行。 另外，本文图片较多，请…

通过一个 Chrome 插件的开发，来领略下 vue.js 的魅力。顺便也来了解下 Chrome 插件开发的一些基本知识。在日常工作中，开发一些小工具可以大大的提高我们的工作效率。

作为开发人员，平时用的最多的就是Chrome devtools了，但是可能很多同学都像我一样平时用的最多也就只是Console和Elements面板了。 按Cmd + Shift + P（如果使用Windows，则按Ctrl + Shift + P）打开“命令”菜单。 当你只想…