I am creating this Chrome-Extension, which when you click a button on the current page, launches a new HTML page with some input fields the user has to complete. The button is being triggered inside the content.js. I was wondering what would be the best/easiest way to retrieve the information the user has input in the HTML form back to the content script/ or override the localStorage variables to be available in the content script after the submit button in the form has been pressed. Any thoughts would be highly appreciated!
As you have no code, this is purely guessing.
Even so, I think chrome.storage.local would be useful.
Here's an example from Google's Website:
function saveChanges() {
// You'd get a value from your form here.
var theValue = textarea.value;
// CCheck there's actually something there
if (!theValue) {
message('ERROR - There's nothing here');
return;
}
// Now use the Chrome Storage API to save the settings
chrome.storage.sync.set({'value': theValue}, function() {
// Success! Let's log a message.
message('Settings saved');
});
}
If you need more help, check out the info page.
Related
I have found on StackOverflow this script that handles the issue when a user wants to leave the page, to ask him before doing it.
ISSUE
It is working fine (even though there is probably a much better solution) but I have realized that it is causing one "bug". When a user sends data from the form and the script asks him does he want to leave the page (because of the redirect) it still sends data. So, even if the user clicks on "Cancel" it will still proceed to the store() method and if the user adds something more and sends again the data I get duplicates. Is there a way to include "stop propagation" in this script?
CODE
window.onbeforeunload = function () {
return 'Are you sure you want to close this website?';
};
Additional question
Since this script is running with the Laravel Livewire, every time I click on any button related to the livewire (which won't redirect the user to the other page) script prompts the popup to ask if the user is sure he wants to leave the page. Is there any workaround (if you need some other code, write a comment because I am not sure which part could help you at all :) ) for this issue?
Try this:
<script>
window.onbeforeunload = function (e) {
e = e || window.event;
// For IE and Firefox prior to version 4
if (e) {
e.returnValue = 'Sure?';
}
// For Safari
return 'Sure?';
};
</script>
Here is a working jsFiddle
I am using this WordPress plugin as a store locator on my website. On pages that do not have the interactive map, I have a form that that acts as a map search form.
In other words, I have a form with a location field. The user enters the location in the field and clicks the search button. When they click the search button, the page redirects to the page with the map and the location field is filled with the location entered on the previous page:
/* This is the search form on the page that does not have the interactive map */
$('#searchonly #wpsl-search-wrap form').submit(function(e){
e.preventDefault();
var loc = $('#searchonly #wpsl-search-wrap form #wpsl-search-input').val();
localStorage.setItem("loc",loc);
window.location.href = "http://localhost/inform/find-a-doc/";
});
/* This is the page with the interactive map */
jQuery(document).ready(function( $ ) {
var loc = localStorage.getItem("loc");
$('#wpsl-search-wrap form #wpsl-search-input').val(loc);
});
I now need the the search button on the page with the interactive map to automatically be clicked (or the form submitted) on page load.
There are a couple of roadblocks. The first is that I am using a WordPress plugin so editing the actual plugin files isn't an option. The second (this might not be a roadblock, I am not sure) is that the plugin is already running some ajax calls on page load. I would assume this means that the form submit button shouldn't be programatically clicked until the initial ajax is complete.
Here are the individual solutions I have tried. Each line break represents a different solution I have tried:
/* #wpsl-search-btn is the submit button for the form */
$(document).ajaxSuccess(function() {
$("#wpsl-search-btn").submit();
});
$(document).ajaxComplete(function() {
$("#wpsl-search-btn").submit();
});
$("#wpsl-search-btn").submit();
$("#wpsl-search-btn").trigger('submit');
None of those solutions are working and I am receiving no js errors in Chrome's inspector.
I'm not sure if this will help but here is the plugin's main js file.
Take a look at $.Deferred()
https://api.jquery.com/category/deferred-object/
You can bind promises that are executed after a request is processed.
I was able to answer my own question. This is the code that solved my problem:
var loc = localStorage.getItem("loc");
$('#wpsl-search-wrap form #wpsl-search-input').val(loc);
function clickBtn() {
$("#wpsl-search-btn").trigger('click');
}
$(document).one('ajaxComplete', function() {
clickBtn();
});
I have a form which is updated by the user through javascript. Indeed, the user can add some fields dynamically. So far, all is working great. Let's say my form has one field. The user add one more time that field. He validates it, he reached a new page with the results of his form but then realizes he did something wrong and go back (e.g. browser previous button).
The form is still displayed with the previous input but only with one field. (the one he added with javascript does not appear anymore) Can I update somehow the cache after the submit of the form so that if the user go back, he can see the same form that he just submitted?
Cheers!
Whenever your code changes the form, you should call a function that stores the current form code in the localStorage. Whenever the page is opened, you should check to see if the localStorage contains that information and, if so, set your form code to the stored code. This doesn't update the browser's cache, but it does store the information on the client side.
$(document).ready(function(){
$("#something").click(function(e){
e.preventDefault();
// do stuff: add form elements, bla bla bla;
updateStorage();
});
$("#clearStorage").click(function(e){
e.preventDefault();
localStorage.removeItem("theUsersPage");
});
function updateStorage(){
var current;
current = $("#container").html();
localStorage.setItem("theUsersPage", current);
}
function loadFromStorage(){
var old = localStorage.theUsersPage;
if(old){
$("#container").html(old);
}
}
loadFromStorage();
});
jsfiddle: http://jsfiddle.net/JjxV8/1/
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.
I looked through the web on submittig forms with jquery/ajax, but I couldnt find my specific problem anywhere. I downloaded a google form and am styling / editing it (in other words, Ihave no control over the server side code and Icannot edit the form action). In the form, I have two radio butons. If one of them iis clicked, I would like the form to submit to google (so I have the results in a google spreadsheet) but I also need it to redirect to a different page (depending on which button was selected). I assume the only way to do this would be with javascript, so I trid various jquery methods, such as
$("button").submit(); but things get complicated because its a downloaded google form. Also, the target is a hidden iframe so it doesnt show the google thank you page. Does anyone have any advice as to how I would go about my problem?
*RESOLVED***
I ended up calling this onSubmit() method on the onsubmit attribute of the form:
<script>
function redirectPage(url )
{
setTimeout(function() {
window.location = url;
}, 500);
}
function submitCheck() {
//check if one of the radio buttons is checked
if(document.getElementById("group_1677476484_1").checked == true) { //
redirectPage("http://redirect1.com");
} else {
redirectPage("http://redirect2.com");
}
}
</script>
The key was adding the setTimeout in the redirectPage method, allowing the page enough time to submit the form before redirecting.