概要

俗话说水生金，摸鱼 = 水，得出定式摸鱼 ≈ 生金。

下面提到的项目我已经开源，发布在 gitee，检索 fish-ads-app 可以查看。

正文

前段时间刷小红薯看到一些将桌面背景改为客厅的效果图，然后将视频的小窗口模式放在效果图的电视上的达人。

我心想这小窗口模式太危险了吧，而且谁上班一直待在桌面不动的呀，直到后来刷到了下面这个视频。

看来大家都有在努力上班啊！

她把小窗口视频叠加到了 360 弹层之上，同事愣是没发现（当然也有摆拍可能）。

但是仔细看的话视频窗口的大小和弹层的大小是不匹配的，最右边超出了一小部分，而且这样做虽然比桌面效果图的方法更安全些，但是弹层被关闭后视频窗口不会一起关闭。

不过想法是很不错，如果视频能嵌入到弹层里（大小统一，弹层关闭时一起消失）变成一个真的假弹层，不就更完美了。那这个时候我就想到了 Electron，一款使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。那我本人前端会一些，Election 之前也跟着官网起步文档运行过，既然理论成立直接开搞。

一开始我的想法是这样的，输入视频地址然后直接进入到弹层模式显示。但是后来我觉得既然 Chromium 已经嵌入到 Electron 框架中了，要不直接跳出一个搜索引擎的界面让使用者自己搜索到想看的视频地址页面，然后再变成弹层不是更加舒服。

那第一个窗口我是这样做的：

  // Create the browser window.

  const win = new BrowserWindow({

    width: 800,

    height: 600

  })

  await win.loadURL("https://cn.bing.com/")

  // 拦截打开新窗口

  win.webContents.setWindowOpenHandler(details => {

    win.loadURL(details.url)

    return { action: 'deny' }

  })

创建一个默认窗口 使用 loadURL 加载一个搜索引擎的地址（以必应为例），然后我只想在一个窗口中跳转链接，于是当该窗口点击了跳转链接时阻止跳转且让当前窗口重新加载跳转地址。

那么除了自己搜索外，大多数时候我们是在B站、腾讯视频、爱奇艺等主流的视频网站上刷剧看视频的。那么我们需要自定义一个Menu，加入一些主流视频网站的地址作为快捷跳转。最后把选定的视频地址传入到弹层窗口显示，那么Menu的配置大致如下：

const template = [

    {

        label: '视频',

        submenu: [

            {

                label: '哔哩哔哩',

                click: () => {

                    var focusedWin = BrowserWindow.getFocusedWindow()

                    focusedWin.loadURL('https://www.bilibili.com/').catch(error => console.error(error))

                }

            },

            {

                label: '腾讯视频',

                click: () => {

                    var focusedWin = BrowserWindow.getFocusedWindow()

                    focusedWin.loadURL('https://v.qq.com/').catch(error => console.error(error))

                }

            },

            // ......

        ],

    },

    {

        label: '弹窗',

        click: async () => {

            var focusedWin = BrowserWindow.getFocusedWindow()

            // 这里的地址是为了重新选择视频地址是记录上一个播放地址

            lastUrl = focusedWin.webContents.getURL()

            focusedWin.hide()

            createPopupWindow()

        }

    }

]

const createPopupWindow = async () => {

    const primaryDisplay = screen.getPrimaryDisplay()

    const { width, height } = primaryDisplay.workAreaSize

    // ipc 监听在 loadURL 之前，防止事件未注册

    initIpcMain()

    const win = new BrowserWindow({

        width: 370,

        height: 470,

        x: width - (370 + 10),

        y: height - (470 + 10),

        movable: false, // 窗口是否可移动

        hasShadow: false, // 窗口是否显示阴影

        frame: false, // 窗口是否显示边框

        show: false, // 等 loadURL 完成之后再显示

        alwaysOnTop: true, // 窗口是否置顶

        skipTaskbar: true, // 窗口是否显示在任务栏中

        webPreferences: {

            webviewTag: true, // 启用 webview

            preload: path.join(__dirname, 'preload.js'), // 预加载脚本

            nodeIntegration: true,

            contextIsolation: false

        }

    })

    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL).catch(error => console.error(error))

    win.show()

}

// 初始化 IPC 事件

const initIpcMain = () => {

    // 获取最新页面的 URL（页面加载就要获取的方法要写在 loadURL 之前）

    ipcMain.handleOnce('webview-url', () => {

        return lastUrl

    })

}

这里主要是处理了快捷地址和选择后的地址通过ipc 通信传入到页面，这里配置的预加载脚本 preload.js 通过 ipcRenderer.invoke('webview-url')能访问到如上配置的ipcMain.handleOnce('webview-url')从而获得上一个窗口的选择地址。点击窗口模式后创建一个新的 BrowserWindow，大小类似广告弹层且显示在桌面的右下角。

Electron 在流程上差不多就这些，接下来就要考虑页面的展示了。首先想到的是将视频内容通过iframe标签嵌入在中间，上面是假的广告，下面是时间，假期的显示（如视频中展示的位置一样）。但是 iframe 有一个有同源策略的安全限制问题，不是所有的网站都允许你页面里面套页面的。于是就要用到另一个标签webview，与 iframe不同， webview 独立于你的应用程序运行，在 Electron 的文档中有提到 webview 的部分，可以自行查看更多详情。

<body>

    <!-- 省略 -->

    <main></main>

    <!-- 省略 -->

</body>

HTML 部分只需要像视频里那样排版就行，这里我们主要关注中间部分。

const main = document.querySelector('main')

const webview = document.createElement('webview')

window.electronAPI.webviewUrl().then(url => {

    webview.src = url

})

main.appendChild(webview)

webview.addEventListener('dom-ready', () => {

    webview.style.display = 'inline-flex'

    webview.style.width = '100%'

    webview.style.height = 'calc(100vh - 263px)'

})

JS部分在获取地址之后，创建一个webview标签设置完属性和样式后追加到 main 标签里。这样基本上就大功告成了。

但是在我做出第一版的时候发现一个问题。想要完美显示得需要视频网站支持网页全屏显示的功能，注意是网页全屏，不是屏幕全屏，只需要在显示的部分占满即可。因为一开始我只以B站和腾讯视频作为示例，它两都有网页全屏，而其他网站是没有或不完美支持的（如爱奇艺，有这个功能但是有最小宽度(lll￢ω￢)）。

既然原站没有只能自己造了，还好 webview 支持插入脚本，<webview>.executeJavaScript(code[, userGesture])。

Election webview 标签 部分的文档中有提到：在页面中执行 code。 如果设置了userGesture，它将在页面中创建用户手势上下文。 像 requestFullScreen 这样的需要用户操作的HTML API可以利用这个选项来实现自动化。

当然我们不需要实现 requestFullScreen，因为那是屏幕全屏的方法。不过我们需要这个用户手势上下文，将userGesture设置为true即可。

既然可以插入脚本了，那么我的第一个想法就是，把无关内容全部设置display为none，并且将video标签复制到body标签下成为它的的子集，然后将video设置样式，zInde调大置顶显示。

但是我想到这个解决方案的时候觉得自己真是个天才，然后不是所有的网站都是以video标签播放的，可能在页面里还套了个 iframe 标签来展示视频，当然这是试了腾讯视频之后得出来的，一开始我一直以为是我脚本的问题，没想到广告的 video 播放完之后，页面上再也不存在 video 标签了（好在广告的 video 都是播放完就消失，不然很难区分有效的 video 标签）。后来我暂时妥协，因为腾讯支持网页全屏功能，我只要模拟点击按钮就可以了(lll￢ω￢)，于是第二版诞生，支持自动网页全屏，当然只支持Menu中配置的一些。

不过 iframe 播放的方式也是可以像 video 复制的方法解决的，之后的版本应该会解决这个问题，使得通过 iframe 播放网站也能使用。

总结

可以看出，对于办公党 Electron 的用途还是很广的。你只要会前端且跟着起步文档搭一搭，加上你自己的想法，一个有趣的桌面工具就诞生了！

Electron 办公党的摸鱼神器的更多相关文章

  1. Thief-Book 上班摸鱼神器

    Thief-Book 上班摸鱼神器 介绍 Thief-Book 是一款真正的摸鱼神器,可以更加隐秘性大胆的看小说. 隐蔽性 自定义透明背景,随意调整大小,完美融入各种软件界面 快捷性 三个快捷键,实现 ...

  2. vscode插件（摸鱼神器-小霸王游戏机

    vscode插件(摸鱼神器-小霸王游戏机 步骤 vscode扩展搜索小霸王,点击下载即可. 使用 默认有一个demo小游戏,即超级玛丽. 本地仓库 可以通过local菜单上的添加按钮添加本地nes r ...

  3. 【摸鱼神器】UI库秒变LowCode工具——列表篇（一）设计与实现

    内容摘要: 需求分析 定义 interface 定义 json 文件 定义列表控件的 props 基于 el-table 封装,实现依赖 json 渲染 实现内置功能:选择行(单选.多选),格式化.锁 ...

  4. 【转】让Chrome化身成为摸鱼神器，利用Chorme运行布卡漫画以及其他安卓APK应用教程

    下周就是十一了,无论是学生党还是工作党,大家的大概都会有点心不在焉,为了让大家更好的心不在焉,更好的在十一前最后一周愉快的摸鱼,今天就写一个如何让Chrome(google浏览器)运行安卓APK应用的 ...

  5. 【摸鱼神器】基于SSM风格的Java源代码生成器 单表生成 一对一、一对多、多对多连接查询生成

    一.序言 UCode Cms 是一款Maven版的Java源代码生成器,是快速构建项目的利器.代码生成器模块属于可拆卸模块,即按需引入.代码生成器生成SSM(Spring.SpringBoot.Myb ...

  6. 【摸鱼神器】UCode Cms管理系统 内置超好用的代码生成器 解决多表连接痛点

    一.序言 UCode Cms管理系统是面向企业级应用软件开发的脚手架.当前版本1.3.4.快速体验: git clone https://gitee.com/decsa/demo-cms.git (一 ...

  7. 【摸鱼神器】一次搞定 vue3的 路由 + 菜单 + tabs

    做一个管理后台,首先要设置路由,然后配置菜单(有时候还需要导航),再来一个动态tabs,最后加上权限判断. 这个是不是有点繁琐?尤其是路由的设置和菜单的配置,是不是很雷同?那么能不能简单一点呢?如果可 ...

  8. 【摸鱼神器】UI库秒变LowCode工具——列表篇（二）维护json的小工具

    上一篇介绍了一下如何实现一个可以依赖 json 渲染的列表控件,既然需要 json 文件,那么要如何维护这个 json 文件就成了重点,如果没有好的维护方案的话,那么还不如直接用UI库. 所以需要我们 ...

  9. 【摸鱼神器】UI库秒变低代码工具——表单篇（一）设计

    前面说了列表的低代码化的方法,本篇介绍一下表单的低代码化. 内容摘要 需求分析. 定义 interface. 定义表单控件的 props. 定义 json 文件. 基于 el-form 封装,实现依赖 ...

  10. 【摸鱼神器】UI库秒变低代码工具——表单篇（二）子控件

    上一篇介绍了表单控件,这一篇介绍一下表单里面的各种子控件的封装方式. 主要内容 需求分析 子控件的分类 子控件属性的分类 定义 interface. 定义子控件的的 props. 定义 json 文件 ...

随机推荐

  1. markdown常用命令行格式

    Markdown 主要命令(语法)如下: 标题 使用 # 号表示标题,# 的个数决定标题的级别: 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 段落 & 换行 直接输入文字形成段 ...

  2. WPF静态资源StaticResource和动态资源DynamicResource有什么区别，x:Static又是什么意思？

    什么叫WPF的资源(Resource) 资源是保存在可执行文件中的一种不可执行数据.WPF中资源用ResourceDictionary类表示,这个类就是一个字典,字典的key和value都是objec ...

  3. Windows 实用工具（新机、全新系统、重装系统必备）

    Windows 实用工具 https://www.lanzoub.com/b0ziu7owh 密码:akoc HEU_KMS_Activator Windows 激活工具. 下载链接: Github: ...

  4. PyQt6安装与配置(附带Vscode配置)

    1. 安装PyQt6和PyQt-tools pip install PyQt6 pip install PyQt6-tools 2. Vscode配置QtDesigner 安装PyQt Integra ...

  5. GoView：Start14.6k,上车啦上车啦，Vue3低代码平台GoView，零代码+全栈框架

    GoView:Start14.6k,上车啦上车啦,Vue3低代码平台GoView,零代码+全栈框架 项目介绍 GoView 是一个Vue3搭建的低代码数据可视化开发平台,将图表或页面元素封装为基础组件 ...

  6. 从零开始的PHP原生反序列化漏洞

    1.写在前面 OK 兄弟们,这几天一直在面试,发现很多 HR 喜欢问反序列化相关的内容,今天咱们就从最简单的 PHP 原生反序列化入手,带大家入门反序列化 2.PHP 序列化 在 PHP 中,有反序列 ...

  7. 【HUST】网安｜编译原理实验｜实验四攻略

    [实验代码及报告地址:Gitee传送门](已关闭传送大门,原因是抄袭过多,如需参考,请直接看博客,虽然下一届内容会变了) 不擅长写报告昂,很多地方能省全省了. 助力来年编译原理加大难度!(hhh) M ...

  8. 信息资源管理综合题之“某国企投资IT应用人员减少但生成率没有实质性变化的IT黑洞问题”

    一.某大型国企在IT应用上投资了2000万美元,虽然蓝领工人数量大幅减少,但实际生产率并未有实质性变化 1.企业在IT应用上的巨额投资并未达到预期目标的这种现象被称为什么? 2.产生这现象的原因有哪些 ...

  9. JavaScript 从零实现物理模拟

    @charset "UTF-8"; .markdown-body { line-height: 1.75; font-weight: 400; font-size: 15px; o ...

  10. FreeSWITCH Jitter Buffer 技术解析与应用指南

    一.概述 freeswitch是一款简单好用的VOIP开源软交换平台. Jitter Buffer(抖动缓冲器)是实时语音通信中解决网络抖动和延迟问题的核心技术.FreeSWITCH通过STFU(So ...