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,可以直接使用,当然如果模型加密了,就解析不了

实现要点

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

怎么创建一个独立的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");
			},
		);

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

写一个Chrome Network资源收集插件

需求分析

技术分析

实现要点

总结