写一个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

相关推荐
理想不理想v5 分钟前
vue经典前端面试题
前端·javascript·vue.js
不收藏找不到我6 分钟前
浏览器交互事件汇总
前端·交互
YBN娜20 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=20 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
minDuck25 分钟前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
小政爱学习!1 小时前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。1 小时前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼1 小时前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k09331 小时前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang13581 小时前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端