Uncaught TypeError: Невозможно установить свойство 'value' из null - Добавление значения в поля с расширением chrome - PullRequest
1 голос
/ 06 мая 2019

Я просмотрел множество других ответов для этой ситуации, но ни один из них не работал правильно, или мне нужна персональная помощь.

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

Чтобы уточнить: я хочу нажать кнопку «память» на расширении, чтобы конкретное поле заполнилось определенным текстом / переменной

Вот мой текущий код:

manifest.json

{
    "manifest_version": 2,

    "name": "Jacob's extension",

    "description": "Autofill things",

    "version": "1.0",

    "content_scripts": [
        {
            "matches":["http://example.com/*"],
            "js":["popup.js"]
        }
    ],
    "web_accessible_resources": ["content.js"],

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

    "permissions": [
    "activeTab"

    ]

}

popup.js

document.addEventListener('DOMContentLoaded', function() {
    var link = document.getElementById('fillMemory');
    // onClick's logic below:
    link.addEventListener('click', function() {
    (function (chrome) {
      var js = document.createElement('script');
        js.type = 'text/javascript';
         js.src = chrome.extension.getURL('content.js');
         document.getElementsByTagName('head')[0].appendChild(js);
        }(chrome));
    })
})

content.js

document.getElementById('testfield').value="moo";

popup.html

<!doctype html>
<html>  
<script src="popup.js"></script>
<style>
.btn-group button {
  background-color: #008CBA; /* Green background */
  border: 1px solid black; /* Green border */
  color: white; /* White text */
  padding: 10px 24px; /* Some padding */
  cursor: pointer; /* Pointer/hand icon */
  width: 100%; /* Set a width if needed */
  display: block; /* Make the buttons appear below each other */
}

.btn-group button:not(:last-child) {
  border-bottom: none; /* Prevent double borders */
}

/* Add a background color on hover */
.btn-group button:hover {
  background-color: #3e8e41;
}
</style>
<body>
  <head>
    <title>Autofiller</title>
  </head>
  <body>
    <h1>Autofiller</h1>
    <div class="btn-group">
        <button id="fillProcessor">Processor</button>
        <button id="fillMemory">Memory</button>
    </div>
  </body>
</html>

Я часами просматривал подобные проблемы, но все ещевозникает та же проблема с полем null (оно существует на веб-странице) Я предполагаю, что расширение ищет во всплывающем окне идентификатор, который находится на веб-странице, но я не уверен.

Любая помощь будет оценена.

1 Ответ

0 голосов
/ 06 мая 2019

У вас нет элемента с именем 'testfield'.

поставить это под кнопки

<div id="testfield">some text</div>

затем измените

document.getElementById('testfield').value="moo";

до

document.getElementById('testfield').innerHTML="moo";

это заставило меня работать.

Редактировать после получения дополнительной информации ...

Оберните content.js в функцию и вызовите ее, когда окно будет готово.

content.js:

function moo() {
    document.getElementById('testfield').innerHTML="moo";
}

, затем позвоните window.onload = moo();

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