# JSKit Hybrid

从 JSKit 1.5.0-b 开始我们提供了 JSKit Hybrid 项目类型支持。JSKit Hybrid 项目是一种网页扩展,除了可以使用 Web 浏览器的所有能力外,还可以在 H5 网页中调用 JSKit 提供的 jskh5 API,使用 JSKit 提供的原生能力。

# 项目结构

jskh5-project
  +
  |
  +-+ README.md
  |
  +-+ main.js
  |
  +-+ jskweb
      +
      +-+ index.html
      |
      +-+ userscript.js
      |
      +-+ gm-api.js
  • README.md 项目说明文件
  • main.js 项目主文件,运行在 JSKit 引擎中。
  • jskweb Web 文件夹,此文件夹下的文件都可在 JSKit Web 浏览器中通过 /jskweb/ + 文件名的方式使用。
  • index.html 模版中的 H5 首页,通过 hybrid 模块提供的 loadUrl('http://localhost/jskweb/index.html') 的方法加载。
  • userscript.jsgm-api.js 等 JS 文件,既可以正常的通过 Web 规范在 index.html 中加载,也可通过 hybrid 模块提供 injectScript 方法注入到 当前的 网页中。

除了 loadUrl 方法传参外,其他放置于 jskweb 文件夹或其子文件夹中的脚本文件都建议使用相对路径的方式加载,如 injectScript('/jskweb/userscript.js'),JSKit 将自动选择合适的源地址注入脚本。

通过上面的项目结构也可以看出 JSKit Hybrid 项目的文件会运行在两个引擎中,一个是 JSKit JS 引擎,支持 ES2020 标准;一个是 Web 浏览器引擎,提供了完整的 Web 环境。

对应的,JSKit 也提供了两套 API 来将 JSKit JS 引擎和 Web 浏览器环境互联互通:hybridjskh5

# JSKit Hybrid 可以用来干什么?

学习 JS 和 Web 技术,在手机端随时随地验证自己的想法。JSKit Hybrid 提供了 开发者工具,方便查看控制台日志,Web Elements ,Dom 等信息。

基于 JSKit Hybrid 提供的 API 编写好玩有趣的小程序。

# 对油猴脚本的支持

JSKit 创建 JSKit Hybrid 项目时会默认提供了一个 /jskweb/gm-api.js 脚本,包含基于 jskh5 API 实现的部分 GM* 油猴脚本接口。

声明

JSKit 提供的油猴脚本 API 仅供学习交流使用。 油猴脚本 API 默认不会注入到访问的网页中。 请勿利用 JSKit 提供的 API 损害其他任何个人或组织的合法权益,由此产生的一切后果与 JSKit 无关。 JSKit 对相关接口不做任何担保,也不承担任何连带责任!

JSKit 对油猴脚本的支持有以下几点说明:

  • 只提供了部分的油猴脚本接口,详细情况请阅读 gm-api.js 的源码查看。
  • 未对油猴脚本的 meta 信息进行解析,需用户手动处理。比如 @require 信息,需要先于脚本文件使用 injectScript 注入到网页中。

# 自动无缝翻页脚本示例

自动无缝翻页 (opens new window)X.I.U 编写的一个油猴脚本,非常好用!

当浏览网页向下滚动时,脚本会自动将下一页内容无缝衔接到底部(类似瀑布流,翻吖翻吖一直翻不到头~),纵享丝滑的网页浏览体验~

由于开源协议原因未能添加到 JSKit Hybrid 项目的默认模版中,这里简要说明如何在 JSKit 上导入并使用此脚本。

  1. 在脚本的代码页 https://greasyfork.org/zh-CN/scripts/419215-自动无缝翻页/code 通过安装此脚本按钮得到脚本源码 https://greasyfork.org/scripts/419215-自动无缝翻页/code/自动无缝翻页.user.js 保存下载到手机上。

  2. JSKit 新建 JSKit Hybrid 项目,打开文件项目文件视图,单击 jskweb 文件夹,此文件夹下打开右上角菜单,选择导入文件

  3. 找到第 1 步下载的脚本文件确认即可导入到 JSKit Hybrid 项目中。

  4. 修改 main.js 文件注入此脚本即可体验。

// 这部分代码运行在 JSKit 的引擎中,是一个 ES2020 标准引擎。
import * as jskh5 from 'hybrid';

function injectScriptIndex(list, index, cbfn) {
    if (index < list.length) {
        let url = list[index];
        jskh5.injectScript(url, loaded => {
            console.log(`js: ${url} loaded? ${loaded}`);
            //待前一个脚本注入完成后递归注入。
            injectScriptIndex(list, index + 1, cbfn);
        });
    } else {
        cbfn();
    }
}

function injectScriptList(list, cbfn) {
    injectScriptIndex(list, 0, cbfn);
}

jskh5.setWebCallback({
    onWebMessage: function (name, data, cbfn) {
        console.log('onWebMessage:', name, data);
        if (name === 'open-in-tab') {
            jskh5.loadUrl(data);
        }
    },
    onPageStarted: function (url) {
        console.log('onPageStarted:', url);
    },
    onPageFinished: function (url) {
        console.log('onPageFinished:', url);
        //注入的 userscript.js 将会运行在 WebView 中,是一个标准的 Web 浏览器
        injectScriptList([
//            '/jskweb/userscript.js',
            '/jskweb/gm-api.js',
            '/jskweb/自动无缝翻页.user.js'
        ], () => {
            console.log('脚本列表已加载完成!');
        });
    }
});

jskh5.loadUrl('https://greasyfork.org/zh-CN/scripts');

如遇问题可通过 JSKit App 设置 -> 关于 -> 问题反馈,或通过其他渠道联系我们。