关于我为了写一个浏览器插件，最后开发了一个浏览器 APP 的故事

[maggch97]

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

先打个广告，可能是远程一起看视频最好的解决方法： 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 。心力憔悴。



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

[bs10081]

雖然還沒用，但是這個 UI ，好評

[des]

有没有试过这个？ https://github.com/m1k1o/neko

[lovestudykid]

挺好的，不过说到一起看视频，直接同时点开播放也是一样的，更关键的是要能同步交流

[0A0]

比起 github 的 n.keo ，这个是懒人一件套了，支持支持。不知道国内外同步效果怎么样。

[IssacTomatoTan]

你们不送老婆嘛

[orisine]

lz 能分享下是哪个开源浏览器吗

[maggch97]

@orisine https://github.com/codeninja02/Turbo-Browser

[maggch97]

@des 看了一下，这个还需要搭服务器推流呀。且不说安装复杂程度没得比，这个服务器成本也是很大的开销

[maggch97]

@lovestudykid 一起交流的话，所以带通话功能的 app 都能实现。

但是这个一起点实际使用的时候就会发现有很多的问题。即便两个人全程不离开，不需要暂停，不需要快进。每次换视频都需要一起数 123 ，还有一个人加载的慢，中途卡了，一些视频网站中途播广告导致进度不同步

[maggch97]

@0A0 中国美国同步没问题的

[greatbody]

直接开一个腾讯会议，然后两个人中的一个人播放就可以了。

[maggch97]

@greatbody 帧数和清晰度都比较差。只有各类有缓冲的直播平台比较清晰流畅。不过很多有版权视频看了一会可能直播间就封了。而且还需要单独搭一个推流服务。因为看的人和播的人延迟比较高

[andyskaura]

这个共享是通过打洞推流方式共享屏幕还是同时进入一个网址同步鼠标操作实现的？

[sjzjams]

不知道这个 SignalR 能不能行

[maggch97]

@andyskaura 类似你说的鼠标操作吧。不过是直接控制网页 video dom 的播放进度，不是模拟鼠标。

[alexsunxl]

有点意思的

[xuxinglin8888]

你最后提的 kiwi 浏览器是啥意思什么原因？我有这个 app

[lovestudykid]

@maggch97 边看一起通话没那么简单，两边都在播放，需要消除回音，但这个又不是回音，你可以边放边开微信通话试试

[0A0]

今天试了一下，好像在 mac chorme 上创建后，加入会提示同步失败。是只有在 edge 才可以？

[larendorrx]

想问下 OP 是如何劫持 React Native Webview 中的请求的呢，是重写页面的 XHR 还是写原生代码拓展 webview 组件的能力呢？