Question

我想从 fill.js 加载值，当点击扩展程序 popup.html 中的锚点链接时，它会自动填充具有字段的远程页面上的表单字段ID #user + #pw 。这是我目前在扩展程序中的内容，但我不确定它是否在清单文件中缺少某些内容，或者是否需要 back.js 。

fill.js

chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
if (msg.action === "fillFields") {
    $("#user").val("name@email.com")
    $("#pw").val("pass123")
}
});

popup.js

$("#fill").on("click", function(){
chrome.runtime.sendMessage({
    action: 'fillFields'
});

}）;

popup.html

<!DOCTYPE html>
<html>
<head>
<title>Autofill</title>
<script src="jquery.js"></script>
<script src="popup.js"></script>
</head>
<a href="#" id="fill">Fill</a>
</body>
</html>

的manifest.json

    {
    "manifest_version": 2,
    "name": "Autofill",
    "description": "",
    "version": "1.0",

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

    "permissions": [
      "tabs",
      "http://*/*",
      "https://*/*"    
    ]
  }

远程表单字段

<input name="user" type="text" id="user">
<input name="pw" type="text" id="pw">

Answer 1

您无法从fill.js访问#fill元素，该元素会被注入页面（即内容脚本）。弹出窗口在一个范围内运行，内容在另一个范围内运行，背景在另一个范围内运行。

在浏览器操作中注入jquery和填充脚本比在清单中加载它更好，因为它只会在需要时注入，并且在您单击填充时处理程序将准备就绪在弹出窗口中。

将此添加到popup.html：

<script src="jquery.js"></script>
<script src="popup.js"></script>

popup.js：

$("#fill").on("click", function(){
    chrome.runtime.sendMessage({
        action: 'fillFields'
    });
});

fill.js：

chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
    if (msg.action === "fillFields") {
        $("#user").val("name@email.com")
        $("#pw").val("pass123")
    }
});

查找run_at以控制何时注入脚本。您应该没有问题，因为浏览器操作点击和能够点击填充之间存在自然延迟。

通过chrome扩展弹出窗口填写表单

1 个答案: