1 前言

大家好，我是心锁，一枚 23 届准毕业生。

近期在做一个 Chrome 浏览器截图插件，功能是从浏览器截图并发送图片到企微，便于在远程办公环境下快速从浏览器发送图片进行 showCase（目前未真正使用上，原因是截图时 html2canvas 有错位）

在开发浏览器插件时，有时候会遇到并不需要全屏截图的情况。比如，截图的时候忽略侧边栏只截图右侧的内容区。

所以在这个简单的需求下，我尝试通过允许用户自定义 hook 来实现

2 解决方案

我们要完成 hook，本质上就是两种方法。

一种是动态代码注入（文件注入），一种是 eval 执行字符串

2.1 已知限制

开始之前，我们首先先获取一些（踩坑后明白的）已知限制：

• Chrome v3 版本全面禁止 eval, new Function，不管在background,inject还是popup中都无法通过任何手段开启
• Chrome v3 版本全面禁止通过script标签加载外部源文件
• Chrome 目前上的的插件仅支持 v3，v2 已经禁上架

那么在此基础上，我们能评估出哪些方案呢？

2.2 方案评估

2.3.1 unsafe-wasm-eval【❌】

经过 chrome 文档的查阅，发现在 v3 版本中允许对 wasm 文件做动态导入的操作

…

但是，WebAssembly 的难度一下子击中我的心巴