Atom Electron webview contextmenu,获得点击目标

Question

所以我正在开发一个新项目,我们想为使用Electron的用户创建一个桌面应用程序.

问题是我需要webview元素上的自定义上下文菜单.

到目前为止我的进展我可以在webview上创建上下文菜单,但我无法访问点击下的内容.:)

index.html的:

<webview id="webViewDefault" class="active" src="http://example.com" minwidth="100%" minheight="100%" partition="somePartition" nodeintegration allowpopups></webview>

renderer.js

    const electron = require('electron');
    const Menu = electron.remote.Menu;

//Create contextmenu template
    const WebViewMenu = Menu.buildFromTemplate([{
        label: 'Button 1', click(){
            console.log('Button 1 clicked');
        }
    },
        {type: 'separator'}, {
            label: 'Button 2', click(){
                console.log('Button 2 clicked');
            }
        }
    ]);

//get webview
    let defaultWebview = document.getElementById("webViewDefault");

//add event listner
    defaultWebview.addEventListener("contextmenu", (event) => {
        const t = event.srcElement.id.split('-');
        WebViewMenu.popup(electron.remote.getCurrentWindow());
    });

因此,href当右键单击发生时,如何获取链接的属性,这样我就可以为用户创建一个新选项卡.

选项卡工作得很好,创建新的Web视图,选择活动的视图等.我只需要从链接获取网址...:D

Answer 1

好吧,我想通了,所以我要回答我的问题.

我对此问题的解决方案是webview的preload属性.我创建了一个*.js文件,该文件在加载时注入webview.此文件包含click事件的事件侦听器,并通过电子中的"ipcRenderer"将基于事件目标的"ipc"消息发送到主窗口.

这样我就可以为不同的元素创建不同的上下文,例如:a,input,textarea等...

注入的js:

const {ipcRenderer} = require('electron');

document.addEventListener('contextmenu', function (e) {
    e = e || window.event;
    let msg = {
            tagName: e.target.tagName || e.srcElement.tagName,
            text: e.target.textContent || text.innerText,
            href: e.target.getAttribute("href")
        };

    if (msg.tagName.toLowerCase() === 'a' && msg.href.substring(0, 1) !== "#") {
        ipcRenderer.send("webview-context-link", msg);
    }
}, false);

在webview的父窗口中,我会监听我的自定义ipc消息并根据需要处理它们:

const electron = require('electron'),
        Menu = electron.remote.Menu,
        ipc = electron.ipcRenderer;

electron.remote.ipcMain.on("webview-context-link", (event, data) => {
    if (url = validateUrl(data.href)) {
        const WebViewMenu = Menu.buildFromTemplate([{
            label: 'Open in new tab', click(){
                addNewTab(url)
            }
        }]);

        WebViewMenu.popup(electron.remote.getCurrentWindow());
    }
});

我不是百分之百确定这是解决这个问题的最好方法,但是如果我想出一个更好的解决方案,它暂时会工作,我会编辑它.

Answer 2

将所需的信息存储在全局状态存储中，然后从上下文菜单单击事件中访问它。

例如

// Instantiate a Global Store
const globalStore = {
  eventTargetHref = null
}

// Set value inside your DOM node event listener
aDOMnode.addEventListener('contextmenu', (event) => {
  event.preventDefault()
  globalStore.eventTargetHref = event.target.href
  aContextMenu.popup(remote.getCurrentWindow())
}

// Access value from your context menu click event
aContextMenu.append(new MenuItem({
  label: 'Open In New Tab',
  click() {
    addNewTab(globalStore.eventTargetHref)
  },
}))