Develop Reference

With offline file:/// protocol, I'm trying to store data in local storage through an iframe. How can I make this work, or is there a better way?

Background
In our company, we install our offline documentation topics (thousands of .htm files in a folder) on our users' computers. Users view our documentation offline through their browser using the file:/// protocol.
I have a banner that appears in the footer of each .htm file that asks users to decide whether we can track user analytics (via Application Insights). Once they make their choice, we don't show the banner.
My Goal and Overall Problem
My goal is to store their choice in the browser's local storage. I can do that just fine, but the problem is this:
These are offline .htm files. There is no website domain. So, the key and value for any local storage is stored only for the .htm file they are on at the time they make their choice. If they come back to a topic they made their choice on, then yes, my script can retrieve their choice. But if they navigate to another topic in our documentation system (another .htm file), the local storage key and value don't persist to those other topics, and my script doesn't know what they chose--so then the banner pops up again.
My Workaround Idea
I doubt this is the best approach, but not having a lot of experience and not knowing what else to try, necessity becomes the mother of invention.
Here's what I'm trying:
Have my local storage requests go through a single .htm file called storage.htm, thereby getting around the above problem by always having a single point of contact (storage.htm) with the local storage.
storage.htm loads via a blank iframe.
The iframe is tacked onto each .htm topic.
When a topic .htm loads, the iframe also loads and any functions inside it become (hopefully) available for use by my main script.
When users click on the banner, I send the choice as query parameters through my main script to the iframe's src.
storage.htm contains a parseQuery() function, and inside that function, it parses any query params and then does the actual localStorage.getValue(key) and localStorage.setValue(key,value) requests.
I then want to somehow force the iframe to refresh with those parameters and then call the parseQuery() function there from my main script.
My Code
From my main script:
Attempt 1:
I've tried the top-voted item from this thread,
How to check if iframe is loaded or it has a content?
but I get stuck inside the checkIfFrameLoaded() function, and it continues to loop through the check to see if the iframe is loaded. It never loads. I think it's because the contentWindow and/or contentDocument don't work with my offline files, so I won't bore you with that code.
Attempt 2:
This is what I'd like to do as it seems cleaner:
function doIframeStorage(type,key,value){
// We get a handle on the iframe's id of 'storage'.
let storage = document.querySelector('#storage');
const src = storage.getAttribute('src');
let query = src;
if (type==='get'){
query = src + `?type=${type}&key=${key}`;
} else if (type==='set'){
query = src + `?type=${type}&key=${key}&value=${value}`;
}
storage.src = query;
storage.addEventListener('load', (e) => parseQuery());
}
But I'm running into a problem where my parseQuery() function (from storage.htm) is always undefined:
Uncaught ReferenceError: parseQuery is not defined
Is it possible to load and access my parseQuery() function from my main script like I'm doing? If so, how? I thought the addEventListener would ensure it was loaded and therefore the parseQuery() function would then be available.
Or Is there a better way to do what I'm attempting?

Chrome Extension Local Storage Accessing From Multiple Places

My extension has a content script that captures some info from certain pages and saves them into local storage using the following:
localStorage[myVarName] = value;
If I put the following into my content script, I have no problem retrieving the stored values:
myGottenVariable = localStorage[myVarName];
Elsewhere, my extension creates a new window using
chrome.windows.create({url:LocalURL}}
The newly created window is the main UI for my extension. One of the things I want it to do is retrieve the stored value at "myVarName." However, it is undefined.
I assume that this has to do with how the localstorage is organized. I have an intuition that each extension has its own storage space for local storage and that the created window lacks access to the content script's storage space.
This intuition is confirmed by the fact that I have tried storing content locally from the newly created window, and it has no problem retrieving that content.
My question is, what is the simplest method of achieving my desired result? I get tripped up pretty quickly when dealing with a lot of the chrome extension API stuff: so the ideal option would be as clean and simple as possible. That's why I liked the syntax of:
localStorage[myVarName] = value;
Is there some simple way of modifying this to allow easy access to the desired content? Are both pages actually in the same storage space, but at different places in that directory?

localStorage is isolated per domain, which means if the new window has different domain from the domain where you saved data, you won't get what you saved.
To achieve what you want, you could use chrome.storage. The chrome.storage is shared by background page/content scripts. For your case, you could save data in content scripts and retrieve it in the created window (via content scripts).
chrome.storage.local.set({ key: value });
chrome.storage.local.get(key, function (result) {
console.log(result.key);
});

Get page source of external URL and manipulate with javascript/jquery

I'd like to somehow get the page source of an external URL, and with that, be able to get the contents of an h1 element.
For example, this is the logic:
var url = "http://example.com";
var src = // page src of url
// instead of document, it would use the variable src
var headerText = document.getElementsByTagName("h1")[0].innerHTML;
alert(headerText);
I know I can get stuff with curl/php, but have heard larger sites will cause server strain. I'd prefer to keep this as efficient as possible. Not really sure where to start.

This cannot be done, by policy.
In Web pages, JavaScript (and client-side scripts in general) aren't allowed to access raw external resources from a different domain, in general.
The closest you're going to get is using AJAX (jQuery helps) to access a resource, but you (in general) need to be requesting a URL under the same domain.

How to create localStorage for the same domain with www. at the same time or at the next visit?

I have created a JS file that I place in some webpages other than mine.
So mine is domain-1.com and I place this to domain-2.com and domain-3.com
This JS contains jsonp and I save some data from their pages to my database successfully. Also, I create some cookies and I save a value to the localstorage. the problem is that when a visitor goes to domain-2.com and tomorrow to www.domain-2.com they will have a different value because os the www.
I want this value to be the same across www. or not, maybe at the same time, I do not know an applicable idea. It is better for me to pass the value the same time for www. and without www.
How to do this?
I only provide them with a JS external link. It is ok If I place an iframe also.

The best solution would be to set a redirect to either of the domains so you can avoid this problem altogether.
The following code shows the concept of sending values to the non-www domain for storage only. If you need to read those values from the www domain too or want a library to do everything for you, you should use one of the libraries listed at the end. Those libraries use the same concept but will handle most things for you.
You can store the value on one domain only and use cross-origin communication to send the value if you are on the www domain. Create an iframe that loads a script of the non-www domain. In this script you save the value in the local storage of that domain.
Here is the content of the iframe with some minimal html5 markup, in this example saved as storage.html and served from example.com.
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title> </title>
<script>
window.addEventListener("message", storeItem, false);
function storeItem(event) {
if (!(event.origin == "http://example.com" || event.origin == "http://www.example.com")) {
return;
}
localStorage.setItem(event.data.key, event.data.value);
}
</script>
</head></html>
When you want to store data use postMessage to communicate with the iframe. The iframe needs to be loaded before you can send messages.
<iframe id="storageScriptFrame"></iframe>
<script>
var target = "http://example.com";
var storageScriptFrame = document.getElementById("storageScriptFrame");
var storageScriptWindow = storageScriptFrame.contentWindow;
function storeItem(key, value) {
var message = {key: key, value: value};
storageScriptWindow.postMessage(message, target);
}
// you can store values after the iframe has loaded
storageScriptFrame.onload = function() {
storeItem("foo", "bar");
};
// replace this with actual page
storageScriptFrame.src = 'http://example.com/storage.html';
</script>
Make sure to replace the example.com domain with the actual domain. Checking the origin domain is important so other sites can't send you messages.
At some point you will also want to read those stored values. Depending on what you do with the stored values, you have two options.
If you don't need to interact with the main window, you can move the script that reads values into the iframe.
If you do need to get the value on the main window, use postMessage again to send values back.
The second option can get complicated though, because postMessage is asynchronous and only works one way. I would recommend to use an existing library to do this (you don't need the code above then).
Cross Domain Local Storage looks good and easy to use
localStorage-tools is another library for this task
For example if you Cross Domain Local Storage you simply need to follow the setup instructions and in the initCallback function you can call xdLocalStorage.getItem and xdLocalStorage.setItem to get and set items from the localstorage of example.com.

URL Redirection

I am trying to achieve something like, that is on the below link.
http://www.laterooms.com/
This website is at the above URL.
But even if you type .co.uk or
.net or
.org Like this any Extension. The URL will be automatically redirected to
http://www.laterooms.com/

First of all, you should be in possession of the other domains (with the extensions you want). Then you can either use javascript to set top.location.href='http://your.address.com/' or use other means, like setting up your web server to redirect the requests, or your domain name registrar.

You can either use different techniques on server side to force a redirect, or you can send a page containing a redirect Refresh: 0; url=http://www.example.com/
Wikipedia has a good overview on this.
<head>
<meta http-equiv="refresh" content="5; URL=http://de.selfhtml.org/">
</head>

If you own/have possession of those other domains..
You could set forwarding (dns settings) for each of the domains you wish to redirect to the primary domain.
That would get you away from having to code a page for each one of those domains.
Much cleaner, and easier.

Assuming you own all the domains, and they all point to the same webserver, then this code should do it;
var href_parts = top.location.href.split('/');
if (href_parts[2] != 'www.laterooms.com') {
href_parts[2] = 'www.laterooms.com';
top.location.href = href_parts.join('/');
}
Basically -- have javascript test what domain you currently are on, and if not on the .com then update the URL and store it back into the location.href for the page which will automatically trigger a page-reload with the new URL.
The above code preserve the URL path within the domain, so if somebody types in
http://www.lateroom.co.uk/mypath/here
will redirect to
http://www.lateroom.com/mypath/here
If you don't want to preserve the path /mypath/here then the code will be sligthly simpler as you can just hardcode the destination path rather than using the join