Initial Commit

chrome/background.js

@@ -0,0 +1,51 @@
+// Background service worker for Chrome extension
+chrome.runtime.onInstalled.addListener(() => {
+  console.log('GreasyBoii extension installed');
+});
+
+// Listen for messages from content script
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+  if (request.action === 'getRules') {
+    chrome.storage.sync.get(['rules'], (result) => {
+      sendResponse({ rules: result.rules || [] });
+    });
+    return true; // Keep channel open for async response
+  }
+  
+  // Execute JavaScript via scripting API to bypass CSP
+  if (request.action === 'executeScript') {
+    if (!sender.tab || !sender.tab.id) {
+      sendResponse({ success: false, error: 'No tab ID available' });
+      return;
+    }
+
+    const tabId = sender.tab.id;
+    const code = request.code;
+    const ruleName = request.ruleName;
+
+    console.log(`[GreasyBoii Background] Executing script for rule "${ruleName}" on tab ${tabId}`);
+
+    // Use chrome.scripting.executeScript which bypasses CSP
+    chrome.scripting.executeScript({
+      target: { tabId: tabId },
+      world: 'MAIN', // Execute in main world (page context), not isolated world
+      func: (jsCode) => {
+        try {
+          // Use indirect eval to execute in global scope
+          (1, eval)(jsCode);
+        } catch (e) {
+          console.error('[GreasyBoii] Script execution error:', e);
+        }
+      },
+      args: [code]
+    }).then(() => {
+      console.log(`[GreasyBoii Background] ✓ Script executed successfully`);
+      sendResponse({ success: true });
+    }).catch((error) => {
+      console.error(`[GreasyBoii Background] ✗ Script execution failed:`, error);
+      sendResponse({ success: false, error: error.message });
+    });
+
+    return true; // Keep channel open for async response
+  }
+});

chrome/content.js

@@ -0,0 +1,93 @@
+// Content script that runs on all pages
+(function() {
+  'use strict';
+
+  console.log('[GreasyBoii] Content script loaded on:', window.location.href);
+
+  // Wait for DOM to be ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initGreasyBoii);
+  } else {
+    initGreasyBoii();
+  }
+
+  function initGreasyBoii() {
+    console.log('[GreasyBoii] Initializing...');
+    
+    // Get rules from storage and execute matching ones
+    chrome.storage.sync.get(['rules'], (result) => {
+      const rules = result.rules || [];
+      const currentUrl = window.location.href;
+      
+      console.log('[GreasyBoii] Found', rules.length, 'rule(s) in storage');
+
+      rules.forEach((rule) => {
+        if (!rule.enabled) {
+          console.log('[GreasyBoii] Skipping disabled rule:', rule.name);
+          return;
+        }
+
+        let shouldExecute = false;
+
+        // Check conditions
+        if (rule.matchType === 'url') {
+          shouldExecute = currentUrl.includes(rule.urlPattern);
+          console.log(`[GreasyBoii] URL match test for "${rule.name}": ${currentUrl} includes "${rule.urlPattern}" = ${shouldExecute}`);
+        } else if (rule.matchType === 'element') {
+          shouldExecute = document.querySelector(rule.elementSelector) !== null;
+          console.log(`[GreasyBoii] Element match test for "${rule.name}": selector "${rule.elementSelector}" found = ${shouldExecute}`);
+        } else if (rule.matchType === 'both') {
+          const urlMatches = currentUrl.includes(rule.urlPattern);
+          const elementExists = document.querySelector(rule.elementSelector) !== null;
+          shouldExecute = urlMatches && elementExists;
+          console.log(`[GreasyBoii] Combined match test for "${rule.name}": URL=${urlMatches}, Element=${elementExists}, Result=${shouldExecute}`);
+        }
+
+        if (shouldExecute) {
+          console.log(`[GreasyBoii] ✓ Executing rule: ${rule.name}`);
+          executeRule(rule);
+        } else {
+          console.log(`[GreasyBoii] ✗ Rule "${rule.name}" conditions not met`);
+        }
+      });
+    });
+  }
+
+  function executeRule(rule) {
+    // Execute JavaScript using chrome.scripting API to bypass CSP
+    if (rule.javascript && rule.javascript.trim()) {
+      console.log(`[GreasyBoii] Sending JavaScript execution request for rule: ${rule.name}`);
+      
+      // Send message to background script to execute JavaScript
+      chrome.runtime.sendMessage({
+        action: 'executeScript',
+        code: rule.javascript,
+        ruleName: rule.name
+      }, (response) => {
+        if (chrome.runtime.lastError) {
+          console.error(`[GreasyBoii] Error communicating with background:`, chrome.runtime.lastError);
+        } else if (response && response.success) {
+          console.log(`[GreasyBoii] ✓ JavaScript executed successfully via background script`);
+        } else {
+          console.error(`[GreasyBoii] JavaScript execution failed:`, response?.error);
+        }
+      });
+    }
+
+    // Execute CSS - CSS injection doesn't have CSP issues
+    if (rule.css && rule.css.trim()) {
+      try {
+        console.log(`[GreasyBoii] Injecting CSS for rule: ${rule.name}`);
+        
+        const style = document.createElement('style');
+        style.textContent = rule.css;
+        style.setAttribute('data-greasyboii-rule', rule.name);
+        (document.head || document.documentElement).appendChild(style);
+        
+        console.log(`[GreasyBoii] ✓ CSS injected successfully`);
+      } catch (error) {
+        console.error(`[GreasyBoii] Error applying CSS for rule "${rule.name}":`, error);
+      }
+    }
+  }
+})();

chrome/manifest.json

@@ -0,0 +1,39 @@
+{
+  "manifest_version": 3,
+  "name": "GreasyBoii",
+  "version": "1.0.4",
+  "description": "Execute custom JavaScript and CSS based on URL patterns and page elements",
+  "author": "Andy Dixon",
+  "permissions": [
+    "storage",
+    "activeTab",
+    "scripting"
+  ],
+  "host_permissions": [
+    "<all_urls>"
+  ],
+  "background": {
+    "service_worker": "background.js"
+  },
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["content.js"],
+      "run_at": "document_idle",
+      "all_frames": false
+    }
+  ],
+  "action": {
+    "default_popup": "popup.html",
+    "default_icon": {
+      "16": "icon16.png",
+      "48": "icon48.png",
+      "128": "icon128.png"
+    }
+  },
+  "icons": {
+    "16": "icon16.png",
+    "48": "icon48.png",
+    "128": "icon128.png"
+  }
+}

chrome/popup.css

@@ -0,0 +1,65 @@
+body {
+  width: 600px;
+  min-height: 400px;
+  max-height: 600px;
+  overflow-y: auto;
+}
+
+.rules-list {
+  max-height: 450px;
+  overflow-y: auto;
+}
+
+.rule-card {
+  border: 1px solid #495057;
+  border-radius: 0.375rem;
+  padding: 1rem;
+  margin-bottom: 0.75rem;
+  background-color: #212529;
+}
+
+.rule-card:hover {
+  border-color: #6c757d;
+}
+
+.rule-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.rule-name {
+  font-weight: 600;
+  font-size: 1.1rem;
+}
+
+.rule-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.rule-details {
+  font-size: 0.875rem;
+  color: #adb5bd;
+}
+
+.rule-badge {
+  font-size: 0.75rem;
+  padding: 0.25rem 0.5rem;
+}
+
+.font-monospace {
+  font-family: 'Courier New', monospace;
+  font-size: 0.875rem;
+}
+
+.form-switch .form-check-input {
+  cursor: pointer;
+  width: 3rem;
+  height: 1.5rem;
+}
+
+.modal-lg {
+  max-width: 700px;
+}

chrome/popup.html

@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en" data-bs-theme="dark">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>GreasyBoii</title>
+  <link rel="stylesheet" href="bootstrap.min.css">
+  <link rel="stylesheet" href="popup.css">
+</head>
+<body>
+  <div class="container-fluid p-3">
+    <div class="d-flex justify-content-between align-items-center mb-3">
+      <h4 class="mb-0">GreasyBoii</h4>
+      <button class="btn btn-primary btn-sm" id="addRuleBtn">+ Add Rule</button>
+    </div>
+
+    <div id="rulesList" class="rules-list mb-3">
+      <!-- Rules will be dynamically inserted here -->
+    </div>
+
+    <div id="emptyState" class="text-center text-muted py-4" style="display: none;">
+      <p>No rules yet. Click "Add Rule" to get started.</p>
+    </div>
+  </div>
+
+  <!-- Add/Edit Rule Modal -->
+  <div class="modal fade" id="ruleModal" tabindex="-1">
+    <div class="modal-dialog modal-lg">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="modalTitle">Add Rule</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+        </div>
+        <div class="modal-body">
+          <form id="ruleForm">
+            <div class="mb-3">
+              <label for="ruleName" class="form-label">Rule Name</label>
+              <input type="text" class="form-control" id="ruleName" required>
+            </div>
+
+            <div class="mb-3">
+              <label for="matchType" class="form-label">Match Type</label>
+              <select class="form-select" id="matchType" required>
+                <option value="url">URL contains string</option>
+                <option value="element">Page contains element</option>
+                <option value="both">Both URL and element</option>
+              </select>
+            </div>
+
+            <div class="mb-3" id="urlPatternGroup">
+              <label for="urlPattern" class="form-label">URL Pattern</label>
+              <input type="text" class="form-control" id="urlPattern" placeholder="e.g., example.com">
+              <small class="form-text text-muted">Enter a string to match in the URL</small>
+            </div>
+
+            <div class="mb-3" id="elementSelectorGroup" style="display: none;">
+              <label for="elementSelector" class="form-label">Element Selector</label>
+              <input type="text" class="form-control" id="elementSelector" placeholder="e.g., #my-element or .my-class">
+              <small class="form-text text-muted">Enter a CSS selector</small>
+            </div>
+
+            <div class="mb-3">
+              <label for="javascript" class="form-label">JavaScript Code</label>
+              <textarea class="form-control font-monospace" id="javascript" rows="6" placeholder="console.log('Hello from GreasyBoii!');"></textarea>
+            </div>
+
+            <div class="mb-3">
+              <label for="css" class="form-label">CSS Code</label>
+              <textarea class="form-control font-monospace" id="css" rows="6" placeholder="body { background-color: #000; }"></textarea>
+            </div>
+
+            <div class="form-check">
+              <input class="form-check-input" type="checkbox" id="ruleEnabled" checked>
+              <label class="form-check-label" for="ruleEnabled">
+                Enabled
+              </label>
+            </div>
+          </form>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+          <button type="button" class="btn btn-primary" id="saveRuleBtn">Save Rule</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script src="bootstrap.bundle.min.js"></script>
+  <script src="popup.js"></script>
+</body>
+</html>

chrome/popup.js

@@ -0,0 +1,302 @@
+// Popup script for managing rules
+let currentRules = [];
+let editingRuleIndex = -1;
+let ruleModal;
+
+// Initialize
+document.addEventListener('DOMContentLoaded', () => {
+  // Wait for Bootstrap to be fully loaded
+  if (typeof bootstrap !== 'undefined') {
+    initializeExtension();
+  } else {
+    // Fallback: wait a bit for Bootstrap to load
+    setTimeout(initializeExtension, 100);
+  }
+});
+
+function initializeExtension() {
+  try {
+    ruleModal = new bootstrap.Modal(document.getElementById('ruleModal'));
+  } catch (e) {
+    console.error('Error initializing modal:', e);
+  }
+  
+  loadRules();
+  setupEventListeners();
+}
+
+function setupEventListeners() {
+  const addRuleBtn = document.getElementById('addRuleBtn');
+  const saveRuleBtn = document.getElementById('saveRuleBtn');
+  const matchTypeSelect = document.getElementById('matchType');
+  
+  if (addRuleBtn) {
+    addRuleBtn.addEventListener('click', () => {
+      console.log('Add Rule button clicked');
+      openRuleModal();
+    });
+  } else {
+    console.error('Add Rule button not found!');
+  }
+
+  if (saveRuleBtn) {
+    saveRuleBtn.addEventListener('click', saveRule);
+  } else {
+    console.error('Save Rule button not found!');
+  }
+
+  if (matchTypeSelect) {
+    matchTypeSelect.addEventListener('change', (e) => {
+      updateFieldVisibility(e.target.value);
+    });
+  } else {
+    console.error('Match Type select not found!');
+  }
+}
+
+function updateFieldVisibility(matchType) {
+  const urlGroup = document.getElementById('urlPatternGroup');
+  const elementGroup = document.getElementById('elementSelectorGroup');
+  const urlInput = document.getElementById('urlPattern');
+  const elementInput = document.getElementById('elementSelector');
+
+  if (matchType === 'url') {
+    urlGroup.style.display = 'block';
+    elementGroup.style.display = 'none';
+    urlInput.required = true;
+    elementInput.required = false;
+  } else if (matchType === 'element') {
+    urlGroup.style.display = 'none';
+    elementGroup.style.display = 'block';
+    urlInput.required = false;
+    elementInput.required = true;
+  } else if (matchType === 'both') {
+    urlGroup.style.display = 'block';
+    elementGroup.style.display = 'block';
+    urlInput.required = true;
+    elementInput.required = true;
+  }
+}
+
+function loadRules() {
+  chrome.storage.sync.get(['rules'], (result) => {
+    currentRules = result.rules || [];
+    renderRules();
+  });
+}
+
+function renderRules() {
+  const rulesList = document.getElementById('rulesList');
+  const emptyState = document.getElementById('emptyState');
+
+  if (currentRules.length === 0) {
+    rulesList.innerHTML = '';
+    emptyState.style.display = 'block';
+    return;
+  }
+
+  emptyState.style.display = 'none';
+  
+  rulesList.innerHTML = currentRules.map((rule, index) => {
+    const matchTypeLabel = {
+      'url': 'URL',
+      'element': 'Element',
+      'both': 'URL + Element'
+    }[rule.matchType] || rule.matchType;
+
+    const hasJS = rule.javascript && rule.javascript.trim();
+    const hasCSS = rule.css && rule.css.trim();
+
+    return `
+      <div class="rule-card" data-rule-index="${index}">
+        <div class="rule-header">
+          <div class="d-flex align-items-center gap-2">
+            <span class="rule-name">${escapeHtml(rule.name)}</span>
+            <span class="badge rule-badge bg-secondary">${matchTypeLabel}</span>
+            ${hasJS ? '<span class="badge rule-badge bg-warning">JS</span>' : ''}
+            ${hasCSS ? '<span class="badge rule-badge bg-info">CSS</span>' : ''}
+          </div>
+          <div class="rule-actions">
+            <div class="form-check form-switch mb-0">
+              <input class="form-check-input rule-toggle" type="checkbox" ${rule.enabled ? 'checked' : ''} 
+                     data-index="${index}" title="Enable/Disable">
+            </div>
+            <button class="btn btn-sm btn-outline-light btn-edit-rule" data-index="${index}" title="Edit">
+              <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
+              </svg>
+            </button>
+            <button class="btn btn-sm btn-outline-danger btn-delete-rule" data-index="${index}" title="Delete">
+              <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
+                <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div class="rule-details">
+          ${rule.matchType === 'url' || rule.matchType === 'both' ? `<div><strong>URL:</strong> ${escapeHtml(rule.urlPattern)}</div>` : ''}
+          ${rule.matchType === 'element' || rule.matchType === 'both' ? `<div><strong>Element:</strong> ${escapeHtml(rule.elementSelector)}</div>` : ''}
+        </div>
+      </div>
+    `;
+  }).join('');
+  
+  // Add event listeners using event delegation
+  attachRuleEventListeners();
+}
+
+function attachRuleEventListeners() {
+  const rulesList = document.getElementById('rulesList');
+  
+  // Remove old listeners if any
+  rulesList.removeEventListener('click', handleRuleClick);
+  rulesList.removeEventListener('change', handleRuleToggle);
+  
+  // Add new listeners
+  rulesList.addEventListener('click', handleRuleClick);
+  rulesList.addEventListener('change', handleRuleToggle);
+}
+
+function handleRuleClick(e) {
+  const editBtn = e.target.closest('.btn-edit-rule');
+  const deleteBtn = e.target.closest('.btn-delete-rule');
+  
+  if (editBtn) {
+    const index = parseInt(editBtn.dataset.index);
+    editRule(index);
+  } else if (deleteBtn) {
+    const index = parseInt(deleteBtn.dataset.index);
+    deleteRule(index);
+  }
+}
+
+function handleRuleToggle(e) {
+  if (e.target.classList.contains('rule-toggle')) {
+    const index = parseInt(e.target.dataset.index);
+    toggleRule(index);
+  }
+}
+
+function openRuleModal(ruleIndex = -1) {
+  editingRuleIndex = ruleIndex;
+  const modalTitle = document.getElementById('modalTitle');
+  const form = document.getElementById('ruleForm');
+
+  form.reset();
+
+  if (ruleIndex >= 0) {
+    modalTitle.textContent = 'Edit Rule';
+    const rule = currentRules[ruleIndex];
+    document.getElementById('ruleName').value = rule.name;
+    document.getElementById('matchType').value = rule.matchType;
+    document.getElementById('urlPattern').value = rule.urlPattern || '';
+    document.getElementById('elementSelector').value = rule.elementSelector || '';
+    document.getElementById('javascript').value = rule.javascript || '';
+    document.getElementById('css').value = rule.css || '';
+    document.getElementById('ruleEnabled').checked = rule.enabled;
+  } else {
+    modalTitle.textContent = 'Add Rule';
+    document.getElementById('ruleEnabled').checked = true;
+  }
+
+  updateFieldVisibility(document.getElementById('matchType').value);
+  
+  // Show modal - ensure Bootstrap Modal is initialized
+  if (ruleModal) {
+    ruleModal.show();
+  } else {
+    // Fallback: try to initialize and show
+    try {
+      ruleModal = new bootstrap.Modal(document.getElementById('ruleModal'));
+      ruleModal.show();
+    } catch (e) {
+      console.error('Error showing modal:', e);
+      alert('Error opening rule editor. Please reload the extension.');
+    }
+  }
+}
+
+function saveRule() {
+  const name = document.getElementById('ruleName').value.trim();
+  const matchType = document.getElementById('matchType').value;
+  const urlPattern = document.getElementById('urlPattern').value.trim();
+  const elementSelector = document.getElementById('elementSelector').value.trim();
+  const javascript = document.getElementById('javascript').value;
+  const css = document.getElementById('css').value;
+  const enabled = document.getElementById('ruleEnabled').checked;
+
+  // Validation
+  if (!name) {
+    alert('Please enter a rule name');
+    return;
+  }
+
+  if (matchType === 'url' && !urlPattern) {
+    alert('Please enter a URL pattern');
+    return;
+  }
+
+  if (matchType === 'element' && !elementSelector) {
+    alert('Please enter an element selector');
+    return;
+  }
+
+  if (matchType === 'both' && (!urlPattern || !elementSelector)) {
+    alert('Please enter both URL pattern and element selector');
+    return;
+  }
+
+  if (!javascript && !css) {
+    alert('Please enter either JavaScript or CSS code');
+    return;
+  }
+
+  const rule = {
+    name,
+    matchType,
+    urlPattern,
+    elementSelector,
+    javascript,
+    css,
+    enabled
+  };
+
+  if (editingRuleIndex >= 0) {
+    currentRules[editingRuleIndex] = rule;
+  } else {
+    currentRules.push(rule);
+  }
+
+  chrome.storage.sync.set({ rules: currentRules }, () => {
+    loadRules();
+    ruleModal.hide();
+  });
+}
+
+function editRule(index) {
+  openRuleModal(index);
+}
+
+function deleteRule(index) {
+  if (confirm(`Delete rule "${currentRules[index].name}"?`)) {
+    currentRules.splice(index, 1);
+    chrome.storage.sync.set({ rules: currentRules }, () => {
+      loadRules();
+    });
+  }
+}
+
+function toggleRule(index) {
+  currentRules[index].enabled = !currentRules[index].enabled;
+  chrome.storage.sync.set({ rules: currentRules }, () => {
+    loadRules();
+  });
+}
+
+function escapeHtml(text) {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+