Элементы, не отображаемые в Инспекторе фоновых страниц и получающие addEventListener, являются нулевой ошибкой - PullRequest
0 голосов
/ 22 сентября 2018

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

всплывающее окно.html

<!doctype html>
<html>
  <head>
    <title>Add a Snippet</title>
    <script src="popup.js"></script>
    <link rel="stylesheet" type="text/css" href="popup.css">
  </head>
  <body>
    <h1>Add a Snippet</h1>
   <form id="form">
     <textarea id="code"></textarea>
    <button type="submit" id="checkPage">Add Snippet</button>
   </form>
  </body>
</html>

popup.js Чего я на самом деле не понимаю, так это того, что в соответствии с имеющимися там строками console.log и ошибкой происходит загрузкаDOMContent, и у него нет проблем с поиском формы по идентификатору (пусть f = document.getElementById ('form');).Но он бомбит, когда я пытаюсь подключить прослушиватель событий?

document.addEventListener('DOMContentLoaded', function() {
console.log('the domcontentloaded');
  let f = document.getElementById('form');
    f.addEventListener('submit', function(e){
    console.log('the form was submitted');
        e.preventDefault();
    })
}, false);

manifest.json

{
  "name": "My Awesome Plugin",
  "description": "This extension will be awesome",
  "version": "1.0",
 "browser_action": {
    "default_icon": "icon.png",
   "default_popup": "popup.html",
    "default_title": "This is Awesome"
 },
  "background": {
    "scripts": ["jquery-2.2.3.min.js", "background.js","popup.js"],
    "persistent": false
  },

  "permissions": [
    "activeTab",
    "declarativeContent",
    "https://ajax.googleapis.com/",
    "storage",
    "tabs",
    "http://*/*",
    "https://*/*"
  ],
 "content_scripts": [
     {
         "matches": [
             "<all_urls>"
         ],
         "js": ["login.js"]
     }
 ],
  "manifest_version": 2
}

login.js

console.log('login.js is ready to party');

Когда я загружаю, я получаю это в фоновом инспекторе (или как там это называется).Так что это не найти форму.enter image description here

Итак, я посмотрел на элементы, и я запутался, потому что они не показывают форму или текстовую область.Но когда я нажимаю на значок расширения Chrome, он там.enter image description here

enter image description here

1 Ответ

0 голосов
/ 25 сентября 2018

1 / Удалите popup.js из раздела "background / scripts" вашего манифеста.2 / Добавьте popup.js в качестве ссылки на скрипт в вашем файле popup.html.

Таким образом, popup.js будет работать в контексте DOM popup.html.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...