Comments (17)
@michaelkofron i found a solution and didn't post it here... (i hate it when people do that 🤦♀️ )
app.on("web-contents-created", (e, contents) => { if (contents.getType() == "webview") { // set context menu in webview contextMenu({ window: contents, }); } });
that did the trick for me
from electron-context-menu.
Can you tell us how did you apply context menu inside webview?
from electron-context-menu.
love those comments
@Anderson-Liu can you tell us how you fixed it?
my context menu doen't work in webview
from electron-context-menu.
@sergeyd63 It doesn't for me in Electron 11.
TypeError: win.addEventListener is not a function
at module.exports (/home/polv/projects/zhquiz/submodules/e-zhquiz/node_modules/electron-context-menu/index.js:367:8)
at App.eval (webpack:///./src/background.ts?:32:86)
at App.emit (events.js:315:20)
at Object.b._init (electron/js2c/browser_init.js:157:11741)
at Object.create (electron/js2c/browser_init.js:157:12444)
at electron/js2c/browser_init.js:177:2680
at electron/js2c/browser_init.js:177:3904
at electron/js2c/browser_init.js:177:2217
at electron/js2c/browser_init.js:189:579
at Object.<anonymous> (electron/js2c/browser_init.js:157:9339)
from electron-context-menu.
I have already fix it.
from electron-context-menu.
Now the problem is how to save canvas when right click, because canvas tag have not url attribute, so how to implement save canvas?
from electron-context-menu.
Make sure you're using v0.9.0. It added support for webviews. They should now just work.
from electron-context-menu.
I have solve the problem of show context menu in webview, but I still can't resolve the problem that how to save canvas tag as image by right click, did you have any idea of it ? Thanks!
from electron-context-menu.
but I still can't resolve the problem that how to save canvas tag as image by right click, did you have any idea of it ? Thanks!
That is not relevant to this module. Canvas is not an image. You can create your own menu item for that. The default "Save as Image" menu item is for images only.
from electron-context-menu.
How to solve this problem?
from electron-context-menu.
@sergeyd63 Recently struggling with this problem and would like to know as well. Wish @Anderson-Liu would have mentioned how he got this to work. I've tried to connect a context menu to a webview in every way imaginable and no good results so far ;(
from electron-context-menu.
@sergeyd63 Wow! So simple! I hope others struggling with this problem come across your amazing solution. Thank you!
from electron-context-menu.
If somebody is still looking for the solution
then check @sergeyd63 's answer ^ it's working
from electron-context-menu.
@patarapolw that's a separate issue, i opened another one for that:
https://github.com/sindresorhus/electron-context-menu/issues/123
from electron-context-menu.
How it will work in web view
and main window Works only in window with this code I
t doesn't work in Web View...
Edit this code to make the context menu work
const { app, BrowserWindow} = require('electron');
const contextMenu = require('electron-context-menu');
contextMenu({
labels: {
cut: 'Cut',
copy: 'Copy',
paste: 'Paste',
save: 'Save Image',
saveImageAs: 'Save Image As…',
copyLink: 'Copy Link',
saveLinkAs: 'Save Link As…',
inspect: 'Inspect Element'
},
prepend: () => [
{
label: 'Arxstd',
},
{
label: 'back',
},
{
label: 'Forward',
},
{
label: 'Reload',
},
{
type: 'separator'
},
{
type: 'separator'
},
{
type: 'separator'
},
{
type: 'separator'
}
],
append: () => { },
showCopyImageAddress: true,
showSaveImageAs: true,
showInspectElement: true,
showSaveLinkAs: true,
cut: true,
copy: true,
paste: true,
save: true,
saveImageAs: true,
copyLink: true,
saveLinkAs: true,
inspect: true
});
let mainWindow;
(async () => {
await app.whenReady();
mainWindow = new BrowserWindow({
webPreferences: {
spellcheck: true,
webviewTag: true,
}
});
mainWindow.loadFile('index.html')
})();
const dispose = contextMenu();
dispose();
from electron-context-menu.
https://stackoverflow.com/questions/65728995/how-to-create-a-context-menu-in-a-webview-in-electron
var menu = new Menu();
//Basic Menu For Testing
menu.append(new MenuItem({ label: 'MenuItem1', click: function() { console.log("YES");
} }));
menu.append(new MenuItem({ type: 'separator' }));
menu.append(new MenuItem({ label: 'MenuItem2', type: 'checkbox', checked: true }));
app.on("web-contents-created", (...[/* event */, webContents]) => {
//Webview is being shown here as a window type
console.log(webContents.getType())
webContents.on("context-menu", (event, click) => {
event.preventDefault();
console.log(webContents.getType())
menu.popup(webContents);
}, false);
});
2023 ok it works well
from electron-context-menu.
const template = [
{
label: '🛠️',
submenu: [
{
label: '↻ Refresh',
accelerator: 'F5',
click: (menuItem, browserWindow, event) => {
win.reload();
}
},
{ label: '👨💻 openDevTools',
accelerator: process.platform === 'darwin' ? 'Alt+Cmd+I' : 'Ctrl+Shift+I',
click: (menuItem, browserWindow, event) => {
win.webContents.openDevTools()
}
},
{ type: 'separator' },
{ label: '🚪 exit',
role: 'quit',
accelerator: 'Alt+F4'
}
]
}
]
const menubar = Menu.buildFromTemplate(template)
//Webview is being shown here as a window type
console.log(webContents.getType())
webContents.on("context-menu", (event, click) => {
event.preventDefault();
console.log(webContents.getType())
menubar.popup(webContents);
}, false);
});
from electron-context-menu.
Related Issues (20)
- Not working in Electron 14.0.0 HOT 1
- Electron 15: Module '"electron"' has no exported member 'WebviewTag' HOT 3
- Interaction with menubar HOT 1
- Enable accelerators for edit options HOT 1
- Ability to hide "Copy Link" and "Save Link As" for `file://` protocol HOT 2
- Incorrect Typescript types for defaultActions
- Default action `saveLinkAs` does not exist in Typescript type definitions
- Add other search engines HOT 4
- Picture in picture HOT 1
- [HELP] get link when right click HOT 2
- Allows to translate "No Guesses Found" when no suggestion are available
- The default options like 'cut' 'copy' 'paste', etc. don't show accelerators next to them HOT 5
- How to add all “Paste” and “Paste as plain text” ?
- Can I paste an image? HOT 1
- Shortcuts not working HOT 1
- Not working with Electron version >=27
- icon for menu items
- Failed to locate module "cli-truncate" HOT 2
- Add `showDictionarySuggestions` option
- Memory leak issue when multiple windows are used.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from electron-context-menu.