JSBox的网页改造计划

前情提要

由于Apple的限制，JSBox不得不把内置的拓展中心从APP去掉了，所以开发者@cyanogen提供了一个网页版的脚本Gallery，这个Gallery是由开发者审核编辑的，并且接受所有脚本的投稿。

改造什么

将一个网页改造成JSBox脚本其实非常简单，只需在脚本里渲染一个web组件，并且提供对应网页的链接即可。

但是在使用过程还是发现一些问题：

网页加载的空白等待
某些脚本的简介较长，网页无法完全显示
点击“获取”时不应该再跳转，因为当前已经是JSBox环境
不在浏览器中，无法分享，除非调出操作栏
分类的按钮在布局上有些诡异

改造的目标

为了解决上面的几个问题，并且将这个网页伪装成一个Native的脚本，制定的解决方案如下：

增加启动页面，在网页完成加载后消失
使用JS注入的方式控制脚本简介和获取按钮的点击行为
增加一个分享界面
增加一个分类栏用于快速切换

点击下载脚本

部分实现细节

修改异步内容

由于Gallery的网页采用异步加载来提高响应速度，所以在注入点击代码时不能简单的添加，因为在网页加载完成后，界面实际上还是空白的，我们直接添加点击事件的监听是没有效果的。

所以这里对异步加载数据的代码进行覆盖，保留原来逻辑的前提下，增加注入代码：

window.onload = function () { 
    fetch("https://xteko.com/store/meta?lang=" + $0).then(function (n) { 
        return n.json() 
     }).then(function (n) { 
        $3 = n.result;
        $5();
     }).then(_ => { 
        addOnClickHandler(); // 点击逻辑注入
     })
};

伪造UA

iOS的特性限制，使得JSBox脚本安装页面只有在Safari中打开才能通过URL Scheme对脚本进行安装，实际上在JSBox应用里是可以直接安装的，而在JSBox的web组件中对应的User-Agent并非Safari的而是JSBox的，所以在获取直接安装的URL Scheme时，会提示在Safari中打开网页。

这个时候，就需要对请求进行伪装：

let resp = await $http.get({
    url: href, 
    header: { 
        "USER-AGENT": "Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1" 
    } 
}); 
let urlMatcher = resp.data.match(/(jsbox:\/\/install.*?)'/); 
if (urlMatcher && urlMatcher[1]) { 
    $app.openURL(urlMatcher[1]); 
}

最终效果

最后

JSBox提供了大量的API，在iOS严格的限制下依然可以做出很多能大大提升效率的脚本，更甚至做出一个完整的基于JSBox的APP。

如果对我的脚本感兴趣，可以关注我的Github或者Telegram频道，感谢！