探索 Electron：如何进行网址收藏并无缝收录网页图片内容？

Electron是一个开源的桌面应用程序开发框架，它允许开发者使用Web技术（如 HTML、CSS 和 JavaScript）构建跨平台的桌面应用程序，它的出现极大地简化了桌面应用程序的开发流程，让更多的开发者能够利用已有的 Web 开发技能来构建功能强大且跨平台的应用程序，这对于提升开发效率和应用程序的快速交付具有重要意义。

今天借助electron实现添加网址的应用功能，这里我们通过electron-vite框架搭建项目，详细的配置请参考我之前的文章：地址 这里不再赘述，接下来开始项目的正式讲解：

目录

头部内容搭建

列表数据传递

列表内容处理

头部搜索处理

列表网站弹框

保存弹框图片

收藏本地图片

---

头部内容搭建

这里我们在头部添加一个添加按钮和搜索框，用于对数据进行处理，如下所示：

<template>
    <div class="search-container">
        <div class="button" @click="handleAdd">+</div>
        <div class="input">
            <input type="text" placeholder="请输入关键字">
        </div>
    </div>
</template>

效果如下所示：

然后这里我们手写一个弹框的效果，如下我们封装一个dialog组件，然后通过showDialog进行判断显示与隐藏：

<template>
    <div class="dialog" v-if="showDialog">
        <div class="content">
            <div class="input">
                <input type="text" placeholder="请输入网址">
            </div>
            <div class="btns">
                <button>添加</button>
                <button @click="setIsShow(false)">取消</button>
            </div>
        </div>
    </div>
</template>

我们在首页的index父组件中，通过provide和inject进行父组件与其所有子孙组件之间进行跨层级数据传递的高级选项，这对于复杂的应用程序结构或深层级嵌套的组件特别有用，如下我们通过其设置了一个变量和控制变量的函数：

<template>
    <div class="home">
        <searchBar></searchBar>
    </div>
    <Dialog></Dialog>
</template>

<script setup lang="ts">
import { ref, provide } from "vue"
import searchBar from "./components/searchBar.vue"
import Dialog from "./components/dialog.vue"

// 窗口的显示状态
const showDialog = ref(false)
const setIsShow = (isShow: boolean) => {
    showDialog.value = isShow
}
provide("dialog-visible", {
    showDialog,
    setIsShow
})
</script>

然后我们在父组件下的两个子组件进行数据的传递，如下所示：

最终呈现的效果如下所示：

列表数据传递

接下来我们开始设置列表内容，然后在home的父组件下进行引入，如下所示：

<template>
    <div class="list">
        <div class="no-item">暂无数据...</div>
        <div class="item">
            <div class="read-item">
                <img src="" alt="">
                <h2>百度一下</h2>
                <button> x </button>
            </div>
            <div class="read-item">
                <img src="" alt="">
                <h2>百度一下</h2>
                <button> x </button>
            </div>
        </div>
    </div>
</template>

接下来我们在对话框中的添加按钮设置点击事件，然后通过ipcRenderer函数中的invoke函数进行主进程与渲染进程的双向通信，这里我们把对话框中的输入框的内容作为数据传递给主进程：

在真正的项目中，主进程可以有许许多多的与渲染进程互通传递数据的函数，为了方便管理，这里我们把与主进程通信的函数抽离出去，然后再在主进程中进行引入，这里我们抽离出一个获取url资源数据的函数进行设置，如下所示：

const { ipcMain, BrowserWindow } = require('electron')

export const getSource = () => {
    ipcMain.handle('add-url', (_, url) => {
        const win = new BrowserWindow({
            width: 500,
            height: 500,
            show: false,
            webPreferences: {
                offscreen: true, // 开启 offscreen
            },
        })
        win.loadURL(url)
        win.webContents.on('did-finish-load', () => {
            const title = win.getTitle()
            console.log(title)
        })
    })
}

如下我们再主进程中进行调用：

当我们点击对话框中的添加按钮后，上述代码会将百度的标题进行一个获取，如下所示：

如果主进程打印的数据出现乱码的情况，这里只需要对package.json文件中运行的命令进行如下配置即可：

接下来我们在getSource文件中，对渲染进程传递过来的url进行一个数据的抓取，这里我们使用了一个异步的Promise进行一个数据的获取并将其return出去，代码如下所示：

const { ipcMain, BrowserWindow } = require('electron');

export const getSource = () => {
    ipcMain.handle('add-url', async (_, url) => {
        const win = new BrowserWindow({
            width: 500,
            height: 500,
            show: false,
            webPrefe