I am trying to create one chrome extension with content script interaction. I am facing one problem in the browser action scenario. I have tried to search the solution in the google but vain.
Here is the scenario.
I want two different action when click on the chrome extension icon (browser action). If i have some key stored in local storage, i need to send a message to content script else i need to show popup.
Say for an example, if suppose i am trying to validate whether user is logged in gmail or not. At first time if user didn't logged in i need to show popup with message "please log in" when click on the extension icon. If user already logged in then i will store it in local storage, so if user click again in the icon instead of showing popup need to contact content script.
Please suggest.
EDIT : UPDATING MY CODE HERE
in background.js. (problem is it is not going into the else part. always its showing popup eventhough it has local storage value)
if(localStorage.accessToken=="" || localStorage.accessToken==undefined){
chrome.browserAction.setPopup({
popup : "popup.html"
})
}else{
chrome.browserAction.onClicked.addListener(function(e){
chrome.tabs.query({active: true, currentWindow: true},function(tabs)
{
chrome.tabs.sendMessage(tabs[0].id,{accesskey:localStorage.accessToken},function(response) {});
});
})
console.log('already logged in')
}
The browserAction.onClicked event does not fire when it already has a popup.
It's not entirely clear what you need help with here so I'm guessing based on the wording of your question that you need help with either logic or localStorage.
I don't know a ton about events on the chrome extension icon, but assuming that you can get that event your code ought to look something like the following:
// this code goes inside your icon click handler
if (localStorage.loggedIn === 'loggedIn') {
// do whatever action you want to happen if the user is logged in
} else {
if (/* check to see if logged in goes here*/) {
// user is logged in so store value so you don't have to check again
localStorage.loggedIn = 'loggedIn';
} else {
localStorage.clear('loggedIn');
alert("Please login to gmail first")
}
}
Of course, this code does what you asked, but it doesn't handle the case where the user clicks on the button, was logged in, then logs out at some future point and clicks the button again. The localStorage value wouldn't have been reset in that case, unless you do it elsewhere.
Related
I am trying to get values saved in localStorage so that they can persist when the user comes back to the site. Here is what I have:
function saveConfirmation() {
if (confirm("Are you sure you want to exit? Progress will be saved.")) {
localStorage.setItem("count", String(count))
}
}
function saveBeforeUnload() {
setTimeout(saveConfirmation, 0)
return "You have unsaved changes"
}
window.onbeforeunload = saveBeforeUnload
When I click out of the tab, Chrome gives a popup asking if I want to leave the page. When I say yes, my other dialogue comes up right as it closes so I can't interact with it. If I say no, my other dialogue comes up and doesn't close when I confirm.
How do I get it to where it either:
Saves when I confirm the popup from Chrome or
Gets rid of the Chrome popup and save and exit when I confirm my popup?
Configured our app to support Add to home screen option, to ask for permission we added one button, onclick the prompt will ask to add the icon in home screen. If the user keep clicking close, then it wont ask further, so the button becomes non-functional.
If the user already added icon, i didn't get any method to find it.
There isn't any method best known to me to capture whether the app icon has been added to home screen or not. Simple reason for that could be absence of any valid existing use case. However, what you can capture is the action taken by the user. When the A2HS banner is shown, you can tap into the beforeinstallprompt event to determine the choice made by the user when presented with the banner.
The code below shows this in action:
window.addEventListener('beforeinstallprompt', function(event) {
event.userChoice.then(function(result) {
if(result.outcome == 'dismissed') {
// User dismissed
}
else {
// User accepted
}
});
});
UPDATE:
While going through the official doc for A2HS, found a way to determine if the app was successfully added to the users home screen after they accepted the prompt, you can listen for the appinstalled event. Code:
window.addEventListener('appinstalled', (evt) => {
app.logEvent('a2hs', 'installed');
});
appinstalled does not work
window.addEventListener('appinstalled', (evt) => {
app.logEvent('a2hs', 'installed');
});
If you want to know the users geolocation in a web browser you have to use the html 5 api. When calling the function:
navigator.geolocation.getCurrentPosition(success)
a dialog pops up, asking the user if he want to share the location or not. My question is, is it possible to know when the user clicked confirmed. I want to display a loading spinner on a html page after the user has clicked the confirm button. (To get the location can take some time on a mobile, and i don't want the spinner to show before he has pressed the confirm button, as he can get confused )
Have you tried this code? You can add Callback functions, and within them handle user responses.
navigator.geolocation.getCurrentPosition(successCallback, errorCallback {maximumAge:600000});
function successCallback(position) {
// Handle Confirm button hit
}
function errorCallback(error) {
// Other
}
navigator.geolocation.watchPosition(function(position) {
//Succes Code
},
function (error) {
if (error.code == error.PERMISSION_DENIED)
//Code when permission is not granted
});
I am not sure, that mobile will respond well to this, but it works on PC.
No you can't. when your geolocation code executes, the request goes to browser and then browser asks to user for confirmation. If user accepts, then the request goes forward else it will drop. so you will not get any confirmation whether user clicked on accept button or not. but you will get whether user denied or not by using error PERMISSION_DENIED
The situation: I have a Grails webpage with two tables. One table displays a persons information (including certain flags), and the second table has a list of flags with an "add button" that allows the user to add a given flag to themselves.
Now, there is a save button that, when clicked, pushes the current "state" of the users flags to our database. So I want to be able to display a prompt if there is unsaved information being displayed when a user tries to navigate to another part of the site. This is easy enough by using an existing isDirty boolean that each flag stores. I can just loop through the persons active flags and check if it is dirty or not. If the person contains at least 1 dirty flag, I need to display a prompt if they try to leave, because that data won't be saved unless they explicitly hit the button.
The problem: There are many ways to navigate away from this page. I am using
<body onbeforeunload="checkForDirtyFlags();">, where checkForDirtyFlags() is a basic js function to check for any dirty flags. But here's the thing - when a user adds or removes a flag, that causes a page reload because the way the page is setup is to redirect to a url like this:
"http://my.url/addFlag/123456"
The controller then knows to add the flag with id 123456 to the current person. This does NOT change where the person is in the website however, because the same page is still rendered (it just contains updated tables). So basically, when I see a URL with addFlag or removeFlag, I do not want to prompt the user if they are sure they want to navigate away from the page, because in the eyes of the user they are not leaving the page.
The question: Is there any way to determine what the target is during an onbeforeunload? So that I can have something like this in my javascript:
function checkForDirtyFlag() {
if( justAdding ) { //We are just adding a flag. No prompt necessary
//Don't do anything
}
else if( justRemoving ) { //We are just removing a flag. No prompt necessary
//Don't do anything
}
else { // In this case, we want to prompt them to save before leaving
alert('You have unsaved data on the page. Leaving now will lose that data. Are you sure you want to leave?');
}
}
If any of this isn't clear, please let me know and I'll try and clear it up.
Thanks!
I don't think you can get the target location in unload event. What I'd do is bind the save/submit button to a function that disables the unload event if the button is pressed, therefore disabling the prompt. If the user tries to leave by pressing back etc, the unload event would fire.
Why don't you push the changes immediately to the database, without them having to press the Save Button, or store them in a temporary database so that they do not lose their unsaved changes when the navigate to a different part of the site.
I'm not quite sure if I get you right - but you actually wrote the solution already down there. Why don't you just return a string-message from within an onbeforeunload when necessary ?
For instance:
window.onbeforeunload = function() {
if( justAdding ) { //We are just adding a flag. No prompt necessary
//Don't do anything
}
else if( justRemoving ) { //We are just removing a flag. No prompt necessary
//Don't do anything
}
else { // In this case, we want to prompt them to save before leaving
return 'You have unsaved data on the page. Leaving now will lose that data. Are you sure you want to leave?';
}
};
If you return a string value from that event, the browser will take care of a modal dialog window which shows up. Otherwise nothing happens.
I have my fb login button created as so
<fb:login-button perms="email" size="small" onlogin="check_login_session()">Sign Up Using Facebook</fb:login-button>
I have also defined the check_login_session function already as I'm using it on a .click link elsewhere on the page(which does work). However, my problem is when I'm already logged in to FB and I click the button, the FB popup appears, then dissapears and it does nothing. The onlogin is not called nor is any error displayed.
If I was to logout however, and then click the button, it would give me the fb login prompt, and after filled out and submitted would behave as it is supposed to. It's only when I'm already logged in and I click the FB login button that the issue occurs. Any Ideas?
Edit: I found that it does call it if I say put alert("Test") in the onlogin but any function I define on the page and try to call it returns saying it's not defined.
I think you want to be notified about a logged in user either after a login happened or of a user comes to teh page and is already logged in. In this case you have to subscribe to the auth event and handle it:
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
//yourcode
} else if (response.status === 'not_authorized') {
//your code
} else {
//yourcode
}
});
The new facebook login flow says to only display the facebook login button if the user is not currently logged into facebook. If you display it anyway, nothing will happen when they click on it because it will detect that the user is already logged into facebook and so will exit the login process and the post login hook won't be called. The facebook documentation says to first detect whether the user is already logged into facebook, and if they are logged in, grab the facebook uid and simply execute the function you would have called as part of the post login hook. The facebook login button is simply that--a button to log into facebook and not a button to log into your site.
The event says onlogin, so it will only execute when you login through Facebook Connect.
If you are already logged in on Facebook Connect, then the function won't execute because you're already logged in...?
Most likely the function you're trying to call isn't accessible on that page even though you think it should be. Make sure you removed the () after the function's name. The fact that "alert" does work but your function doesn't kind of proves that. Make sure your function can be accessed by the script by making it global and ensuring your script is loaded.
The function has to be defined on the window. The solution is:
// somewhere before the button is rendered
window.loginCallback = () => {
// callback logic
}
<div
className="fb-login-button"
data-max-rows="1"
data-size="large"
data-button-type="continue_with"
data-onlogin="loginCallback();"
></div>