2

我想从fill.js加载值，当单击扩展popup.html中的锚链接时，它将自动填充远程页面上的表单字段，其字段 ID 为#user + #pw。这是我目前在我的扩展中拥有的，但我不确定它是否在清单文件中丢失了某些东西，或者是否需要back.js。

填充.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>

清单.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">
4

1 回答 1

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'
    });
});

填充.js：

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

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

于 2017-11-16T06:55:27.540 回答