Browse Source

setting up work on popup window

Brandon Wong 1 year ago
parent
commit
fb71bc9125
4 changed files with 243 additions and 209 deletions
  1. 243 0
      2025-03-31-5-claude-popup-window-recommendations.md
  2. 0 65
      popup/popup.css
  3. 0 29
      popup/popup.html
  4. 0 115
      popup/popup.js

File diff suppressed because it is too large
+ 243 - 0
2025-03-31-5-claude-popup-window-recommendations.md


+ 0 - 65
popup/popup.css

@@ -1,65 +0,0 @@
-body {
-  width: 300px;
-  font-family: Arial, sans-serif;
-}
-
-.container {
-  padding: 10px;
-}
-
-h1 {
-  font-size: 18px;
-  margin-bottom: 15px;
-}
-
-h2 {
-  font-size: 16px;
-  margin-top: 15px;
-  margin-bottom: 10px;
-}
-
-button {
-  margin: 5px 0;
-  padding: 8px;
-  width: 100%;
-  background-color: #0060df;
-  color: white;
-  border: none;
-  cursor: pointer;
-  border-radius: 4px;
-}
-
-button:hover {
-  background-color: #003eaa;
-}
-
-input {
-  width: 100%;
-  padding: 8px;
-  margin: 5px 0;
-  box-sizing: border-box;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-}
-
-.button-group {
-  display: flex;
-  gap: 5px;
-}
-
-.button-group button {
-  flex: 1;
-}
-
-.storage-section {
-  margin-top: 15px;
-  padding-top: 10px;
-  border-top: 1px solid #eee;
-}
-
-#status, #storage-result {
-  margin-top: 10px;
-  padding: 5px;
-  color: #333;
-  min-height: 20px;
-}

+ 0 - 29
popup/popup.html

@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="popup.css">
-</head>
-<body>
-  <div class="container">
-    <h1>My Firefox Extension</h1>
-    <button id="inject-button">Inject Script</button>
-    <button id="navigate-button">Navigate Tab</button>
-    <input type="text" id="navigation-url" placeholder="https://example.com">
-    
-    <div class="storage-section">
-      <h2>Saved Data</h2>
-      <input type="text" id="storage-key" placeholder="Key">
-      <input type="text" id="storage-value" placeholder="Value">
-      <div class="button-group">
-        <button id="save-data">Save</button>
-        <button id="load-data">Load</button>
-      </div>
-      <div id="storage-result"></div>
-    </div>
-    
-    <div id="status"></div>
-  </div>
-  <script src="popup.js"></script>
-</body>
-</html>

+ 0 - 115
popup/popup.js

@@ -1,115 +0,0 @@
-// Function to display status messages
-function showStatus(message) {
-  document.getElementById('status').textContent = message;
-  setTimeout(() => {
-    document.getElementById('status').textContent = '';
-  }, 3000);
-}
-
-// Function to inject script into the current tab
-function injectScript() {
-  browser.tabs.query({active: true, currentWindow: true})
-    .then(tabs => {
-      browser.tabs.sendMessage(tabs[0].id, { command: 'injectCode' })
-        .then(response => {
-          showStatus('Script injected successfully!');
-        })
-        .catch(error => {
-          showStatus('Error: Content script may not be loaded. Try refreshing the page.');
-          // Fallback: Directly inject the content script
-          browser.tabs.executeScript(tabs[0].id, {
-            file: "/content_scripts/content.js"
-          });
-        });
-    });
-}
-
-// Function to navigate to another page
-function navigateTab() {
-  const url = document.getElementById('navigation-url').value;
-  if (!url) {
-    showStatus('Please enter a URL');
-    return;
-  }
-  
-  // Add http:// prefix if missing
-  const formattedUrl = url.includes('://') ? url : `http://${url}`;
-  
-  browser.tabs.query({active: true, currentWindow: true})
-    .then(tabs => {
-      browser.runtime.sendMessage({
-        command: 'navigate',
-        tabId: tabs[0].id,
-        url: formattedUrl
-      })
-      .then(response => {
-        if (response && response.status === 'success') {
-          showStatus('Tab navigated successfully!');
-        } else {
-          showStatus('Error navigating tab: ' + (response ? response.message : 'Unknown error'));
-        }
-      })
-      .catch(error => {
-        showStatus('Error navigating tab: ' + error.message);
-      });
-    });
-}
-
-// Function to save data to storage
-function saveData() {
-  const key = document.getElementById('storage-key').value;
-  const value = document.getElementById('storage-value').value;
-  
-  if (!key) {
-    showStatus('Please enter a key');
-    return;
-  }
-  
-  browser.storage.local.set({ [key]: value })
-    .then(() => {
-      document.getElementById('storage-result').textContent = `Data saved: ${key} = ${value}`;
-    })
-    .catch(error => {
-      document.getElementById('storage-result').textContent = 'Error saving data: ' + error.message;
-    });
-}
-
-// Function to load data from storage
-function loadData() {
-  const key = document.getElementById('storage-key').value;
-  
-  if (!key) {
-    showStatus('Please enter a key');
-    return;
-  }
-  
-  browser.storage.local.get(key)
-    .then(result => {
-      if (result[key] !== undefined) {
-        document.getElementById('storage-value').value = result[key];
-        document.getElementById('storage-result').textContent = `Data loaded: ${key} = ${result[key]}`;
-      } else {
-        document.getElementById('storage-result').textContent = `No data found for key: ${key}`;
-      }
-    })
-    .catch(error => {
-      document.getElementById('storage-result').textContent = 'Error loading data: ' + error.message;
-    });
-}
-
-// Add event listeners when the document is loaded
-document.addEventListener('DOMContentLoaded', function() {
-  document.getElementById('inject-button').addEventListener('click', injectScript);
-  document.getElementById('navigate-button').addEventListener('click', navigateTab);
-  document.getElementById('save-data').addEventListener('click', saveData);
-  document.getElementById('load-data').addEventListener('click', loadData);
-  
-  // Example of using storage to track last usage
-  browser.storage.local.get('lastUsed')
-    .then(result => {
-      if (result.lastUsed) {
-        showStatus('Last used: ' + new Date(result.lastUsed).toLocaleString());
-      }
-      browser.storage.local.set({ 'lastUsed': Date.now() });
-    });
-});