Question

针对这种情况，我查看了很多其他答案，但似乎都无法正常工作，或者我需要个性化帮助。

我正在尝试创建一个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（它确实存在于网页上），我假设扩展程序正在弹出窗口中搜索ID为在网页上，但我不确定。

任何帮助将不胜感激。

Answer 1

您没有任何名为“ 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();

未被捕获的TypeError：无法将属性“值”设置为null-将值添加到具有chrome扩展名的字段

1 个答案: