Including a text file in Chrome extension and reading it with Javascript - javascript

I want to create a Chrome extension that contains a text file with static data (a dictionary of English words) and I want the extension to be able to parse that file. I've only managed to find FileReader class, but it looks like it's made for reading user-selected files, while in my case I always want to read the same exact file included in extension's package. As a workaround, I can convert the file to a Javascript array of strings declared in some .js file included in the manifest, but in that case the whole contents would be loaded into memory at once, while what I need is to read the data line by line. Is there any way to do this?

You can go the FileReader route, since you can obtain the Entry of your package directory with chrome.runtime.getPackageDirectoryEntry().
However, an easier way is to just make a XHR to your file using chrome.runtime.getURL() with a relative path. The first way is useful when you want to list files, though.

Related

Why do some .js files appear plain text files on vscode?

Like in the image below, while most .js files turn out to be javascript files, some in the same project choose to be text files although they still have .js on the file name. The content is also in correct javascript syntax and I can't tell what went wrong.
Does anyone have an idea how to fix this?
The most common explanation is they are .txt files. In other words, it means that the file's full name is something like index.js.txt.
Can you check the file type? You can quickly do that by:
Right-click on the file name;
Select the option "copy path";
Past it in some .txt file. Check if you obtain something like this: C:\{some-path}\index.js.txt
If you still see index.js check the file type. Sometimes when new files are created, the operating system does not create that file with the extension type that we define in the file name.
The solution is just to create another file, ensure that the operating system detects the file type, copy the content to this new file, and delete the old one.

How to automatically make array of all files in website folder?

Let's say I have a folder of about 100 images on my website called "IMG"
Now let's say I have a div element: <div id="templateDiv"></div>
Using javascript, how would I add all images from "IMG/" into that div without adding <img src="IMG/IMGNAME.jpg"> for every image?
Sorry, I'm not very good at explaining.
Just ignore the fact that would take ages to load.
EDIT
Ok my bad explanation skills have made me change my question.
How do I automatically make array of all files in website directory?
Okay, your question is incredibly unclear, but from reading all your other comments and things, it seems you simply want to get an array that contains the filename of every file in a directory? If that's what you want, then it won't be possible (I don't believe) since only the server knows which files are where, and you can't request the contents of a directory from a server using JavaScript.
However if you were using Node.js on a local directory, then it could be done. But I don't believe that's your case.
That being said, you have three alternative options:
Name every image file 1.png, 2.png, 3.png, etc. Then use a for loop and get each one using (i + 1) + ".png"
If you can't rename the files, but the files are named via user input, you could collect the user's input at the time of file creation and add the name of the newly created file into another file/an array/localStorage so that it could be retrieved later.
If you can't rename the files, but the filenames are also never known to the program that needs them, then you could create an array of all the filenames (manually) and iterate over that to find all the files that you want.
Please, somebody let me know if I'm wrong and if there actually is a way to make a request to a server that tells the client all the files in a directory. That seems incredibly unlikely though.
Another potential solution just came to mind. You could write a PHP script (or Node.js or any server-side language, really) that scans a directory, creates a list of all the filenames there, and then sends that back over HTTP. Then you could simply make an XMLHttpRequest to that PHP file and have it do the work. How does that sound?

Read local .json from local .js without repos

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.

Getting the file extension without knowing it's name

I need to know if there is a way to retrieve the real file extension without parse the filename.
In my code I split the file using the function split(filename, ".") then i get the last element of the array that the function returns.
Now, if I create a .pdf file called, for example test_file.pdf, the previous method works perfectly, but if i rename my file to test_file(without extension) I cannot retrieve the extension even if I know that the file is a PDF.
For example, if i rename test_file.pdf to text_file.jpg how can I recognize that the file is still a pdf and not an image file with .jpg extension?
I would like to know if there is a way to obtain this information, maybe using file metadata or other information related to the file.
I'm looking for a Javascript solution because I have to check the extension when I upload the file using a form (client side) but even a Java solution could be fine, can you help me?
Thank you in advance!
Look at this post and the marked answer: Get real file extension -Java code
I guess it's just what you need.

Error creating file in firefox extension

I am trying to create a file in the extension using this code:
Components.utils.import("resource://gre/modules/FileUtils.jsm");
var file = new FileUtils.File("C:\\Windows\\hello.txt");
But nothing happens.The file doesn't appear
Any ideas?
Your file var is an object that represents a file at the location you specified. Creating this file object does not create a file directly (you might instead choose to read from the file, for example).
You can now use the nsIFile API to manipulate the file object. For example, you can create a file at that location:
file.create(file.NORMAL_FILE_TYPE, parseInt("0600", 8));
Note that Windows UAC can cause file access to fail. You might want to try:
file.isWriteable();
but ultimately you might find that it's not possible to write to directories that UAC is protecting so you can instead choose a non-protected location, perhaps using the special directory definitions explained on this useful MDN page: https://developer.mozilla.org/en-US/docs/Code_snippets/File_I_O

Categories