I am making an autofill extension. On the options page, the user enters info such as name & email. Then it is saved to the localStorage. Now, what I would like to do is have the value of one of the keys in the localStorage to be the text inputted in a textbox on a specific page. I assume you do this by using a background page. How would I go about doing this? Is there a better way of doing this?
You shouldn't need a background page. The easiest way is to use chrome.storage instead of localStorage to save the options. You can then access the information from a content script, which is the only way to access and modify the DOM of a web page.
On the page you want to show it
function LoadText(){
var name = window.localStorage.getItem("name");//name
var email = window.localStorage.getItem("email");//name
$('#myname').val(name);
$('#myemail').val(email);
}
Call the function and it will load
Related
I am using jquery to fetch inner html value of a div in home page, and I want this value to be accessible in all pages. The problem i'm facing is that the div from which i'm getting the value is present only in home page, so when the script runs in other page, the value will be undefined as the div is not present.
The issue is, they are displaying a message in bottom of home page and we want it to be displayed in top part of all pages. so I used jquery to extract the text content and display it in top part, but when we go to other pages, the script fails as the bottom of that page wont have the message.
store it in a local storage:
localStorage.setItem('myItem', myValue);
and then you could Access this item on all pages
var item = localStorage.getItem('myItem');
https://developer.mozilla.org/de/docs/Web/API/Window/localStorage
You can use web storage objects like: sessionStorage or localStorage,
but be careful with the data you store, which determines which method to use.
Data in sessionStorage is cleared when the page session ends.
Data stored in localStorage has no expiration time.
You can use Window localStorage Property as solution to your problem. Another option is sessionStorage. It depends what you trying to achieve. Look at the definition for both of them and use appropriate.
I have a few divs on a form that are hidden by default (style="display:none;"). When the user clicks a certain radio button, an onclick event executes and exposes the divs. The user is then taken to a review page upon form submit that shows him any errors. If there are any, he clicks the BACK button on his browser to go back to the form and correct them. Caching is enabled so that all of his form contents are there. The problem is, since the form is looking for an onclick event, all of the previously exposed divs are hidden again. Is there any way to make sure they stay exposed when the user clicks back to the form from the review page? I thought a document.ready function would do it, but no joy.
As Yair mentioned, you can use cookies. It cannot be done with pure JS. However, you can also use PHP.
Before the user is transferred to the second page, have JS scan the divs in question, and find which ones are visible. (I'm assuming they all have individual IDs). Store these IDs in a comma-delimited string, or array, and send it as a _POST or _GET to the new page.
Have PHP store it as a hidden value somewhere. You could use a hidden input, or a data-x on something ... as long as it's there.
Have JS on that page that watches for the back click, stops it, and then redirects the user to the previous page, and sends the string or array back to it. Have PHP on that page print it as a JS value, and have JS on pageload show all divs with matching IDs.
Cookies or localStorage if you aim for only modern browsers:
localStorage
Is there any way to make sure they stay exposed when the user clicks
back to the form from the review page? I thought a document.ready
function would do it, but no joy.
You can use cookies in order to manage state in a web-browser. Cookies will help you save the desired user's state.
All javascript code is reinitialized on browser reload. You cannot identify whether the user comes back through the browser.
You can use cookies or local storage to save a value when initial display happens and show/hide the div later on document.ready.
I'd like to help the visitors to my site to fill out a form on the other site (beyond control) using the data, generated on my site.
It would be possible to use a bookmarklet to post the data to the form while the user is on my site, but the form is some clicks behind the authentication. Considering that a bookmarklet may read only what's been stored (cookie, session, storage) while on the current site, it is not possible to use the bookmarklet on the other site to fill out the form with data, stored while on my site.
Please, suggest any javascript, client-side solutions of this. Like a bookmarklet or something similar.
Thank you.
With a bookmarklet I'd say you're on the right track, but use a dynamic one. e.g:
function makeBookmarklet(){
var elt=document.createElement('a');
var hrefString='';
for(var k=0;k<arguments.length;k++){
hrefString+=' document.getElementById("'+arguments[k].id+'").value="'+arguments[k].value+'";';
}
elt.href=hrefString;
return elt;
}
And then you would call that function, and each argument should be an object with an id and value attribute. The id should be the id of the field to automatically fill out. value should be the value to insert into that field. It returns an element, so put it somewhere in the document and tell the user to drag it into the bookmarks bar, and click it on the other site. Just to make it clearer, you would call it like this:
aElt=makeBookmarklet({id:'username',value:document.getElementById('username').value},{id:'othercrap',value:'fixedvalue'});
I have editor that I can get it's code with js in my page and user can write his html code in it. I want show current user's html code in new window without saving the code in database or something else. How can I do that?
hi why dont you store your values in html5 storage objects such as sessionStorage/localStorage, visit Html5 Storage Doc to get more details. using this you can store intermediate values temporaryly/permanently locally and then access your values
for storing values for a session
sessionStorage.getItem('label')
sessionStorage.setItem('value', 'label')
or store values permanently using
localStorage.getItem('label')
localStorage.setItem('value', 'label')
So you can store (temporarily) form data between multiple pages using html5 storage objects
YOu can use the sessionstorage object to store the user's code temporarily for a session and get it on next page using above syntax
Follow steps below :
On the preview page, place an IFRAME.
From the first page, where user inputs HTML, set a session variable.
On click of some button on first page, set the session and redirect to preview page.
The preview page is supposed to fetch the session value and display it inside the IFRAME
This might help you:
JSBin Demo
I have my own website. There is a link on my website which redirect me to the externel website. I want to know how to set value in textbox in that externel website when user click link on my website
Have you tried to save opened window handler?
var openedWindow = window.open(....
Instead of using direct links.
Or maybe pass parameters through url?
you can add parameters on the URL.
just modify the link accordingly, and read the URL parameter on the other site.
(this assumes you don't care the possibility that someone fills the parameters with fake info)
Unless that site has implemented something to let you set that (e.g. if they populate the text field using data from the query string), you can't.
There is no standard mechanism for pre-populating forms via a link to the page containing the form.