# 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.js
、gm-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 浏览器环境互联互通:hybrid
和 jskh5
。
# 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 上导入并使用此脚本。
在脚本的代码页
https://greasyfork.org/zh-CN/scripts/419215-自动无缝翻页/code
通过安装此脚本按钮得到脚本源码https://greasyfork.org/scripts/419215-自动无缝翻页/code/自动无缝翻页.user.js
保存下载到手机上。JSKit 新建 JSKit Hybrid 项目,打开文件项目文件视图,单击
jskweb
文件夹,此文件夹下打开右上角菜单,选择导入文件
。找到第 1 步下载的脚本文件确认即可导入到 JSKit Hybrid 项目中。
修改
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 设置 -> 关于 -> 问题反馈,或通过其他渠道联系我们。
← 常见问题