Добавьте прослушиватель событий JS в всплывающее окно расширения Chrome - PullRequest
Новая
       19

Добавьте прослушиватель событий JS в всплывающее окно расширения Chrome

1 голос
/ 23 октября 2019

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

Вот JS - 

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('checkButton').onclick = grabLinks;
});

А вот всплывающий HTML - 

<!DOCTYPE html>
    <html>
    <head>

<script src="background.js"></script>

    </head>
<body>

    <h3>Duplink</h3>

    <p>Check if a link is already on this page.</p>
    <form>
            URL: <input id="URL" type="text" name="URL"><br>
            <input id='checkButton' type="submit" value="Submit">
    </form>

    <p>Link is:<span id="message"></span></p>

</body>
</html>

Кроме того, вотmanifest.json на всякий случай - 

{
    "name": "Duplink",
    "version": "1.0",
    "description": "Check for duplicate links on DotDash sites",
    "manifest_version": 2,
    "background": {
      "scripts": [
        "background.js",
        "popup.js"],
      "persistent": false
    },
    "browser_action": {
        "default_popup": "popup.html",
        "default_title": "Duplink"
      },
      "permissions": [
        "activeTab",
        "storage"
      ]
}

Когда я распаковываю расширение, я получаю эту ошибку. - Ошибка в обработчике события: TypeError: Невозможно установить свойство 'onclick' со значением NULL

Затем он продолжает повторять эту ошибку снова и снова. - Uncaught TypeError: Невозможно прочитать свойство addListener из неопределенного

Ответы [ 3 ]

2 голосов
/ 23 октября 2019

Ваш popup.js должен быть добавлен в popup.html вместо добавления в фоновые скрипты. Вот так: 

    "background": {
      "scripts": [
        "background.js"
      ],
      "persistent": false
    },

и тогда ваш popup.js должен быть помещен в popup.html: 

<h3>Duplink</h3>
...
<p>Link is:<span id="message"></span></p>

<script src="popup.js"></script>
0 голосов
/ 25 октября 2019

Я кое-что понял!

Я изменил тип ввода на кнопку, чтобы предотвратить действие по умолчанию. (Отправка формы) - 

 <h3>Duplink</h3>

    <p>Check if a link is already on this page.</p>
    <form>
            URL: <input id="URL" type="text" name="URL"><br>
            <input id='checkButton' type="button" value="Submit">
    </form>

    <p>Link is:<span id="message"></span></p>

и привязать событие к кнопке. 

document.addEventListener('DOMContentLoaded', function () {

    var btn = document.getElementById('checkButton');

    btn.addEventListener('click', function() {

    //Get URL from input
    var URL = document.getElementById('URL').value;

    //Get all links
    var links = document.querySelectorAll('.article a');

    //Convert Nodelist to Array
    var linksArr = [];
    links.forEach(node => linksArr.push(node.href))

    //Compare Link to Array
    var compareArr = linksArr.includes(URL);

    //Alert if link exists on page, or not
        if (compareArr === true) {
            document.getElementById('message').innerHTML = " On the page - Don't Add Link";
        }
        else {
            document.getElementById('message').innerHTML = ' Not on the page - Add Link';
        }
   });
});
0 голосов
/ 23 октября 2019

используйте addEventListener для привязки события к кнопке также:

Проверьте код ниже: 

document.addEventListener('DOMContentLoaded', function () {
    var btn = document.getElementById('checkButton');
    btn.addEventListener('click', function() {
        alert("button clicked");
    });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...