WebHomeTV 扩展脚本快速上手：10 分钟给你的影视网站注入 App 原生播放能力-北京尧图网络

【免费下载链接】webhtv基于鱼佬的WebHomeTV二次开发调整了部分交互方式支持Python和JavaScript源的TMDB海报。项目地址https://gitcode.com/gh_mirrors/web/webhtv点击查看免费下载WebHomeTV 是基于鱼佬 WebHomeTV 二次开发的 Android 影音应用它保留了点播、直播、解析、投屏等完整能力并重点增强了WebHome 扩展脚本体系你只需在真实影视网站的页面上注入一段 JavaScript就能调用 App 内置的fmSDK把网盘、磁力、直链一键送入原生播放器无需重写整个网站。本文是一份面向新手的快速上手教程带你 10 分钟从零写出第一个可用的 WebHomeTV 扩展脚本。一、WebHome 扩展脚本是什么一句话概括WebHome 一个真实网页 App 注入的fmSDK 你写的扩展脚本。App 在 WebView 里加载你的影视网站时会自动注入window.fm命名空间你的脚本就可以拦截页面上的下载/播放按钮改走 App 原生播放链路把网盘分享夸克、阿里、百度等、磁力、电驴、迅雷链接推给 App 统一解析嗅探页面运行时动态出现的 m3u8/mp4 直链清理弹窗广告、给手机/电视两种形态重排版面用GM_addStyle注入样式、GM_getValue保存脚本配置。完整的扩展开发指南在 webhome-devkit/README.md本文只挑快速上手必需的部分讲。二、10 分钟跑通第一个扩展跟着下面 5 步走就能看到你网站页面上的第一个App 增强效果准备站点确保点播配置里有一个带homePage的 WebHome 站点api为csp_Builtin类型。打开扩展管理App 内进入设置 → 增强功能 → WebHome 扩展确认总开关已开启默认开启。新增代码源点新增 → 选择代码绑定你的站点粘贴这段最小脚本GM_log(hello, location.href); GM_addStyle(body{outline:4px solid #0f766e;}); window.addEventListener(fmsdk, function () { fm.ext.toast(扩展已生效); });保存即刷新保存后 App 会自动刷新 WebHome 页面扩展配置变更有 5 秒节流避免连续保存反复刷新。验证成功页面出现绿色描边和扩展已生效的 toast点Debug打开调试工作台Console 里能看到[fm-ext] id hello ...。✅ 看到绿色描边恭喜你的 WebHomeTV 扩展脚本已经跑起来了。三、三个最核心的 fm 接口脚本真正注入原生播放能力靠的是下面三个接口参数细节见 webhome-devkit/README.md 第 7 章接口用途典型场景fm.play(url, title, options)播放直链页面抓到 m3u8/mp4 地址后直接开播fm.pan.play({ type, url, title })统一推送播放入口网盘分享、magnet:、thunder:、电驴fm.vodInline(payload)多集播放按集解析剧集列表页点某一集时才回调解析真实地址最常用的是前两个。判断资源类型后分流即可function openResource(url) { var type classify(url); // 自己写正则magnet / quark / aliyun / media ... if (type media) { return fm.play(url, document.title, { headers: { Referer: location.href } }); } return fm.pan.play({ type: type, url: url, title: document.title }); } 注意fm.play/fm.pan.play都返回 Promise记得加catch并在失败时fm.ext.toast()给用户反馈不要静默失败。四、扩展脚本从哪里加载WebHomeTV 支持三层扩展来源优先级依次升高同id时后者覆盖前者调试改版时常用这个特性全局扩展点播配置根级webHomeExtensions必须用cspKeyRegex限定站点默认禁用站点扩展站点对象里的extensions字段天然绑定所属站点默认启用——推荐新手用这里用户扩展源App 内WebHome 扩展管理页新增支持文件、链接、代码、表单、文本 JSON 五种方式。站点内联写法非常简单甚至可以直接填一个远程 JS 地址{ key: mysite, name: 我的站, type: 3, api: csp_Builtin, homePage: https://example.com/, extensions: [{ id: mysite-native-router, runAt: document-end, js: [https://example.com/mysite.js] }] }远程脚本会网络优先下载并缓存到 App 缓存目录断网时自动回退缓存副本所以扩展离线也能用。五、双端适配一份脚本同时服务手机和电视WebHomeTV 同时跑在手机版和 TV 版上脚本要用window.fongmiClient.isLeanback判断当前形态而不是靠屏幕宽度猜手机端注入按钮热区不小于 44×44 px吸底元素避开手势条用max(var(--fm-safe-bottom, 0px), env(safe-area-inset-bottom, 0px))去重电视端卡片/按钮补tabindex0让遥控器可聚焦焦点样式用outline 背景提亮且必须写:focus而不是:focus-visible旧内核会丢弃整条规则通用布局尺寸读--fm-web-width/--fm-web-heightCSS 变量监听fmviewport事件响应窗口变化。六、别从零手写模板与实战示例清单仓库的 webhome-devkit/templates/extensions/ 目录提供了一整套可直接改CONFIG起飞的模板模板用途site-enhance-skeleton.js⭐ 推荐起点分页路由、SPA 重扫、双端自适应、资源点击路由的完整骨架inject-play-buttons.js给资源条目注入App 播放按钮不改原按钮行为pan-link-router.js网盘链接增强注入播放按钮有效性检测inline-episodes.js按集解析fm.vodInline resolver完整示范tv-focus-helper.jsTV 遥控焦点助手可作公共依赖site-cleanup.js弹窗/遮罩/广告清理webhome-devkit/examples/extensions/ 下还有 4 个真实站点的实战案例资源聚合面板、详情页重排、按集解析复用站点解密函数等照着改是最快的学习路径。七、调试与常见坑速查开发主力工具是扩展管理页的Debug 调试工作台ConsoleGM_log输出、NetworkNative 请求记录、ElementsDOM 候选选择器、代码编辑保存即预览。现象最可能的原因扩展完全没生效总开关未开cspKeyRegex匹配的是站点 key不是域名Console 里有SyntaxError时灵时不灵SPA 路由没监听fmurlchangeMutationObserver 没做 debounceGM_getValue拿到奇怪值它返回Promise必须await图片加载不出防盗链改用fm.res(url, { headers: { Referer: ... } })电视上无法操作元素缺tabindex焦点样式误用了:focus-visible⚠️ 最大的一个坑旧电视盒子的 WebView 可能还是 Chromium 50~70语法基线必须控制在 ES2017async/await及以下。可选链?.、空值合并??、逻辑赋值||、正则命名捕获等写法会导致整个扩展静默消失解析阶段就失败连报错事件都不触发。写完脚本全文搜索一遍这些字符再分发。八、发布前自检清单分发你的 WebHomeTV 扩展脚本前逐项确认id/version固定远程分发必须避免自动 id 导致用户开关状态丢失没有资源的页面不注入多余按钮搜索、翻页、登录等原站功能不受影响所有 Promise 都有catch失败有 toast 或GM_log无语法红线?.、??、||、replaceAll、structuredClone等一个都没有CSS 避开了:is()/:has()/:focus-visibleflexgap有 margin 兜底没有把账号、Cookie 等隐私数据输出到远程日志。完整清单和 16 章 AI 自动开发协议见 webhome-devkit/README.md 第 15、16 章fmSDK 全部方法、WebHome 首页开发和网盘检测细节见 webhome-devkit/docs/应用完整开发文档.md。写在最后WebHomeTV 扩展脚本的设计哲学是增强而不是替换——网站照常浏览资源点一下就走 App 原生播放。从最小脚本到远程分发托管整个链路都已经在 App 内闭环代码源调试、Debug 工作台预览、保存即刷新。现在打开你的影视网站10 分钟后让它拥有 App 原生播放能力吧。赞分享【免费下载链接】webhtv基于鱼佬的WebHomeTV二次开发调整了部分交互方式支持Python和JavaScript源的TMDB海报。项目地址https://gitcode.com/gh_mirrors/web/webhtv点击查看免费下载相关推荐如何实现跨网站视频悬浮播放3步快速上手Chrome扩展如何实现跨网站视频悬浮播放3步快速上手Chrome扩展想要在浏览网页的同时继续观看视频吗视频悬浮播放功能让你轻松实现多任务观看体验。通过这款免费的浏前端如何3分钟把Winamp播放器嵌入你的网站Webamp新手快速上手完整教程如何3分钟把Winamp播放器嵌入你的网站Webamp新手快速上手完整教程 Webamp 是一个开源的 Webamp 播放器用 HTML5 和 JavaSc前端音视频快速上手UE4SS10分钟学会虚幻引擎脚本注入配置快速上手UE4SS10分钟学会虚幻引擎脚本注入配置 UE4SS是一个功能强大的开源工具为虚幻引擎4/5游戏提供LUA脚本注入、SDK生成、实时属性编辑等核心游戏开发逆向工程开发工具上一篇直播输入可视化神器3分钟让观众看懂你的每一个操作下一篇Duix.Avatar本地AI数字人生成3分钟快速部署终极指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

WebHomeTV 扩展脚本快速上手：10 分钟给你的影视网站注入 App 原生播放能力

相关推荐

终极指南：如何为小爱音箱打造自定义固件——解锁开源智能家居新体验 [特殊字符]

Windows10双网卡链路聚合配置与性能优化指南

MagpieTTS Multilingual 357M批量推理教程：高效处理大规模语音合成任务

更多资讯

ITIL4运维管理变革：从流程到价值的数字化转型

HTML基础与进阶：从语义化标签到性能优化

2024年20款AI编程助手插件深度评测与选型指南

汽车底盘技术革新：电动化、智能化与轻量化的融合

解决VMware中Ubuntu虚拟机网络假连接问题

SLaK稀疏大卷积核在YOLO目标检测中的实践优化

今日更新

AI智能体开发实战：从技术原理到商业落地

OpenShell 完全定制指南：从安装到深度配置，打造高效 Windows 开始菜单

Superpowers技能体系全解析：从Skills引入到安装的完整指南

本周精选

防幻觉智能体架构：电源硬件设计中的大模型编排与工具化实践

OpenGL面试核心考点：渲染管线、矩阵变换与性能排查全解析

全国计算机二级C语言真题PDF高效刷题指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？