分类： 代码

最近为了提高工作效率，给Firefox开发了一个切换whistle代理的插件(Addon)，但是Firefox在manifestV3上有很多规范都与Chrome不相同，且中文互联网关于这方面的知识很少，所以在此总结了一些我遇到的坑点，希望可以帮助大家。

开发模板

Firefox虽然没有太多关于V3的教程，但是插件开发还不至于从0开始搭建框架，此处推荐一个React+TS的开发模板，通过这个开发模板，可以“快速”打包出Chrome和Firefox平台的插件。

https://github.com/aeksco/react-typescript-web-extension-starter

该附加组件无法安装,因为它有可能已损坏

Firefox官方虽然说可以Self-distribute，但是文档的描述有问题，没有给出正确打包XPI的方式。直接将产物压缩成zip后，将拓展名改成xpi，Firefox依旧是不能正确识别的。

正确的方法应该是，将产物压缩成zip后，提交到AMO签名，签名后Firefox浏览器就能安装了。

操作流程：

1.提交本地产物到AMO上，选择自托管（https://addons.mozilla.org/zh-CN/developers/addon/submit/distribution）

2.审核签名完成后将XPI下载至本地即可

background.service_worker is currently disabled

这是因为在manifestV3中，Firefox与Chrome针对后台程序的处理有差异导致的。其实Firefox也是能使用后台程序的，但是不能直接写成service_worker。直接用service_worker，Firefox将会报错。

正确的写法应该是使用”scripts”代替”service_worker”，Firefox的后台程序变成了background_script。

The extension ID is required in Manifest Version 3 and above

上传产物压缩包到AMO的时候，可能会遇到这个问题，这个是因为Firefox在mainfestV3及以上版本中要求增加一个插件ID号和最低版本限制导致的，需要在manifest.json中增加该字段才可以。

最低版本号可以参考你所用的浏览器API限制来决定，id一般使用<插件名>+@+<个人域名>就可以了（只要保证ID唯一即可）。

参考插件

之前在Blog中分享过一次这个调试插件，可以以这个插件为基准来检查自己的插件是否符合上架要求。

什么是 Whistle

whistle(读音[ˈwɪsəl]，拼音[wēisǒu])基于 Node 实现的跨平台 web 调试代理工具，类似的工具有 Windows 平台上的Fiddler，主要用于查看、修改 HTTP 、HTTPS 、Websocket 的请求、响应。

面向人群

1. 终端开发
2. 软件测试

背景

之前了解到 Chrome 下原来有一个 whistle 的快速切换插件可以用，但是搜了一下发现 Firefox 还没有，因此想要自己动手改造一个可以给 Firefox 使用的快速切换插件，提高工作效率。

功能

1. 快捷切换浏览器代理
2. 规则管理
   • 单一规则开关
   • 规则分组展示
3. 黑名单设置
4. 状态设置
   • 多规则开关
   • 切换规则后自动刷新
   • 展示代理地址和代理端口
   • 快捷跳转 whistle 管理页面
5. 状态展示
   • 是否启用代理
   • 启用代理规则数量

截图

规则管理	黑名单设置	状态设置

下载地址

为了安全考量，直接使用 Firefox 的拓展商店安装即可。

Github仓库

https://github.com/7gugu/whistle-firefox

联系方式

如果有使用问题，可以优先通过邮箱和 Firefox 评论区提交问题，正常情况下在一个工作日内就会回复。（公共假期不定期回复）

• Email：gz7gugu@qq.com

A Raycast script which help front-end devloper to convert *.protobuf file into *.d.ts file.

Installtion Link

Screenshots

Example

Convert this:

message Person {
  string name = 1;
  int32 id = 2;
  bool isFriend = 3;
  repeated PhoneNumber phones = 4;
}

message PhoneNumber {
  string number = 1;
  PhoneType type = 2;
}

message AddressBook {
  repeated Person people = 1;
}

into this:

interface Person {
  name: string;
  id: number;
  isFriend: boolean;
  phones: PhoneNumber[];
}

interface PhoneNumber {
  number: string;
  type: PhoneType;
}

interface AddressBook {
  people: Person[];
}

Idea From

• protobuf-to-typescript

背景

最近在工作中遇到了需要对Module中导出的方法统一做预处理，在特殊场景下需要增加阻断执行并提示开发者不应该在该场景中使用该方法的提示。

思考

这里一开始的想法其实是在每个方法的入口分别增加一个阻断的判断逻辑：

如果只有一两个方法其实这么做倒还好，但现在的问题是，我手上有30多个方法都要加这个阻断逻辑，手搓阻断逻辑实在是太傻逼了，这么加不知道得加到猴年马月去。

后面我又看到Module的export default，想着能不能在这里做一下文章。

研究了一下之后，其实还是可以搞的，大致思路如下：

在ES6中，javascript引入了代理函数，从而实现对象基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）[1]。通过利用其拦截的特性，我们可以借此在module上实现代理模式。在外部函数获取method的时候做一些特殊逻辑。

实现

通过该方法，我们可以优雅的在module层面对method进行统一的前置操作（比如数据上报、逻辑阻断等操作），提升开发效率的同时还能使得代码更加简洁易维护。

兼容性

通过查阅caniuse，可以说这个接口已经100%兼容可用了。另外由于ES5的特殊性，Proxy是没有完整支持的polyfill的，因此如果碰到实在不兼容的用户，就积极引导用户去升级机器吧，没必要去钻这个牛角尖。

Android外网基本上只有电视盒子还是在4.4.4，手机几乎找不到4.0的机器，就算有看着0.08%的用户占比感觉可以直接忽略了。

背景

最近在负责游戏项目的开发，不免需要接触到音频相关能力的开发。在移动端实践后才了解到，iOS下的AudioDOM并没有被完全实现，比如iOS下就无法直接通过JS控制AudioDOM的音量大小，只能控制其是否被静音，另外静音拨杆的优先级比音量键的优先级要高。如果用户通过拨杆打开了静音模式，AudioDOM默认是没办法控制音量的。

尝试解决问题

由于需要实现通用能力中规划的音频的响度控制，搜索一圈后发现可以引入WebAudio来解决问题。（https://stackoverflow.com/questions/27296391/is-there-any-possibility-to-control-html5-audio-volume-on-ios）

改造前音频架构

初始化阶段的时候，通用组件会检查DOM树是否存在AudioDOM，如果不存在就会尝试创建一个新的AudioDOM并挂载到DOM树上。状态操作也是直接对DOM树上的AudioDOM操作。

改造后音频架构

WebAudio支持多种方式创建音频输入，即可以直接通过AudioBuffer获得音频输入，也可以通过createMediaElementSource从已有的AudioDOM上创建音频输入。此处我使用的是后者，通过在AudioDOM与扬声器之间创建了一个“代理层”，将音频输出通过GainNode(增益器节点)处理了一下。通过GainNode我们可以设置音频的响度，间接的实现了iOS的音量控制。

错误上报

不幸的是，测试的Testcase还不够完善，业务被发布后，错误量激增，告警拉满😂。

经过梳理后主要是以下三种问题：

1. Failed to construct ‘AudioContext’: The number of hardware contexts provided (6) is greater than or equal to the maximum bound (6).
2. The provided value is non-finite
3. undefined is not a constructor (evaluating ‘new(window.AudioContext||window.webkitAudioContext)’)

1.AudioContext只能创建6个实例

Webview版本小于66中只能创建小于等于6个的AudioContext，会导致页面无法继续播放音频。（https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API）

解决办法：

1. 增加全局AudioContext池，通过一个实例来管理最大音频对象数量。

2. 不使用的AudioContext需要被及时释放，避免占用音频对象资源。

2.音频节点提供的不是有限值

在某些环境中，JS的除运算计算出来的值不是一个有限值，直接赋值给WebAudio的节点会报该错误。

解决办法：

赋值前通过isFinite函数检查是否是有限值，如果不是则使用一个固定的值作为兜底即可。

3.window.AudioContext不存在

按道理来说AudioContext在执行JS代码之前就应该被挂载到window上了。但遗憾的是，iOS15之后的WKWebview会经常出现，执行JS代码的时候AudioContext仍然未被挂载到window上，导致执行构造函数的时候报错。

解决办法：

捕获错误并且定时重试，一般第一次失败的2-3秒后就能创建成功了。