文件解决-Chrome拓展
本篇次要介绍Electron如何应用Chrome扩大。
Electron不反对所有 Chrome 扩大 API。请参阅反对的扩大api。
拓展的加载需放在app.whenReady之后载入。
electron-devtools-installer
这个库次要是将DevTool扩大装置到Electron的一个包，汇合了支流前端库的DevTool拓展，链接。
比如说咱们想装置一下vue3的DevTool：
npm install electron-devtools-installer --save-devimport installExtension, { VUEJS3_DEVTOOLS } from "electron-devtools-installer"const { app } = require('electron')app.whenReady().then(async () => { try { await installExtension(VUEJS3_DEVTOOLS) } catch (e) { console.error("Vue Devtools failed to install:", e.toString()) }})// VUEJS3_DEVTOOLS这里传入的拓展id，实际上等同于await installExtension({ id: 'ljjemllljcmogpfapbkkighbhhppjdbg', // vue3拓展id electron: '>=1.2.1'})当然，这种形式是从chrome网上利用店装置的拓展，故如果网络不能连贯外网的话，根本装置不上。
本地装置拓展
Electron提供了办法在本地装置拓展，只须要传入拓展的目录（这个是拓展解压后的门路，不是crx文件）。
// Electron 9以下BrowserWindow.addExtension(path)BrowserWindow.addDevToolsExtension(path)// Electron 9及以上session.defaultSession.loadExtension(path)如果咱们在网上下载了拓展的crx文件，在谷歌浏览器上装置这个拓展：
- 在Ｗindows 下为
%LOCALAPPDATA%\Google\Chrome\User Data\Default\Extensions 在 Linux下为：
~/.config/google-chrome/Default/Extensions/~/.config/google-chrome-beta/Default/Extensions/~/.config/google-chrome-canary/Default/Extensions/~/.config/chromium/Default/Extensions/- 在 macOS下为
~/Library/Application Support/Google/Chrome/Default/Extensions
比方我的位于C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\Extensions，其拓展id就是目录名，比方vue3的为ljjemllljcmogpfapbkkighbhhppjdbg目录，咱们找到这个目录复制进去（当然你也能够间接应用这个门路），放入到
win：C:\Users\Administrator（你的用户）\AppData\Roaming\<app name>\extensionsmac：/Users/<user name>/Library/Application Support/<app name>/Extensions（大略，这个没测试）反正是app.getPath("userData")目录下的extensions目录中应用对应的加载办法（此教程版本为12，故用session加载）：
await session.defaultSession.loadExtension( path.join( app.getPath("userData"), "/extensions/chklaanhfefbnpoihckbnefhakgolnmc/0.0.32.3_0" ), // 关上本地文件也利用拓展 { allowFileAccess: true })这里须要留神的是loadExtension的path为manifest.json文件的根目录，下载下来的拓展id目录下还有一层版本号的目录，比方下面的0.0.32.3_0，请自行查看，这里装置胜利后控制台会报正告，不过不影响应用，看官网什么时候去除issues
小演示
咱们在本地加载一个json丑化的拓展JSONView，文件的放入形式和上方一样，就不再多说。
主过程：async function onAppReady() { if (!process.env.WEBPACK_DEV_SERVER_URL) { createProtocol('app') } if (isDevelopment && !process.env.IS_TEST) { try { await session.defaultSession.loadExtension( path.join( app.getPath('userData'), '/extensions/chklaanhfefbnpoihckbnefhakgolnmc/0.0.32.3_0' ), { allowFileAccess: true } ) } catch (e) { console.error('Vue Devtools failed to install:', e.toString()) } initWindow() }}渲染过程：<template> <div class="extensions"> <a-upload accept="application/json" :customRequest="customRequest" name="file" :showUploadList="false" :multiple="true" > <a-button> <upload-outlined></upload-outlined> 关上json </a-button> </a-upload> </div></template><script>const { remote } = require('electron')import { defineComponent, getCurrentInstance } from 'vue'export default defineComponent({ setup() { const { proxy } = getCurrentInstance() const { $message } = proxy function customRequest(fileData) { const path = fileData.file.path if (remote.session.defaultSession.getExtension('chklaanhfefbnpoihckbnefhakgolnmc')) { window.open(path) } else { $message.warning('没有加载json拓展') } } return { customRequest } },})</script>咱们抉择一个json文件关上，间接window.open关上这个json，看看是否有json丑化成果。
本系列更新只有利用周末和下班时间整顿，比拟多的内容的话更新会比较慢，心愿能对你有所帮忙，请多多star或点赞珍藏反对一下
本文地址：链接
本文github地址：链接