[程序员] 关于我为了写一个浏览器插件,最后开发了一个浏览器 APP 的故事

前些天发了帖子,关于我开发的和老婆远程一起看视频的插件,收获了不少用户。

先打个广告,可能是远程一起看视频最好的解决方法: https://videotogether.github.io

最近经常有用户反馈,插件在一些盗版视频网站上似乎没有办法同步视频。调试了一下发现,这些盗版视频网站很多都会用嵌套 iframe (给不懂浏览器的朋友科普一下,就是网页里面嵌了子网页)的方式播放视频。嵌套的 iframe 和页面都不在同一个域下面,由于浏览器的安全限制,js 是没法读取跨域 iframe 中的内容。子页面还会校验请求的 Referrer ,对于不在白名单的页面直接返回 error 。所以也无法通过在新窗口打开子页面的方式绕过这个 iframe 的限制。

调研了一番以后,发现如果 js 插件可以注入到这些子页面中,通过不同页面 PostMessage 也是可以实现跨页面操作的。无非是原来一个函数调用解决的问题,变成了多个插件实例异步通讯完成。虽然麻烦了一点,至少还能解决。

电脑上的 tampermonkey 插件是支持注入 js 到 iframe 的。但是在安卓上,我几乎把酷安能够下载到的支持插件的浏览器用了一个遍,没有一个能够注入 js 到 iframe 。

最后在 StackOverFlow 上找到了答案,安卓系统的 webview 是没有提供 API 注入 iframe 的。唯一能实现这个功能的方式是劫持 webview 的 request ,手动请求到 html response 后添加脚本代码到末尾。这么 hack 的方式肯定是不能指望有浏览器能支持了。最终我在 Github 找了一个开源的 react native 浏览器,加了了劫持 request 的代码,集成了一起看视频插件后打包了一个 APP 。心力憔悴。

[程序员] 关于我为了写一个浏览器插件,最后开发了一个浏览器 APP 的故事插图

顺带一说,我知道安卓上有 kiwi 浏览器,不过 chrome 商店国内访问不了