options.js

const rulesContainer = document.getElementById('rules');
const addRuleBtn = document.getElementById('addRule');
const saveBtn = document.getElementById('save');

function createRuleElement(rule = { regex: '', js: '', css: '' }) {
    const div = document.createElement('div');
    div.className = 'rule';
    div.innerHTML = `
        <label>Regex:</label><input type="text" class="regex" value="${rule.regex}"><br>
        <label>JS Code:</label><textarea class="js">${rule.js}</textarea><br>
        <label>CSS Code:</label><textarea class="css">${rule.css}</textarea><br>
        <button class="remove">Remove</button>
    `;
    div.querySelector('.remove').onclick = () => div.remove();
    return div;
}

function loadRules() {
    chrome.storage.local.get('rules', ({ rules }) => {
        rulesContainer.innerHTML = '';
        (rules || []).forEach(rule => {
            rulesContainer.appendChild(createRuleElement(rule));
        });
    });
}

addRuleBtn.onclick = () => {
    rulesContainer.appendChild(createRuleElement());
};

saveBtn.onclick = () => {
    const ruleDivs = document.querySelectorAll('.rule');
    const rules = Array.from(ruleDivs).map(div => ({
        regex: div.querySelector('.regex').value,
        js: div.querySelector('.js').value,
        css: div.querySelector('.css').value
    }));
    chrome.storage.local.set({ rules }, () => {
        alert('Config Saved!');
    });
};

loadRules();