关于前端:从零开始的electron开发文件处理Chrome拓展

本篇次要介绍 Electron 如何应用 Chrome 扩大。
Electron 不反对所有 Chrome 扩大 API。请参阅反对的扩大 api。
拓展的加载需放在 app.whenReady 之后载入。

这个库次要是将 DevTool 扩大装置到 Electron 的一个包，汇合了支流前端库的 DevTool 拓展，链接。
比如说咱们想装置一下 vue3 的 DevTool：

npm install electron-devtools-installer --save-dev

import 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 文件，在谷歌浏览器上装置这个拓展：

在Windows 下为 %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>\extensions
mac：/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 地址：链接

关于前端:从零开始的electron开发文件处理Chrome拓展

文件解决 -Chrome 拓展

electron-devtools-installer

本地装置拓展

小演示