I'm working on a Chrome extension and encountering an error that says "ReferenceError: document is not defined" when running the command "node popup.js" in the terminal of Visual Studio Code. Here are some additional details:
Directory Structure: All files, including popup.html, popup.js, database.js, and manifest.json, are located in the same directory.
Node.js and SQL: Node.js and SQL are both installed and configured properly on my system.
Now, let's take a closer look at the code:
popup.html is simple what is inside of the popup when clicking on the extension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ARQ Database</title>
</head>
<body>
<h3>Add person to database</h3>
<input type="text" id="name" placeholder="Name" autocomplete="off">
<input type="number" id="age" placeholder="Age" autocomplete="off">
<input type="text" id="nationality" placeholder="Nationality" autocomplete="off">
<input type="text" id="description" placeholder="Description" autocomplete="off">
<input type="submit" id="submit" value="Submit">
<script type="module" src="popup.js"></script>
</body>
</html>
popup.js is supposed to add a new person to the database:
popup.js
const db = require('./database.js');
const submit = document.querySelector("#submit");
console.log("FUNCTION RUNNING...")
submit.addEventListener("click", () => {
let name = document.querySelector("#name").value;
let age = document.querySelector("#age").value;
let nationality = document.querySelector("#nationality").value;
let description = document.querySelector("#description").value;
let values = [name, age, nationality, description];
newPerson(values);
});
function newPerson(values) {
const sql = "INSERT INTO people (name, age, nationality, description) VALUES (?, ?, ?, ?)";
db.query(sql, values, function (err, result) {
if (err) throw err;
console.log("PERSON ADDED TO DATABASE");
});
}
database.js keeps phpmyadmin running in the background as well as the sql table:
// database.js
const mysql = require('mysql');
const db = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '',
database: 'ARQ'
});
db.connect((err) => {
if (err) throw err;
console.log('RUNNING...');
});
module.exports = db;
manifest.json is simply how the chrome store shows my chrome extension within the chrome store.
{
"name": "ARQ Database",
"version": "0.01",
"description": "An easy way to find the best fit for the job.",
"manifest_version": 3,
"action": {
"default_title": "Database Popup",
"default_popup": "popup.html"
},
"background": {
"service_worker": "database.js"
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"popup.js"
],
"run_at": "document_end"
}
]
}