TWA Browser URL Not hiding - deep-linking

I am building up a TWA, i followed all tutorials online BUT cannot hide the upper url bar of chrome :(
the asset link file is here
https://www.thept.it/.well-known/assetlinks.json
I verificated the file with this tool https://digitalassetlinks.googleapis.com/v1/statements:list?source.web.site=https://www.thept.it&relation=delegate_permission/common.handle_all_urls
App is located here
https://www.thept.it/app
and this is the twa manifest
def twaManifest = [
applicationId: 'it.thept',
hostName: 'www.thept.it', // The domain being opened in the TWA.
launchUrl: '/app', // The start path for the TWA. Must be relative to the domain.
name: 'ThePT', // The name shown on the Android Launcher.
themeColor: '#FF6628', // The color used for the status bar.
navigationColor: '#ffffff', // The color used for the navigation bar.
backgroundColor: '#FF6628', // The color used for the splash screen background.
enableNotifications: false, // Set to true to enable notification delegation.
// Add shortcuts for your app here. Every shortcut must include the following fields:
// - name: String that will show up in the shortcut.
// - short_name: Shorter string used if |name| is too long.
// - url: Absolute path of the URL to launch the app with (e.g '/create').
// - icon: Name of the resource in the drawable folder to use as an icon.
shortcuts: [
// Insert shortcuts here, for example:
],
// The duration of fade out animation in milliseconds to be played when removing splash screen.
splashScreenFadeOutDuration: 300
]
The error is
W chromium: [WARNING:digital_asset_links_handler.cc(115)] Statement failure matching package.
But the package name is it.thept.it.thept according to Asset Links Tool
May you help me?

Found the solution, in build.gradle REMOVE
//applicationIdSuffix = twaManifest.applicationId
buildTypes {
release {
minifyEnabled true
//applicationIdSuffix = twaManifest.applicationId <------ this one
versionNameSuffix = twaManifest.name
}
}

Related

How to change operating system cursor with electron

Is it possible to change the operating system cursor with Electronjs?
When I use startDrag, for example, the cursor in macOS is the same as html drag; I wish to change that cursor to a custom one.
provide an icon
If you're talking about the event.sender.startDrag method that exists on incoming IPC messages in the main thread, then you can provide an icon property to that method's argument, like so:
event.sender.startDrag({
file: absPathToFileBeingDragged,
icon: DROP_ICON_PATH
})
Note that the Electron docs for startDrag say MacOS requires that you provide an icon. The docs also say icon can be a path to an image or an instance of NativeImage (which I assume means you can generate a bitmap in RAM and pass its handle without writing that bitmap to disk first).
In context, this might look like:
const DROP_ICON_PATH = Path.join(__dirname, 'custom-drag-out-icon.png')
ipcMain.on('drag-file-out-of-app', ( event, ...dataFromCaller ) => {
// ...do some work to locate or create the file the user will be dragging
event.sender.startDrag({
file: absPathOfFileToBeDragged,
icon: DROP_ICON_PATH
})
})
The above code is lightly modified for clarity from the tutorial on this page.

How to set mouse click as global shortcut in electron app

I want to trigger an action on double right-click of mouse when electron app is running in the background.
I read the documentation and seems like there are no globalshortcuts for mouse events.
Any other way to achieve this? perhaps some node module compatible with electron app?
Unfortunately, we can't achieve that yet.
As MarshallOfSound commented on this official issue
"globalShortcut intercepts the key combination globally and prevents any application from receiving those key events. If you blocked apps from receiving mouse button presses things would break everywhere very quickly šŸ‘"
https://github.com/electron/electron/issues/13964
For macOS, I'm currently using Keyboard Maestro App.
I'm getting my mouse keys with this app and triggering a globalShortcut key combination register in my Electron App.
Maybe for Windows, AHK (auto hot keys)
I found this nice solution for HTML code
<script type = "text/javascript">
const {remote} = require('electron')
const {Menu, MenuItem} = remote
const menu = new Menu()
// Build menu one item at a time, unlike
menu.append(new MenuItem ({
label: 'MenuItem1',
click() {
console.log('item 1 clicked')
}
}))
menu.append(new MenuItem({type: 'separator'}))
menu.append(new MenuItem({label: 'MenuItem2', type: 'checkbox', checked: true}))
menu.append(new MenuItem ({
label: 'MenuItem3',
click() {
console.log('item 3 clicked')
}
}))
// Prevent default action of right click in chromium. Replace with our menu.
window.addEventListener('contextmenu', (e) => {
e.preventDefault()
menu.popup(remote.getCurrentWindow())
}, false)
</script>
Put this as first item in your HTML Body and it should work. At least it worked on my project
EDIT, cause I forgot it: Credits to google for answer on 6th entry

Get the string from selected text/ highlighted text using JXA

I'm supper new here, either Javascript and JXA, so pardon me if I make some stupid questions. But I'm trying to figure out a way to get the string from the highlighted text using JXA - JavaScript for Automation, for Javascript can be recognized in Automator since Yosemite, I thought I can make something work with these:
window.getSelection in:
function getSelectedText() {
if (window.getSelection) {
txt = window.getSelection();
} else if (window.document.getSelection) {
txt =window.document.getSelection();
} else if (window.document.selection) {
txt = window.document.selection.createRange().text;
}
return txt;
}
This code is not mine, somebody posted this. But I've found out that I can't use window or document here in Automator to make change to Mac OS, so can someone show me how to convert this Javascript code into JXA which Automator can understand?
Thanks a lot!
In general, you can use the System Events app to copy and paste with any app.
'use strict';
//--- GET A REF TO CURRENT APP WITH STD ADDITONS ---
var app = Application.currentApplication()
app.includeStandardAdditions = true
var seApp = Application('System Events')
//--- Set the Clipboard so we can test for no selection ---
app.setTheClipboardTo("[NONE]")
//--- Activate the App to COPY the Selection ---
var safariApp = Application("Safari")
safariApp.activate()
delay(0.2) // adjust the delay as needed
//--- Issue the COPY Command ---
seApp.keystroke('c', { using: 'command down' }) // Press āŒ˜C
delay(0.2) // adjust the delay as needed
//--- Get the Text on the Clipboard ---
var clipStr = app.theClipboard()
console.log(clipStr)
//--- Display Alert if NO Selection was Made ---
if (clipStr === "[NONE]") {
var msgStr = "NO Selection was made"
console.log(msgStr)
app.activate()
app.displayAlert(msgStr)
}
For more info see:
Sending Keystrokes in JXA
JXA Resources
You need to mix JXA and Safariā€™s javaScriptā€¦
var Safari = Application("Safari") // get Safari
selection = Safari.doJavaScript("document.getSelection().toString()",{
in: Safari.windows[0].tabs[0] // assume frontmost window and tab
})
The script is in JXA, but the document.getSelection().toString() is Safariā€™s javaScript.
Of course you will need to enable apple events in Safariā€¦ http://osxdaily.com/2011/11/03/enable-the-develop-menu-in-safari/
If you want the selected text from another application, the code might be very different.
Don't do that, it's only applicable to JavaScript embedded inside a web browser. JXA is a standalone JS interpreter that has absolutely no understanding of web pages or DOM (and frankly doesn't have much clue about Mac application scripting either, btw).
Instead, use Automator to create an OS X Service as services can manipulate selected text in almost any OS X app; no application scripting required.

Is it possible to add buttons and control its event to toolbar of inappbrowser using javascript...?

I am developing a Hybrid App for iOS and Android using PhoneGap.Is it possible to add buttons and control its event to toolbar of inappbrowser using javascript.I know how to add it through ios native side but i cant use that process.I need to control the button event through a javascript method.
You have two options to do that.
The first option is, obviously, to patch the native plugin code, and that's it. Here you can find an example made for iOS, you will have to do the same to your Android Java code and for every other platform you want to support.
Another option is to hide the native toolbar and inject HTML and CSS to create a new one when the page is loaded.
Something like this:
// starting inappbrowser...
inAppWindow = window.open(URL_TO_LOAD, '_blank', 'location=no');
// Listen to the events, we need to know when the page is completely loaded
inAppWindow.addEventListener('loadstop', function () {
code = CustomHeader.html();
// Inject your JS code!
inAppWindow.executeScript({
code: code
}, function () {
console.log("injected (callback).");
});
// Inject CSS!
inAppWindow.insertCSS({
code: CustomHeader.css
}, function () {
console.log("CSS inserted!");
});
And you will have obviously to define the CustomHeader object, something like this:
var CustomHeader = {
css: '#customheader { your css here }',
html: function() {
var code = 'var div = document.createElement("div");\
div.id = "customheader";\
// Insert it just after the body tag
if (document.body.firstChild){ document.body.insertBefore(div, document.body.firstChild); } \
else { document.body.appendChild(div); }';
return code;
}
};
I had experience with this problem.
For my case, the second option was enough, not a critical task. Sometimes it takes a lot for the loadstop event to fire, and so you don't see the injected bar for >= 5 seconds.
And you have to pay attention even on the CSS of the loaded page, because obviously you can affect the original CSS, or the original CSS can affect the style of your toolbar.

Highchart export, execute function after completion

I need to do some post-processing work on a png file of a Highchart graph. How do I determine when the export is finished? I've tried to attach a function, but it never gets called:
console.log("Saving chart...");
chart.exportChart({
type : "application/png",
filename: "tmp_chart_filename"
},
function(data) {
console.log("Export done, Data: " + data); // Not called.
})
console.log("Out");
To my understanding, it is not possible out of the box.
What happens internally in the exportChart() method is, a form is created on the fly and the chart svg is sent to the server by programmatically triggering a submit on this form. The server in turn, processes received svg into a png (or whatever you may select) and returns it to the browser.
The popup you see that asks you to "save as" is the action of the browser (and not any highchart code) when a file is thrown at it. Basically the returned png is never returned to the code, it goes directly to the browser.
You can however write your custom svg->png server module and do your magic there :)
I had a rather similar issue and solved it by defining the onclick event on the contextButton. This seems possible only if you are OK with losing the items in the context menu (export by file type), which wasn't an issue in my case. Below the code to be included in the chart initial building:
[... your Highcharts chart setup ...],
exporting: {
buttons: {
contextButton: {
menuItem: null, // You'll lose your menu items here
onclick: function(event) {
yourFunctionBeforeExport();
this.exportChart();
yourFunctionAfterExport();
}
}
}
}
[... rest of the Highcharts chart setup ...]

Resources