写一个Chrome Network资源收集插件

XDM,最近市场的寒气传递到你们那了吗?一直想这个独立产品出来,思来想去,chrome extension 是成本比较低并且能落地的小产品了,所以就开发了一款network 资源管理插件,希望可以给大家做自己的产品带来一些小小的灵感. 插件地址

需求分析

有需求才有市场,为什么需要做个插件,主要有以下需求,

  • 有些用户不懂得怎么到network面板去下载图片,如ui设计师,某些产品
  • 我有时候需要下载网站上的3D资源,如果是glb还好,但是如果是gltf的话,那依赖文件一大堆
  • devtool如果不打开就打开网页的话,看不到网站上的资源地址

应该还可以其他的,只是我还没想到,先围绕以上3需求,所以我希望这个插件有以下功能

  • 可以对网站上的资源根据目录进行分类,
  • 可以对指定资源进行下载,也可以按目录进行下载
  • 对资源提供预览功能,如果是3D模型,我还希望可以能对模型进行调试.如果是图片资源,可能可以允许对图片进行其他操作

技术分析

chrome extension 的相关技术我就不详细介绍了,简单说下就是extension主要分4个模块,

  • background后台模块,主要常驻在浏览器后台运行,不会随着浏览器刷新而刷新
  • content前台模块,可以注入到当前打开的网站,会跟着页面一起刷新
  • popup模块,点击右上角插件图标的弹窗,不会随着浏览器刷新而刷新
  • devtool模块,开发者工具那边的tab项

对于我们插件的功能,需要用到backgroud模块,在这个环境下,对浏览器左右请求到的资源进行收集分类,然后发送到前台页面. 然后我们需要用到popup模块对收集资源进行展示和其他操作.考虑到popup 弹出来如果失焦就会缩回去,所以我们createWindow,然后在这个弹出的独立tab页上注入popup.html

对于图片资源,先只要简单预览和提供下载就行了, 如果是3D模型资源,可以使用Babylonjs对模型进行查看,另外这个库也提供的现成的模型调试库@babylonjs/inspector,可以直接使用,当然如果模型加密了,就解析不了

实现要点

这里就挑重点说下实现的一些细节.

  1. 怎么创建一个独立的tab用于渲染 popup 页面
javascript 复制代码
chrome.windows.create(
			{
				url: chrome.runtime.getURL(`index.html?contentId=${tabs[0]?.id}`),
				type: "popup",
				width: 1024,
				height: 860,
				// left: (tab.width - 800) * 0.5,
				// top: (tab.height - 800) * 0.5,
			},
			(win) => {
				console.log("ok");
			},
		);
  1. babylonjs 无法在chrome extension中加载draco压缩模型失败
ini 复制代码
// chrome extension V3之后,无法加载外部的js脚本了,可能需要在哪里配置,目前还不知道.所以需要把相关的脚本都下载到本地,另外解压时worker也无法使用,需要关闭

DracoCompression.DefaultNumWorkers = 0;

DracoCompression.Configuration = {
  decoder: {
    wasmUrl: "/libs/draco_wasm_wrapper_gltf.js",
    wasmBinaryUrl: "/libs/draco_decoder_gltf.wasm",
    fallbackUrl: "/libs/draco_decoder_gltf.js",
  },
};

总结

以上是我对我做的插件的一些总结,希望可以帮助到大家.如果对插件感兴趣,可以在chrome store搜索 Network Download Helper,不好用也不要给我差评哈. 扩展的仓库地址Github

相关推荐
10年前端老司机5 分钟前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
夏晚星5 分钟前
vue实现微信聊天emoji表情
前端·javascript
停止重构7 分钟前
【方案】前端UI布局的绝技,响应式布局,多端适配
前端·网页布局·响应式布局·grid布局·网页适配多端
極光未晚8 分钟前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript
ze_juejin9 分钟前
Vue3 + Vite + Ant Design Vue + Axios + Pinia 脚手架搭建
前端·vue.js
lichenyang45310 分钟前
React项目(移动app)
前端
用户618482402195112 分钟前
Vue-library-start,一个基于Vite的vue组件库开发模板
前端
美团技术团队23 分钟前
报名 | 美团技术沙龙第86期:多业务场景下,美团如何做性能优化
前端
Rrvive1 小时前
localhost 和 127.0.0.1 的核心区别
前端
蓝倾1 小时前
如何使用Python通过API接口批量抓取小红书笔记评论?
前端·后端·api