не работает расширение на других сайтах

Question

не работает расширение на других сайтах

Рейтинг: 0Ответов: 0Опубликовано: 20.08.2023

Написал расширение, которое должно вносить изменения в value элемента и сохранять на localstorage опираясь на классе, но проблема в том, что оно работает только внутри popup.html, а на сайте вообще без реакции. Как это исправить?

content.js:

    // Сохранение состояния элемента в localStorage
    function saveElementState(elementClasses, newValue) {
        const savedState = JSON.parse(localStorage.getItem('elementStates')) || {};
        savedState[elementClasses] = newValue;
        localStorage.setItem('elementStates', JSON.stringify(savedState));
    }

    // Восстановление состояния элементов из localStorage
    function restoreElementStates() {
        const savedState = JSON.parse(localStorage.getItem('elementStates')) || {};
        for (const elementClasses in savedState) {
            const elements = document.getElementsByClassName(elementClasses);
            if (elements.length > 0) {
                elements[0].textContent = savedState[elementClasses];
            }
        }
    }

    document.addEventListener("click", function(event) {
        const clickedElement = event.target;
        const newValueInput = document.getElementById("newValue");
        const newValue = newValueInput.value;

        if (clickedElement.classList.contains("saveButton") && newValue !== "") {
            const elementClasses = prompt("Enter the element's classes:", "");
            if (elementClasses !== null && elementClasses !== "") {
                const elements = document.getElementsByClassName(elementClasses);
                if (elements.length > 0) {
                    saveElementState(elementClasses, newValue);
                }
            }
        }
    });

    document.addEventListener("DOMContentLoaded", function() {
        restoreElementStates();
    });

    const clear = document.getElementById('clear');
    clear.addEventListener('click', () => {
        localStorage.clear();
    });

manifest.json

{
  "manifest_version": 2,
  "name": "Element Value Changer",
  "version": "1.0",
  "description": "Change element values and save to local storage",
  "permissions": ["storage"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "browser_action": {
    "default_popup": "popup.html"
  }
}

popup.html

    <!-- popup.html -->
    <!DOCTYPE html>
    <html>

    <head>
    <title>Element Value Changer</title>
    
    </head>
    <body>
        <h3 class="saveable">Extension Popup</h3>
        <input type="text" id="newValue" placeholder="New Value">
        <button class="saveButton" id="saveButton">Save to Local Storage</button>
        <button id="clear">clear</button>
        <script src="content.js"></script>
    
    </body>

    </html>

javascript json chrome-extension extension

Источник: Stack Overflow на русском

не работает расширение на других сайтах

Ответы