Are there any windows software that i can use that can connect with my website via API where there is a customizable feature for desktop notifications?
Alternatively, are there any hacks i can use to make the width of the chrome desktop notification larger?
I tried using html but this just prints as a string.
function notifyMe() {
if (!Notification) {
alert('Notifications are supported in modern versions of Chrome, Firefox, Opera and Firefox.');
return;
}
if (Notification.permission !== "granted")
Notification.requestPermission();
var notification = new Notification('Notification title', {
icon: 'http://www.metoffice.gov.uk/media/image/j/i/Cumulus_2.jpg',
body: "<div style='width:700px'>You've been notified!</div>",
});
notification.onclick = function () {
window.open("http://www.google.com");
};
}
Any suggestions.. i want a customizable size notification?
You can't change the size of Chrome-provided notifications.
You can use an extension + Native Messaging to pass something to a native application of your choice (maybe through a "proxy" script, as Native Messaging is limited).
Related
I am trying to develop a simple web extension/addon under Safari, which is using the tabs onUpdated event. I used the Safari XCRUN converter: https://developer.apple.com/documentation/safariservices/safari_web_extensions/converting_a_web_extension_for_safari
What I am trying to do is :
Open new tab on Google Scholar with set prefs params, from "options.js" script (Options page code below)
Listen for this tab to be updated and ready (e.g. tab status is complete)
Then, inject a content script that will simulate the user click on save button (i.e. on GScholar page)
Then remove the listener, and wait 1,5s (for GS tab to reload and finish saving) in order to finally close this tab.
// Detect browser language
const gsUrl = currentBrowser.i18n.getUILanguage().includes("fr")
? GSCHOLAR_SET_PREFS_FR_URL
: GSCHOLAR_SET_PREFS_COM_URL;
// Listener to detect when the GS tab has finished loading
const gsTabListener = (tabId, changeInfo, tabInfo) => {
if (changeInfo.url && changeInfo.url.startsWith(GSCHOLAR_HOST)) {
currentBrowser.tabs.executeScript(
tabId,
{
code: `document.getElementsByName("save")[0].click();`,
},
() => {
currentBrowser.tabs.onUpdated.removeListener(gsTabListener);
setTimeout(() => currentBrowser.tabs.remove(tabId), 1500);
}
);
}
};
currentBrowser.tabs.onUpdated.addListener(gsTabListener); // Add tab listener
currentBrowser.tabs.create({
url: `${gsUrl}?inst=${gScholarInstIdList.join("&inst=")}&save=#2`,
active: false,
}); // Open GS tab according to browser language
The problem is that it works well on Chrome/Edge/Firefox (on MacOS), but not on Safari : the GS tab is opended but isn't closed and nothing happens :-/
PS:
It seems tabs onUpdated event is well supported on Safari according to MDN.
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/onUpdated
I have also tried webNavigation onCompleted event, but same !
Developing on : MacBookAir under MacOS Monterey 12.4, Safari 15.4 (17613.2.7.18), XCode 13.3.1 (13E500a), extension is bundled with Webpack 5.68.0 (e.g. building all assets files).
I really don't see what I am doing wrong and why wouldn't this tab event be intercepted ?
Thanks for your feedback.
After debugging I finally sloved this by noticing that in fact the events were triggered, but missed because of the availability and values of parameters passed into callabck (changeInfo, details) depending on the browser we're on.
So I switched from onUpdated to webNavigation.onCompleted API, which is better suited to our need (tab page fully loaded) and whose parameter is simple and consistent across browsers :-)
const uiLanguage = currentBrowser.i18n.getUILanguage().includes("fr")
? "fr"
: "com"; // Detect browser language
const gsUrl = `${GSCHOLAR_SETTINGS_HOST}.${uiLanguage}`;
// Listener to detect when the GS tab has finished loading
const gsTabListener = (details) => {
if (details && details.url && details.tabId) {
if (details.url.startsWith(`${gsUrl}/scholar_settings?`)) {
currentBrowser.tabs.executeScript(details.tabId, {
code: `document.getElementsByName("save")[0].click();`,
});
} else if (details.url.startsWith(`${gsUrl}/scholar?`)) {
currentBrowser.webNavigation.onCompleted.removeListener(
gsTabListener
);
currentBrowser.tabs.remove(details.tabId);
}
}
};
currentBrowser.webNavigation.onCompleted.addListener(gsTabListener); // Add GS tab listener
currentBrowser.tabs.create({
url: `${gsUrl}/scholar_settings?inst=${gScholarInstIdList.join(
"&inst="
)}&save=#2`,
active: false,
}); // Open GS tab according to browser language
I am developing a web hosting app for the LG/TV WebOS.
I know that the web hosting app is basically running inside a browser engine (webkit?).
When the user is about to make the payment (I am using Paypal because I don't like PaymentWall), the app directs the user to the paypal confirmation page where there is no mean for the user to click on the CORFIRM PURCHASE button. I don't see the "mouse" cursor and there is no documentation I could find about the theme.
So, I was thinking if I could launch that payment page on the tv's browser.
That browser has a cursor that moves when I click the arrows.
Any way to do that? To launch an URL from the app into the television browser? or to make the cursor appear inside the app?
I used this approach.
openLink(url: string): void {
webOS.service.request("luna://com.webos.applicationManager", {
method: "launch",
parameters: {
id: "com.webos.app.browser",
params: {
target: url,
},
},
onSuccess: (res: any): void => {
console.log("Browser open success. ", res);
},
onFailure: (res: any): void => {
console.log("Browser open fail. ", res);
},
});
}
It requires webOS.js or webOSTV.js library.
Personally, I use the following library to enhance navigation for web based applications.
https://github.com/luke-chang/js-spatial-navigation
It creates fluid navigation between UI elements using just the arrow buttons.
The user experience is basically identical to that of native applications like Netflix.
Hi I am new to nativescript and i am trying to select video files, i was trying to use nativescript-mediafilepicker, it successfully opens the folders but i am not sure how to select a file using the same programatically.
let mediafilepicker = new Mediafilepicker();
mediafilepicker.openImagePicker(options);
mediafilepicker.on("getFiles", function (res) {
let results = res.object.get('results');
console.dir(results);
})
mediafilepicker.on("error", function (res) {
let msg = res.object.get('msg');
console.log(msg);
});
mediafilepicker.on("cancel", function (res) {
let msg = res.object.get('msg');
console.log(msg);
});
Thanks in advance
You won't have any control on the selection UI / videos as it will be a system or third party app that was opened through Intent, which is totally outside your app context.
If you like more control over every user action in picker UI, then you will probably have to build one yourself. There are few open source iOS / Android libraries that may probably support this feature, you can extend them to NativeScript if you are familiar with plugins architecture.
I'm crawling about 20 Web sites in the background, when a page loads, within the addon script, with the page-worker. Unfortunately the browser freezes, unpredictable during that time.
I tried to use timers.setTimeout(..., 0-400ms) and also tried the example from the wiki
function executeSoon(aFunc) {
var tm = Cc["#mozilla.org/thread-manager;1"]
.getService(Ci.nsIThreadManager);
tm.mainThread.dispatch({
run: function () {
aFunc();
}
}, Ci.nsIThread.DISPATCH_NORMAL);
}
but this also freezes the UI. Is there any other solution?
The crawling code:
...
timer.setTimeout(function () {
let pageWorker = require("sdk/page-worker").Page({
contentScriptFile: self.data.url("js/extractor.js"),
contentURL: url
});
pageWorker.port.on("loaded", function (content) {
if (typeof callback === 'function') {
callback(content);
}
});
}, 200)
...
The extractor.js, even in simpler cases, where it return body.textContent, is blocking.
The page-worker API just creates an invisible page, it does not do so on a background thread since it has to create a complete window/document environment including layout to allow for full dom/styling functionality and layout always happens on the main thread.
If you want to do calculations in the background you should use the Worker or ChromeWorker APIs, in which you won't have access to DOM and many other APIs.
In the SDK you can use
const { ChromeWorker } = require("chrome");
This is because Firefox uses the main thread for page-workers, in Firefox nightly content pages uses separate processes, which means that page-workers will use a separate processes too, so give Firefox Nightly a try, it should work there, and this will be released in a few months.
I found how to show desktop notification with addon builder for firefox. Like in the below code, but how to show HTML custom notification, google chrome extension can show custom Html notification. Is that possible for Firefox, how?
Here's a typical example. When the message is clicked, a string is logged to the console.
var notifications = require("notifications");
notifications.notify({
title: "Jabberwocky",
text: "'Twas brillig, and the slithy toves",
data: "did gyre and gimble in the wabe",
onClick: function (data) {
console.log(data);
// console.log(this.data) would produce the same result.
}
});
This one displays an icon that's stored in the add-on's data directory. (See the self module documentation for more information.)
var notifications = require("notifications");
var self = require("self");
var myIconURL = self.data.url("myIcon.png");
notifications.notify({
text: "I have an icon!",
iconURL: myIconURL
});
It looks like you've found the current documentation:
https://addons.mozilla.org/en-US/developers/docs/sdk/latest/modules/sdk/notifications.html
As stated there, (sorry) HTML content in notifications is not supported in the Add-on SDK.