Нажатие элемента на странице через расширение Chrome

Я пытаюсь создать расширение chrome, которое будет нажимать на элемент на веб-странице, когда вы нажимаете кнопку на расширении, но по какой-то причине ничего не делает, что бы я ни старался.

У меня это до сих пор

manifest.json

{  
  "manifest_version": 2,  

  "name": "Such Activity",  
  "description": "Wow",  
  "version": "1.0",    
  "permissions": [  
        "tabs", "<all_urls>"  
    ],  

  "browser_action": {  
    "default_icon": "icon.png",  
    "default_popup": "popup.html"  
  },  
     "content_scripts": [  
        {  
            "matches": [ "<all_urls>" ],  
           "js": ["content_script.js"]  
            }  
        ]  
}

popup.html

<!doctype html>  
<html>  
  <head>  
    <title>activity</title>  
    <style>  
    </style>  
    <script src="content_script.js"></script>  
  </head>  
  <body>  
  <button id="clickactivity">click</button>  
  </body>  
</html>

content_script.js

function ClickPlanet()
    {
        var planets = document.getElementsByClassName("planet-name");
        var randomplanet = Math.floor(Math.random() * planets.length);
        var clickplanet = planets[randomplanet];
        clickplanet.click();
        setInterval(function () { ClickPlanet() }, 2000);
    }

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('clickactivity').addEventListener('click', ClickPlanet);
});

Все, что я, кажется, получаю, это ошибка

Uncaught TypeError: Cannot read property 'click' of undefined

Я занимаюсь этим часами, но я не могу заставить его работать. Любая помощь приветствуется!

Ответы

Ответ 1

вопрос

Похоже, вы неправильно понимаете поведение скрипта контента.

Цитирование официальной документации:

Сценарии содержимого - это файлы JavaScript, которые запускаются в контексте веб-страниц. Используя стандартную объектную модель документа (DOM), они могут читать информацию о веб-страницах, которые посещает браузер, или вносить в них изменения.

Таким образом, использование вашего content_script.js в вашем popup.html не имеет большого смысла и, очевидно, приводит к ошибке, потому что у вас нет кнопки с class="planet-name" на вашей странице popup.html.

Решение

Чтобы сделать то, что вы хотите, вам нужно создать другой скрипт для вашего popup.html и добавить прослушиватель для этой кнопки, чтобы при нажатии на нее вы могли content_script.js скрипт content_script.js на страницу, чтобы нажать "планету" элемент.

Так что вам придется:

  1. Отредактируйте ваш manifest.json удалив поле "content_scripts"
  2. Создайте файл popup.js для добавления на страницу popup.html
  3. Добавьте прослушиватель для нажатия кнопки внутри popup.js чтобы внедрить файл content_script.js с помощью chrome.tabs.executeScript()
  4. Отредактируйте ваш content_script.js чтобы он нажимал кнопку прямо на странице

  1. Прежде всего, отредактируйте ваш manifest.json, он должен выглядеть так:

    {  
    "manifest_version": 2,  

    "name": "Such Activity",  
    "description": "Wow",  
    "version": "1.0",    
    "permissions": ["tabs", "<all_urls>"],  

    "browser_action": {  
        "default_icon": "icon.png",  
        "default_popup": "popup.html"  
    }
}

  2. Затем удалите ваш content_script.js из popup.html и замените его popup.js:

    <!doctype html>  
<html>  
    <head><title>activity</title></head>  
<body>  
    <button id="clickactivity">click</button>  
    <script src="popup.js"></script> 
</body>
</html>

  3. Создайте скрипт popup.js и добавьте слушателя к кнопке, которая будет вставлять скрипт на текущую страницу:

    function injectTheScript() {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        // query the active tab, which will be only one tab
        //and inject the script in it
        chrome.tabs.executeScript(tabs[0].id, {file: "content_script.js"});
    });
}

document.getElementById('clickactivity').addEventListener('click', injectTheScript);

  4. Теперь, в вашем content_script.js, вам нужно будет нажать кнопку напрямую, а также вам не нужно будет использовать DOMContentReady, потому что Chrome ждет, чтобы внедрить скрипт самостоятельно. Итак, ваш новый content_script.js будет:

    function clickPlanet() {
    var planets = document.getElementsByClassName("planet-name"),
        randomplanet = Math.floor(Math.random() * planets.length),
        clickplanet = planets[randomplanet];

    clickplanet.click();
}

clickPlanet();

Рабочий пример

Скачать рабочий пример расширения можно ЗДЕСЬ.

Документация

Я настоятельно рекомендую вам взглянуть на документацию по методам, использованным в моем примере, чтобы полностью понять их поведение и их свойства, вот несколько ссылок, которые могут оказаться полезными: