javascript - 如何从 chrome 扩展程序填写网页表单中的文本字段？

Question

到目前为止，我已经有了一个扩展程序，它列出了用户所在的网页和一个按钮。单击该按钮时，应在文本字段中填写“testing123”。

在我测试的网页上，表单有一个 ID 和名称“form”，文本字段有一个 ID 和名称“body”。

如果我能在填写此文本字段或一般文本字段时得到一些帮助，我将不胜感激。

这是我目前拥有的文件:

list .json

    {      "name": "Extension Menu",      "version": "1.0",      "manifest_version": 2,      "description": "My extension",      "browser_action": {        "default_icon": "icon.png",        "default_menu": "Menu",        "default_popup": "popup.html"      },      "icons": {        "128": "icon.png"      },      "permissions": [          "tabs", "http://*/*", "activeTab"        ]    }

popup.html

<p id="currentLink">Loading ...</p>
<hr />
<ul id="savedLinks"></ul>
<script type="text/javascript" src="popup.js"></script><br>
<button type="button" onclick="fill in text box with the word 'testing123'">Go!</button>

popup.js

    chrome.tabs.getSelected(null, function(tab) {      // $("#body").val("testing123");      // document.getElementById('body').value = 'testing123';      document.getElementById('currentLink').innerHTML = tab.url;    });

我试过使用:

1. $("#body").val("testing123");

2. document.getElementById('body').value = 'testing123';

但他们似乎并没有工作。

Answer 1

您不能直接从popup 访问网页。你应该使用 content scripts去做这个。 内容脚本在网页上下文中运行。

将此添加到您的 list 中:

"content_scripts": [
        {
            "matches": [
                "http://www.example.com/*"
            ],
            "js": [
                "jquery.js",
                "myscript.js"
            ]
        },

myscript.js :

$("#body").val("testing123");

document.getElementById('body').value = 'testing123';