從零開始的electron開發-文件處理-Chrome拓展

文件處理-Chrome拓展

本篇主要介紹Electron如何使用Chrome擴展。
Electron不支持全部 Chrome 擴展 API。請參閱支持的擴展api。
拓展的加載需放在app.whenReady以後載入。

electron-devtools-installer

這個庫主要是將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文件，在谷歌瀏覽器上安裝這個拓展：

• 在Ｗ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>\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地址：連接