Is it possible to access variables from .env file from Content Script?
I am building a Chrome Extension and I have javascript Content Script file from which I listen to events on the browser page.
I would like to make an API call, so I need to access my API key, which is stored in .env file. When i try to call variables as const key = proccess.env.API_KEY i get an error: Uncaught ReferenceError: process is not defined.
I tried require('dotenv').config(); to help me with that problem, but since this is a normal js file and not Node.js, i get an erorr: Uncaught ReferenceError: require is not defined
So is there a way to load .env variables in normal JavaScript? Or should I use different approach?
Related
Whenever i tried to read my json file using the require function and using my js file from the browser an error shows " require function is not defined" so i want another method to read the json file , and if you can plz mention how to read, update, delete, insert to the json file
as i mention before i have tried using the require function , and also using the import function but using it make the situation worse since whenever i tried to use any function through the html an error shows say
"Uncaught ReferenceError: Login is not defined
at HTMLButtonElement.onclick"
I have a folder structure like this
index.html
file.txt
in the index.html I have a script that wants to read the file.txt and assign it to a variable, say x.
async function loadFile(file) {
let text = await file.text();
console.log(text);
return text
}
var x = loadFile("file.txt")
but this returns an error
main.js:35
Uncaught (in promise) TypeError: file.text is not a function
at loadFile (main.js:35:27)
at main.js:39:13
what to do? I just want to assign file.txt content to a variable.
JavaScript in browser doesn't give you direct access to file system.
What you did is just pass a string to your function and call text() on it. Sadly it doesn't work like that.
Here are two workarounds I know of:
1. fetch api
If you have an http server serving your files then you make a request using fetch() to obtain its content in JS. Read the docs here :
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
Note that it won't work on pages loaded with file:// URI scheme. You need http(s). If you have python installed run python -m http.server 8000 in directory containing files to be served.
2. FileReader
If the file is to be selected by user as input to a form then you can use FileReader
Have a look these links:
webdev has great explaination for this
https://web.dev/read-files/
also see the docs
https://developer.mozilla.org/en-US/docs/Web/API/FileReader
I am trying to read a JSON object located in another js file using a chrome extension content script.
I tried listening for the page loading, and even used timeouts but it didn't work.
Is it possible to somehow access that json file? I am able to get it using the console, but not when using the content script js.
MCVE:
There is one file that is loaded by the website. Let's call it "loader" for now.
Loader defines a JSON object called "Derulo" and it contains this information {"Artist":false}. I am creating a Chrome extension that wants to use content script in order to take the "Derulo" JSON object that the website defined.
I have created a variable named myVar in a js file. The js file is located in the client folder of my meteor app.
I have checked that the js file has already loaded because the console.log('...') has printed but I can not see myVar when I want to call it.
The error message content is :
Uncaught ReferenceError: floaty is not defined
I just run into this problem right now. Try replacing 'var floaty' with 'window.floaty'
Here is my code: http://pastebin.com/rZKRTGUB
I am not sure why I am getting require is not defined on Line 4
require is part of the node runtime environment and does not exist in browsers. It looks like you're trying to run this in the browser (in the <script> tags). Likely, you should be creating a server in node and then using the code you've written to talk to the database.
Yours is client side code, so require() is obviously not defined.
You either move your code in a node server or you drop http://requirejs.org/docs/download.html in your script if you want to use that API in the browser.