Read local .json from local .js without repos - javascript

I'm trying to write a chrome-extension that closes tabs when they're loaded and their links contain specific keywords, which I've saved in a .json file. Because the content.js has no access on the browser peripherals, I had to use the background.js script to close the tab. So far the extension does all that except loading the data from the .json, which means that I had to write the json (just for testing) into the background.js. Because I want to ban a lot of links this is'nt an option for me. So I decided on storing a list with the links in a .json file, which is stored in the same folder as the background.js, which means that it's on the localhost and not on any kink of webserver. That means that it should be possible to access this file, because after my research, I came to the assumption that the background.js runs on the localhost as well. So there should'nt occur any file accessing limitation issues right?
Unfortuantely I've got no idea how to write this in pure .js, because all the tutorials or posts here are either accessing the file from or in a webserver or using some kind of fancy library. This should be possible without one right?
chrome.webNavigation.onCompleted.addListener(closeTab, {
url: [
{urlPrefix: 'https://www.google.de/'},
{urlPrefix: 'https://sghm.eu/iserv/login'},
]
});
function closeTab(e) {
if (!e.frameId) {
chrome.tabs.remove(e.tabId);
}
}
this is how my code looks now, I want to have some kind of loadData('data.json') function that returns the .jsons content, so that I can delete this whole .json data strucure within the js.
It should be possible to access the javascript object notation language via javascript.

I personally think you can do this far easier and faster with using Chrome.storage. The data is saved as a json object and easy to reference and it sounds like exactly what you need as you're just referencing key/pair values anyway.

Related

Is there no simple way to read a local JSON or a TEXT file using plain Javascript?

I have a local JSON file. I want to create an object of that file using JS.
I tried finding some solutions and they are simply too complicated
An answer suggests that "Being able to read a local file from your browser would be a major breach of security..." so does that mean that there is NO simple way to read a local file without using FileReader or XMLHttpRequest !?
I am very disappointed as I come from a Python background and there, you can simply use a one liner "open" function to read a file.
(PS: Please do not use any AJAX or jQuery in your answers/comments)
EDIT: Somewhat more detailed description.
I have 4 files in a folder. An HTML, a CSS, A JS and one JSON file. What I want is whenever, I try to load the HTML page in a browser, my JS creates a JSON object of my local JSON file which I can display in my HTML body.

Make a small HTML application update a JSON file

I want to make a local HTML application read and update a JSON file and use its content to display HTML content. Alas, I'm stuck at the very first step, as I can't seem to setup any sort of test file that simply notices and reads a JSON file. From what I see online, I need to use other libraries. I attempted to use require.js but I can't make it work and the documentation doesn't help me.
I imported the require.js with a tag and attempt to launch something out of what I got from the documentation, but there's nothing to do. It doesn't look like it's willing to take .json files.
requirejs([
'example'
], function(example) {
const config = require('./config.json')
});
My issue is to get the program to read the file. From there I believe I can make the display of it, but this JS thing is all alien to me.
The recommended way would be to run a web server or use something like Electron and build a desktop app (as #chrisG points out in the comments). But if you wanna do this in the browser without an web server you could do something like:
Run Chrome with the --allow-file-access-from-files (or however you allow local file access in your browser of choice)
Put your JSON in a js file and load it (to just do this you don't need the flag, but if you want to use absolute path you'll need it)

How to load file contents from another domain using just JS?

I'm thinking of doing some online file manipulation for mobile users, the idea being that the user provides a URL to the file, then the file contents are modified by the JS, and can then be downloaded. But I haven't been able to figure out how to get the file when it's on a separate domain using just JS.
Is this possible? If so any hints or examples would be appreciated.
Just wanted to add that part of what I wanted to do was make it available without my hosting it. I'm thinking of something like a a file they can host somewhere,and then all of the bandwidth is their own...and that of wherever they are getting the file from of course.
The only way to load contents of a file on another domain is from within a <script> tag. This is how JSONP works. Look into getting your target file into this format.
The other way would be to use a local proxy. Create a web service method that loads and returns the contents of the file, then call that locally using your favorite JavaScript framework.
Depending on how you think of public webservices, and within some limitations I'm still mapping, you can do this using an ajax call to YQL, like so.
(will expand the answer later).
http://query.yahooapis.com/v1/public/yql?q=select%20%2a%20from%20data.uri%20where%20url=%22http://t3.gstatic.com/images?q=tbn:ANd9GcSyART8OudfFJQ5oBplmhZ6HIIlougzPgwQ9qcgknK8_tivdW0EOg%22
One of the limitations of this method is file size, it currently tops out at 25k.

Save entire files using localStorage

I would like to use localStorage to 'cache' some JS and CSS files in a web app that is primarily used on mobile devices (i.e., bandwidth restrictions). I'm thinking it would work something like this:
The page loads with a small setup.js containing code that checks localStorage to see if bigScriptFile.js has been stored previously.
If it's not stored, bigScriptFile.js is downloaded and stored for the next visit.
If it has been stored, then bigScriptFiles.js is read from localStorage and loaded/run as if it was downloaded like a normal file (i.e., <script src="http://example.com/bigScriptFile.js"></script>)
What I'm not sure how to do is step 1.1 -- storing the JS file. (I know that I can only store strings in localStorage and I know how to use JSON.stringify().)
Surely it's not as simple as using escape():
localStorage.setItem('bigScriptFile', escape('myJScode')) to store, and
unescape(localStorage.getItem['bigScriptFile']) when retrieving
Even if it is that easy, how do I use JS to get the contents of bigScriptFile.js as a string? Perhaps by making an ajax call to a PHP script that returns the contents?
You should rather put the correct cache headers on js files or look at the HTML5 cache manifest.
W3C specification.
Have you seen http://addyosmani.github.com/basket.js/ might work for what you intended to do

Retrieving a csv file from web page

I would like to save a csv file from a web page. However, the link on the page
does not lead directly to the file, but it calls some kind of javascript, which leads
to the opening of the file. In other words, there is no explicit url address for the
file i want to download or at least I don't know what it should be.
I found a way to download a file by activating Internet Explorer,going to the web page
and pressing the link button and then saving the file through the dialog box.
This is pretty ugly, and I am wondering if there is a more elegant (and fast) method to retrieve a file without using internet explorer(e.g. by using urllib.retrieve method)
The javascript is of the following form (see the comment, it does not let publish the source code...):
"CSV"
Any ideas?
Sasha
You can look at what the javascript function is doing, and it should tell you exactly where it's downloading from.
I had exactly this sort of problem a year or two back; I ended up installing the rhino javascript engine; grepping the javascript out of the target document and evaluating the url within rhino, and then fetching the result.

Categories