【Electron】WebページにCSS/JS/HTMLを挿入する開発者向けアプリを作る

npm install

 const win = new BaseWindow({
    width: windowWidth,
    height: windowHeight,
    ...(process.platform === 'linux' ? { icon } : {})
  })
  // Webページ表示用View
  const webView = new WebContentsView({
    webPreferences: {
      preload: join(__dirname, '../preload/index-web.js'),
      nodeIntegration: false,
      sandbox: true,
      contextIsolation: true,
      webviewTag: false
    }
  })
  // window.openとtarget="_blank"での読み込み無効化
  webView.webContents.setWindowOpenHandler(() => {
    errorDialog('ページ遷移をキャンセルしました')
    return { action: 'deny' }
  })
  // BaseWindowにWebContentsViewをセット
  win.contentView.addChildView(webView)

  //UI表示用View
  const uiView = new WebContentsView({
    webPreferences: {
      preload: join(__dirname, '../preload/index-ui.js'),
      nodeIntegration: false,
      sandbox: false,
      contextIsolation: true
    }
  })
  // BaseWindowにWebContentsViewをセット
  win.contentView.addChildView(uiView)

  // ビュー表示位置設定
  const setBounds = (): void => {
    const { width, height } = win.getContentBounds()

    const w = Math.max(width - panelWidth - 5, 0)
    webView.setBounds({ x: 0, y: 0, width: w, height: height - 3 })
    uiView.setBounds({ x: w, y: 0, width: panelWidth, height: height - 3 })
  }

  setBounds()

  win.on('resize', () => {
    setBounds()
  })

  win.on('closed', () => {
    webView.webContents.close()
    uiView.webContents.close()
  })

  // ビューコンテンツロード
  if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
    const path = process.env['ELECTRON_RENDERER_URL'] + '/'
    uiView.webContents.loadURL(path + 'index-ui.html')
    webView.webContents.loadURL(path + 'index-web.html')
  } else {
    const path = join(__dirname, '../renderer')
    uiView.webContents.loadFile(join(path, 'index-ui.html'))
    webView.webContents.loadFile(join(path, 'index-web.html'))
  }

import { resolve } from 'path'
import { defineConfig } from 'electron-vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  main: {},
  preload: {
    build: {
      rollupOptions: {
        input: {
          'index-ui': resolve('src/preload/index-ui.ts'),
          'index-web': resolve('src/preload/index-web.ts')
        }
      }
    }
  },
  renderer: {
    build: {
      rollupOptions: {
        input: {
          'index-ui': resolve('src/renderer/index-ui.html'),
          'index-web': resolve('src/renderer/index-web.html')
        }
      }
    },
    plugins: [react()]
  }
})

import { contextBridge, ipcRenderer } from 'electron'

const api = {
  loadPage: (url: string): Promise<null | undefined> => ipcRenderer.invoke('loadPage', url),
  insertCss: (css: string): Promise<null | string> =>
    ipcRenderer.invoke('insertCss', css),
  insertJs: (js: string): Promise<null> => ipcRenderer.invoke('insertJs', js),
  insertHtml: (selector: string, html: string, position: string) =>
    ipcRenderer.invoke('insertHtml', selector, html, position)
}
// Use `contextBridge` APIs to expose Electron APIs to
// renderer only if context isolation is enabled, otherwise
// just add to the DOM global.
if (process.contextIsolated) {
  try {
    contextBridge.exposeInMainWorld('uiapi', api)
  } catch (error) {
    console.error(error)
  }
} else {
  // @ts-ignore (define in dts)
  window.uiapi = api
}

export type API = typeof api

import { API } from '@preload/index-web'

declare global {
  interface Window {
    uiapi: API
  }
}

{
  "extends": "@electron-toolkit/tsconfig/tsconfig.web.json",
  "include": [
    "src/renderer/src/env.d.ts",
    "src/renderer/src/**/*",
    "src/renderer/src/**/*.tsx",
  ],
 "files": ["src/preload/index-ui.d.ts","src/preload/index-web.d.ts"],
  "compilerOptions": {
    "composite": true,
    "jsx": "react-jsx",
    "outDir": "out",
  }
}

import { useMemo, useCallback, useRef } from 'react'
import CodeMirror from '@renderer/src/ui/components/codemirror'
import { css } from '@codemirror/lang-css'

function CssEditor(): React.JSX.Element {
  const extensions = useMemo(() => [css()], [])
  const onSubmit = useCallback(async (value: string) => {
    await window.uiapi.insertCss(value)
  }, [])

  return <CodeMirror extensions={extensions} onSubmit={onSubmit} title="CSS挿入" />
}

export default CssEditor

import { useRef, useCallback } from 'react'
import ReactCodeMirror from '@uiw/react-codemirror'
import { Extension } from '@codemirror/state'
import { EditorView } from '@codemirror/view'
import { basicSetup } from 'codemirror'

type Props = {
  extensions?: Extension[]
  onSubmit?: null | ((value: string, title: string) => void)
  title?: string | string[]
}

function CodeMirror({
  extensions = [],
  onSubmit = null,
  title = '送信'
}: Props): React.JSX.Element {
  const viewRef = useRef<EditorView | null>(null)

  const onClick = useCallback(
    (e: React.MouseEvent<HTMLButtonElement>): void => {
      const title = e.currentTarget.dataset.title ?? ''
      const value = viewRef.current?.state.doc.toString() ?? ''
      onSubmit?.(value, title)
    },
    [onSubmit]
  )

  const titles = Array.isArray(title) ? title : [title]

  return (
    <>
      <div className="codemirror-button-wrap">
        {titles.map((t, i) => (
          <button
            data-title={t}
            key={`button_${i}`}
            className="codemirror-button"
            onClick={onClick}
          >
            {t}
          </button>
        ))}
      </div>
      <div className="codemirror-editor">
        <ReactCodeMirror
          value=""
          extensions={[basicSetup, ...extensions]}
          onCreateEditor={(view) => {
            viewRef.current = view
          }}
        />
      </div>
    </>
  )
}

export default CodeMirror

  const buildJsCode = (apiName: string, data: { [key: string]: string }): string => {
    const json = JSON.stringify(data)
    return `(data=>{window.webapi.${apiName}(data)})(JSON.parse(${JSON.stringify(json)}))`
  }
  // CSS挿入要求
  ipcMain.handle('insertCss', async (_, css: string) => {
    const code = buildJsCode('insertCss', { css })

    webView.webContents.executeJavaScript(code).catch((e) => {
      errorDialog(`CSS Insert Faild:${e}`)
      return null
    })
  })

import { contextBridge } from 'electron'

const cssInject = (data: { css: string }): void => {
  const name = '___injected_style_1___'
  const css = data.css
  let styleTag = document.getElementById(name)
  if (!styleTag) {
    styleTag = document.createElement('style')
    styleTag.id = name
    document.body.appendChild(styleTag)
  }
  styleTag.textContent = css
}

const api = {
  insertCss: cssInject
}
// Use `contextBridge` APIs to expose Electron APIs to
// renderer only if context isolation is enabled, otherwise
// just add to the DOM global.
if (process.contextIsolated) {
  try {
    contextBridge.exposeInMainWorld('webapi', api)
  } catch (error) {
    console.error(error)
  }
} else {
  // @ts-ignore (define in dts)
  window.webapi = api
}

export type API = typeof api