Developed by
Felipe Alfonso Gonzalez, Computer Science Engineer
diff --git a/popup/popup.js b/popup/popup.js
index d919d99..5516afc 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -1,6 +1,5 @@
// popup/popup.js
-// Add a click event listener to toggle the configuration section
document.addEventListener('DOMContentLoaded', () => {
const configButton = document.querySelector('.accordion-header');
const configSection = document.getElementById('config-section');
@@ -9,7 +8,7 @@ document.addEventListener('DOMContentLoaded', () => {
configSection.classList.toggle('active');
});
- // Add a click event listener to save the API key
+
const saveButton = document.getElementById('save-button');
const apiKeyInput = document.getElementById('api-key');
const statusMessage = document.getElementById('status-message');
@@ -17,9 +16,9 @@ document.addEventListener('DOMContentLoaded', () => {
saveButton.addEventListener('click', () => {
const apiKey = apiKeyInput.value;
if (apiKey) {
- // Save the API key to local storage
+
localStorage.setItem('tmdb_api_key', apiKey);
- // Display a success message to the user
+
statusMessage.textContent = 'API Key saved successfully!';
} else {
statusMessage.textContent = 'Please enter a valid API Key.';
diff --git a/scripts/api.js b/scripts/api.js
index c37c109..f02068c 100755
--- a/scripts/api.js
+++ b/scripts/api.js
@@ -1,6 +1,5 @@
// api.js
-// Function to fetch movie recommendations using the provided API key
async function fetchMovieRecommendations(apiKey) {
try {
const response = await axios.get(`https://api.themoviedb.org/3/movie/popular?api_key=${apiKey}`);
@@ -11,11 +10,10 @@ async function fetchMovieRecommendations(apiKey) {
}
}
-// Function to render movie recommendations in the popup
function renderMovieRecommendations(recommendations) {
const recommendationsList = document.getElementById('recommendations-list');
- recommendationsList.innerHTML = ''; // Clear previous recommendations
+ recommendationsList.innerHTML = '';
recommendations.forEach((movie) => {
const movieBox = document.createElement('div');
@@ -42,10 +40,10 @@ function renderMovieRecommendations(recommendations) {
});
}
-// Check if the API key is already saved in local storage
+
const apiKey = localStorage.getItem('tmdb_api_key');
-// If the API key is already saved, fetch and render movie recommendations
+
if (apiKey) {
fetchMovieRecommendations(apiKey)
.then((recommendations) => renderMovieRecommendations(recommendations))
diff --git a/scripts/content.js b/scripts/content.js
index 6aef23b..1ef70af 100755
--- a/scripts/content.js
+++ b/scripts/content.js
@@ -1,23 +1,22 @@
// content.js
function insertExtensionUI() {
- // Check if the extension UI is already inserted to avoid duplication
+
if (!document.getElementById("theatherflix-extension")) {
const extensionUI = document.createElement("div");
extensionUI.id = "theatherflix-extension";
- // Insert your UI elements here (e.g., personalized recommendations, stars, etc.)
- // For this example, we'll just add a simple text.
+
extensionUI.innerHTML = "
Personalized recommendations will appear here.
";
document.body.appendChild(extensionUI);
}
}
- // Listen for messages from the extension popup
+
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message === "showExtensionUI") {
insertExtensionUI();
}
});
- // Inform the extension popup that the content script is ready
+
chrome.runtime.sendMessage("contentScriptReady");
\ No newline at end of file
diff --git a/styles/popup.css b/styles/popup.css
index d1a07f8..fa7a972 100644
--- a/styles/popup.css
+++ b/styles/popup.css
@@ -1,8 +1,8 @@
/* styles/popup.css */
/* popup.css */
body {
- width: 600px; /* Set the width of the popup */
- margin: 20px auto; /* Center the popup horizontally */
+ width: 600px;
+ margin: 20px auto;
padding: 20px;
}
@@ -29,8 +29,6 @@ body {
flex: 1;
}
-
-/* CSS styles for the configuration section */
#config-section {
display: none;
border: 1px solid #ccc;
diff --git a/styles/styles.css b/styles/styles.css
index 944948c..95f74d6 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -8,7 +8,6 @@ h1 {
margin-bottom: 20px;
}
-/* Add styles for the accordion */
.accordion {
margin-top: 10px;
border: 1px solid #ccc;
@@ -32,13 +31,11 @@ h1 {
padding: 10px;
}
-/* Show the accordion content when the button is clicked */
+
.accordion.active .accordion-content {
display: block;
}
-
-/* Add CSS for the accordion */
.accordion-header {
cursor: pointer;
padding: 15px;