How to create app with electron like steam-overlay - javascript

I want to create electron application that will be game helper and it will show some cheats top on the any game while user plays. You can imagine like "Steam" application overlay in the game. I tried to open my application to the top and also try to show native dialogs & alerts to get app to top but os always hide game app (minimized) before show my app. My question is; is it possible to run or should i stop to try?
I added example code that i tried below.
import { app, BrowserWindow, globalShortcut, shell, dialog } from 'electron';
import Positioner from 'electron-positioner';
app.on('ready', function () {
mainWindow = new BrowserWindow({
x: mainWindowState.x,
y: mainWindowState.y,
width: mainWindowState.width,
height: mainWindowState.height,
alwaysOnTop: true
});
//...some codes
var ret = globalShortcut.register('shift+ctrl+x', function() {
console.log('shift+ctrl+x is pressed');
shell.beep();
positioner.move('bottomRight');
mainWindow.show();
});
});

It should be working, depend on the game engine and os, i tried the code here on osx and it work as expected.
But want do you mean with "but os always hide game app (minimized) before show my app"
At all you start the app and then the game, and the app should overlay the game

Related

Electron opening every link in browser instead of electron itself

I wanted to open an external link not in electron but in the browser. Therefore I implemented this code:
document.addEventListener('click', function(event) {
if (event.target.tagName === 'A' && event.target.href.startsWith('http')) {
event.preventDefault();
shell.openExternal(event.target.href);
}
});
My problem is now that every link that I create, opens in the browser.
e.g.
foo <-wanted behaviour to open in browser
bar <- not wanted behaviour to open in browser
How can I get it to just open the external link in the browser?
is actually href="http://localhost:X000/#"
so the if condition is always true.
Replace your code with this and it should work:
const { app, shell, BrowserWindow } = require("electron");
// Create the browser window.
mainWindow = new BrowserWindow({
width: 1300,
height: 800,
});
// Load your React app or any other HTML which creates your Electron app content
mainWindow.loadFile("./build/index.html");
mainWindow.webContents.on("new-window", function(event, url) {
event.preventDefault();
// This will open a new Electron window to load the url.
shell.openExternal(url);
});

router.push electron-vue doesn't work if mainwindow is hidden

I've an app built with Electron and Vuejs / Vue-router.
In my electron's index.js I have this function, for hide the window once time I've opened the app.
mainWindow.hide();
I have also a Splash-Page built with Vuejs that make a redirect if user is Logged, some like:
if(this.isLogged()){
this.$router.push({name: 'logged-view'})
}else{
this.$router.push({name: 'login-view'})
}
My problem is that if I hide my window with mainWindow.hide() the Splash-Page make a push of route but it will never create a component (login-view or logged-view).
Instead if I remove mainwindow.hide() the app redict towards my component correctly.
Yes I can hide window once time I am in the new component after redirect, it isn't the behavior that I would have.
So is there a way for redirect if mainwindow is hidden?
For others Developers:
I've solved.
I don't call a mainwindow.hide() anymore, but I have put in my browserwindow creation:
mainWindow = new BrowserWindow({
height: 563,
useContentSize: true,
width: 1000,
show:false // this for solve the problem of router.push() avoid mainwindow.hide()
})

Phonegap Framework7 Back Button not working

I'm creating an hybrid app with Phonegap and Framework7 (v1 i guess).
I've been trying to set the "android back button" to quit the app after the user confirms it, and i've been looking at some examples but i can't get this to work. I'm using this:
$$(document).on('deviceready', function() {
console.log("Device is ready!");
document.addEventListener('backbutton', function(e) {
e.preventDefault();
navigator.notification.confirm("Tem a certeza que quer fechar a aplicação?", onConfirmExit, 'Pizzarte', 'Sim,Não');
}, false);
function onConfirmExit(button) {
if (button == 2) { //If User select a No, then return back;
return;
} else {
navigator.app.exitApp(); // If user select a Yes, quit from the app.
}
}
var mySwiper = myApp.swiper('.swiper-container', {
pagination: '.swiper-pagination'
});
});
But when I click the back button on Android, nothing happens. And the strange thing is that if i'm previewing the app using the Phonegap app this will work. Only when i install the final app on my phone, this does not work.
Please help/suggest me if I am doing something wrong.
Phonegap Developer app is a Cordova app which includes all the core plugins and a few 3rd party ones.
Your problem is you are trying to use cordova-plugin-dialogs for the confirm prompt, but you don't have it installed, so it does nothing.
So install it with cordova plugin add cordova-plugin-dialogs

Get selected text from electron webview

How to get the selected text from a webview in an electron application?
I am using Angular with Electron. So I have a component which has a webview:
<webview id="foo" attr.src={{activeUrl}} style="height: 600px"></webview>
This is what I use for getting the selected text:
let rightClickPosition = null;
const menu = new Menu();
const menuItem = new MenuItem({
label: 'Get selected text',
click: () => {
// does not work for selected text in webview
console.log(window.getSelection().toString());
}
});
menu.append(menuItem);
window.addEventListener('contextmenu', (e) => {
e.preventDefault();
rightClickPosition = {x: e.x, y: e.y};
menu.popup(remote.getCurrentWindow());
}, false);
The problem: window.getSelection().toString() does not work for the selected text in the webview. It works only for the text outside the webview.
webView is special kind of tag in Electron. as document (https://electronjs.org/docs/api/webview-tag) says, Unlike an iframe, the webview runs in a separate process than your app. It doesn't have the same permissions as your web page and all interactions between your app and embedded content will be asynchronous..
Since it's different process and doesn't allow direct interaction, way you can communicate is using ipc between webview and outer frame. Check Electron's ipc to establish. Specifically you may interested in ipcRenderer.sendToHost for renderer host and webview.

Is there a way to launch a popup for mobile device browser ONLY if App not already installed?

I am looking for a way to launch a popup when a website is viewed via a mobile browser, asking the user if they would like to install our App. But I only want the popup prompt to appear if the App is not already installed.
I have used the following JavaScript (which will work for Apple devices:
<script type="text/javascript">
if( /iPad|iPhone/i.test(navigator.userAgent) ) {
var url=confirm("Would you like to download our mobile application?");
if (url==true)
{
var url = window.location.href = 'http://www.itunes.com';
url.show();
}
else
{
}
}
</script>
As has been discussed here: App notification popup mobile device web browser
However, this popup launches on iOS regardless. I understand you can check for an app url scheme (and so find out if the App is installed) here: How to launch apps (facebook/twitter/etc) from mobile browser but fall back to hyperlink if the app isn't installed
Can I accomplish this by incorporating these two techniques?
You can use this if your app has a custom URL scheme:
<script type="text/javascript">
function startMyApp()
{
document.location = 'appCustomScheme://';
setTimeout( function()
{
if( confirm( 'Install app?'))
{
document.location = 'http://itunes.apple.com/us/app/yourAppId';
}
}, 300);
}
</script>
and call the function startMyApp() on page load, or if you need to bind it to some javascript event (click, etc.).
If you are trying to detect whether twitter or Facebook is installed in your device you can use this in your script.
var url = window.location.href = 'fb://';
for twitter
var url = window.location.href = 'twitter://';
If it does not work, try taking out the //. The above statements will open the twitter or facebook app, you can use that in a if loop or something to detect whether a app is installed on the device.

Categories