Mozilla Firefox Add-on Android - Page Action not working - javascript

I have been working on this issue for a few hours now and can't seem to find any good sources on how to implement page action on android. Just the same one, Differences_between_desktop_and_Android.
I hooked up my app to the web debugger in firefox get no errors. I tried to manually call some functions and none were defined. I could be doing it wrong, but it works on my PC version of Firefox.
I created some context menu items at the top of my BG script. I'm not sure if that would affect the execution of the script on android.
ReferenceError: browser is not defined[Learn More] debugger eval code:1:1
Below is the code the creates the Page Action which is included in my Background.js.
/* *********** */
/* Page Action */
/* *********** */
const TITLE_APPLY = "Stack Open";
const TITLE_REMOVE = "Stack Closed";
const APPLICABLE_PROTOCOLS = ["http:", "https:"];
/*
Based on the current title, Update the page action's title and icon to reflect its state.
*/
function toggleT(tab) {
function gotTitle(title) {
if (title === TITLE_APPLY) {
console.log(tab.id);
//browser.pageAction.setIcon({tabId: tab.id, path: "pressed.svg"});
browser.pageAction.setTitle({tabId: tab.id, title: TITLE_REMOVE});
} else {
//browser.pageAction.setIcon({tabId: tab.id, path: "nPressed.svg"});
browser.pageAction.setTitle({tabId: tab.id, title: TITLE_APPLY});
}
}
var gettingTitle = browser.pageAction.getTitle({tabId: tab.id});
gettingTitle.then(gotTitle);
}
/*
Returns true only if the URL's protocol is in APPLICABLE_PROTOCOLS.
*/
function protocolIsApplicable(url) {
var anchor = document.createElement('a');
anchor.href = url;
return APPLICABLE_PROTOCOLS.includes(anchor.protocol);
}
/*
Initialize the page action: set icon and title, then show.
Only operates on tabs whose URL's protocol is applicable.
*/
function initializePageAction(tab) {
if (protocolIsApplicable(tab.url)) {
browser.pageAction.setIcon({tabId: tab.id, path: "../books.png"});
browser.pageAction.setTitle({tabId: tab.id, title: TITLE_APPLY});
browser.pageAction.show(tab.id);
}
}
/*
When first loaded, initialize the page action for all tabs.
*/
var gettingAllTabs = browser.tabs.query({currentWindow: true, active: true});
gettingAllTabs.then((tabs) => {
for (let tab of tabs) {
initializePageAction(tab);
}
});
/*
Each time a tab is updated, reset the page action for that tab.
*/
browser.tabs.onUpdated.addListener((id, changeInfo, tab) => {
initializePageAction(tab);
});
/*
Toggle title when the page action is clicked.
*/
browser.pageAction.onClicked.addListener(toggleT);

I read the documentation again, and a couple other pages. Browser action and page action open the default.html in a new tab so there is no need to use page action on Android. Also the context menu items at the top of my BG script were causing the BG script to not work on Android.
-- Problem Solved.

Related

WkWebview javascript animation froze when screen locked

Xcode 12.3 iOS 12.4+ iPhone Application
I have a view controller which contains wkwebview which gets initialized on startup. This is on the framework side. An enclosing app adds this view onto their view controller as a subview. The app is purely HTML and javascript-based app. We render HTML pages based on user interaction. Everything works fine except for an issue with the Lock Screen
On a particular screen, there is some animation running while updating some values on the screen as well. When the app is moved to the background, the app runs fine but when I Lock the Screen and come back to the app, the animation and all processing on the screen are frozen. I would have to start the process back from the home screen.
I noticed that both moving to background and lock screen have the same state changes such as did enter the background and will enter foreground but in one case, everything is frozen. Could someone please let me know what might be the problem and what would be a solution in this scenario?
Thank you.
Edit
This is the animation called on the html page...the screen is expecting some values which is sent from framework once done processing
let showNextItemJS = """
function startNextAnimation() {
var box = document.querySelector('\(boxElement)');
if(box) {
var thisItem = box.querySelector('\(diagnosticItem)');
var statusStr = '\(statusStr)'
if (thisItem) {
thisItem.classList.add('start');
if (statusStr != 'none') {
thisItem.classList.add(statusStr);
}
}
} else {
var thisItem = document.querySelector('\(diagnosticItem)');
var statusStr = '\(statusStr)'
if (thisItem) {
thisItem.classList.add('start');
if (statusStr != 'none') {
thisItem.classList.add(statusStr);
}
}
}
};
function stopLastAnimaation() {
var box = document.querySelector('\(boxElement)');
if(box) {
var lastItem = box.querySelector('\(lastDiagnosticItem)');
if (lastItem) {
lastItem.classList.add('finish');
}
} else {
var lastItem = document.querySelector('\(lastDiagnosticItem)');
if (lastItem) {
lastItem.classList.add('finish');
}
}
};
startNextAnimation()
stopLastAnimaation()
"""
callJavaScript(showNextItemJS)

IntersectionObserver Lazy Loading not Working

This is my first time attempting Lazy Loading, and I wanted to use IntersectionObserver. Got started by following along with this website. I honestly just want the content of the page to wait to load until it is less than 50% of the viewport's width below the viewport. I'm not sure how to observe all content, so I just selected the classes for the widgets that are being displayed, as they are the main content. Unfortunately my code doesn't seem to be doing much. I added a console.log at the beginning to make sure the file was linked correctly, and I tried to add more console.logs to log when the widget moves in and out of the capture area. The first console.log works, but nothing else happens.
Here is what I have:
console.log('file loaded');
const widgets = document.querySelectorAll('.widget');
const config = {
root: null,
rootMargin: '-50px 0px -55% 0px',
threshold: .5
};
let isLeaving = false;
let observer = new IntersectionObserver(function(entries, self) {
entries.forEach(entry => {
if (entry.isIntersecting) {
// we are ENTERING the "capturing frame". Set the flag.
isLeaving = true;
// Do something with entering entry
console.log("Widget loaded.");
self.unobserve(entry.target);
} else if (isLeaving) {
// we are EXITING the "capturing frame"
isLeaving = false;
// Do something with exiting entry
console.log("Widget is exiting.")
}
});
}, config);
widgets.forEach(widget => {
observer.observe(widget);
});
This code is in it's own js file. Where should I be linking it in the HTML file?
I'd appreciate any help I can get! Let me know if I need to provide more information.

Why window.open displays a blank screen in a desktop PWA (looks obfuscated)?

On an installed Desktop PWA, since Chrome 73 (on MacOS) when I do a window.open() on a click event with a regular URL, the page loads fully but the window is blank.
It looks obfuscated but there's no overlay tag of anything visible (everything is OK in the devtools's console and network tabs)
I tried with the default Chrome theme, both with Mojave's dark an light mode.
The HTML markup:
<a href="https://jakearchibald.github.io/svgomg/" data-index="2" data-category="svg" rel="noopener noreferrer" class="data-app-button">
<span class="app-name">SVGOMG</span>
</a>
The JavaScript:
// clicks
document.addEventListener(
"click",
function (event) {
if (event.target.closest("[data-app-index]")) {
let appID = event.target.closest("[data-app-index]").getAttribute("data-app-index");
return openApp(appID);
}
},
false
);
// openApp() - a regular window.open()
const openApp = appID => {
event.preventDefault();
// get app options
let appOptions = State.appList[appID];
appOptions.window = appOptions.window || {};
// merge with defaults
let defaultWindow = State.getDefaultWindow;
let options = Object.assign({}, defaultWindow, appOptions.window);
// center window
options.left = screen.width / 2 - options.width / 2;
options.top = screen.height / 2 - options.height / 2;
// translate to window.open args
let args = [];
for (let [key, val] of Object.entries(options)) args.push(`${key}=${val}`);
args = args.join(",");
// open app
return window.open(appOptions.url, appOptions.name, args);
};
Before updating to Chrome 73 everything worked as expected: the window.open() function displayed the web page correctly.
Now the window opens but nothing is visible.
OK I think I found the solution: I noticed that right after the window was open, the parent window (PWA) got the focus back. So it behaved like a pop-under. As pop-under are a really bad/malicious practice I think Chrome is blocking the child popup window.
So I removed the return statement on the event callback:
// I changed this:
return openApp(appID);
// to this:
openApp(appID);
It seems that the parent window do not steal the focus anymore and the popup content is displayed correctly.

Javascript: Object not accessible after closing parent window

So I have a parent window who is opening itself to a new window (just to remove the status bar, toolbar, others). After closing the parent window, the passed variable return blank string. Sometimes it returns this error message: "The remote server machine does not exist or is unavailable." I really need to access this variable even after closing the parent window. Any suggestions?
var _env = {};
$(window).load(function()
{
/**
*
* If initialization was not yet performed, start the initialization.
* Otherwise, show application.
*
**/
if (window.opener)
{
/* Start transition to the new window */
window.blur();
_env = window.opener._env;
console.log(_env["title"]);
/* Show system */
window.opener.close();
window.focus();
console.log(_env["title"]); // Returns blank
}
else
{
/* Some process manipulating the '_env' variable */
/* .... */
/* .... */
window.open("./index.html", _env["title"], "directories=0, menubar=0, toolbar=0, titlebar=0, resizable=1, width=" + _env["winWidth"] + ", height=" + _env["winHeight"]);
window.focus();
window.open("","_self", ""); // To prevent prompt on closing..
}
});
You can convert the object to JSON, and set window.location.href to it. You can then extract it when you need the data, and there won't be any issues with references because you're creating a new object.

Timeout problem in PopupNotification JavaScript XUL

This code working for me to display the door-hanger popup. But, when I want to use the time-out under the options it wont show up the pop-up notification.
Syntax:
Notification show(browser,id,message,anchorID,mainAction,secondaryActions,options);
My code:
PopupNotifications.show(gBrowser.selectedBrowser, "PDE-popup",
"Hi, there!, You can Build a PaDE by clicking on the PDE button!!",
null, /* anchor ID */
{
label: "Build PDE",
accessKey: "D",
callback: function() {
if(nodeSRC!=null) pde.emptyNodeSRC(nodeSRC);
window.openDialog("chrome://PDE/content/PDEBuilder.xul", "hello", "chrome,width=400,height=360",userContent, nodeSRC);
}
},null, { timeout: Date.now() + 10000,
persistWhileVisible: false });
1.What's wrong with this code?
2. How can I place this door hanger popup to be displayed on my tool bar button?
This is the tool bar button
<toolbarbutton id="pde-toolbar-button" label="Detect"/>
I want to disappear the pop-up notification in 10Seconds! Thank u guys.
I have no secondary options so, I made it null but the time-out is not functioning.
http://scenari-platform.org/svn/dev-core/trunk/Lib_XulRunner/Darwin/modules/PopupNotifications.jsm
https://developer.mozilla.org/en/JavaScript_code_modules/PopupNotifications.jsm#Notification_events
Components.utils.import('resource://app/modules/PopupNotifications.jsm');
var notify = new PopupNotifications(gBrowser,
document.getElementById("notification-popup"),
document.getElementById("notification-popup-box"));
var notification = notify.show(
gBrowser.selectedBrowser, /*browser*/
"PDES-popup", /*id*/
"Hi, there!, You can Build a PDE by clicking on the PDE button!!",/*message*/
null, /* anchor ID */
/* mainAction */
{
label: "Build PDE",
accessKey: "D",
callback: function() {
if(nodeSRC!=null) pde.emptyNodeSRC(nodeSRC);
window.openDialog("chrome://PDE/content/PDESBuilder.xul", "hello", "chrome,width=400,height=360",userContent, nodeSRC);
}
},
null, /* secondaryActions*/
{ blablal:'options'}
);
setTimeout(function(){
notification.remove();
}, 900);
The above code works fine, finally got a clear explanation from other forum for my problem.

Categories

Resources