我正在创建一个扩展程序，它接受值，并且仅当我单击扩展程序上的提交按钮时才将其填充到页面上。我无法让弹出窗口与页面进行通信。我能够使用
chrome.action.onClicked.addListener这是测试扩展的示例站点： https://www.roboform.com/filling-test-all-fields。我的目标是名字 (02frstname)。
/* index.html */
<body>
<form>
<div>
<label for="f_name">Fist name</label>
<input name="f_name" />
</div>
<div>
<label for="l_name">Last name</label>
<input name="l_name" />
</div>
<button id="submit-btn" type="button">Fill values</button>
</form>
<script src="script.js" type="module"></script>
</body>
/* contentScript.js */
const submit = document.getElementById("submit-btn");
submit.addEventListener("click", async () => {
const fnameInput = document.getElementsByName("02frstname");
fnameInput[0]?.value = "example";
});
/* manifest.json */
{
"manifest_version": 3,
"name": "Form example",
"version": "1.0",
"action": { "default_popup": "index.html"},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["contentScript.js"]
}
],
"permissions": ["activeTab", "scripting", "storage"]
}
*/
浏览器中的许多免费扩展程序可以为您做到这一点，而无需在您的网站中加载更多代码： 我在 google Chrome 和 Edge 浏览器中使用 Fake Filler 扩展