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

【问题标题】：Fill form via chrome extension popup通过 chrome 扩展弹出窗口填写表单
【发布时间】：2017-11-19 01:59:40
【问题描述】：

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

【问题讨论】：

标签： jquery google-chrome-extension browser-action

【解决方案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 以控制何时注入脚本。您应该没有问题，因为在浏览器操作点击和能够点击填充之间存在自然延迟。

【讨论】：

谢谢！但我希望能够从弹出菜单中单击填充链接（因为我可能有不止一组值和多个链接）这可能吗？
填写链接在我的回答弹出窗口中
使用多个填充链接，只需发送和回复其他消息，例如填充字段2
当我点击扩展图标时，它不显示 html 锚链接填充
指令是添加这个到popup.html: