从 Chrome 扩展程序中的 URL 自动填充答案

【问题标题】：Autofill from URL in the Chrome extension从 Chrome 扩展程序中的 URL 自动填充
【发布时间】：2020-05-15 13:04:11
【问题描述】：

我想为我的密码管理程序准备一个 Chrome 扩展程序。密码管理程序在本地对用户名和密码进行加密，因此不在任何服务器上。我不是每次都复制和粘贴，而是将用户名和密码发送到 Google 地址行，如下所示：

https://stackoverflow.com/users/login?user_name=USERNAME&password=PASSWORD

我希望 Google 扩展程序自动将地址行中的用户名和密码添加到相应的文本框中。不幸的是，我对此一无所知。我下载并查看了 Daslane 之类的 Google 扩展程序，但它们都非常复杂，我无法理解。你的想法和例子，如果可能的话，关于如何非常简单地做到这一点对我来说非常有价值。

【问题讨论】：

您可以尝试使用content script 从location.href 读取数据，解析它（可能使用正则表达式）并填充相应的文本框。

标签： javascript google-chrome google-chrome-extension

【解决方案1】：

首先你需要找到简单的chrome扩展sample code。

这是来自 chrome 开发者页面的简单来源。

之后，您必须使用chrome开发工具检测控件名称并使用此脚本自动填充并单击登录按钮。

function AutoFill() {
    var html = window.location.href + "\n\n";

    if (html.includes("example.com") == true)
    {
        document.getElementById("username").value = "username"
        document.getElementById("password").value = "password"
        document.getElementsByName("login")[0].click();
    }       
    return html;
}
chrome.extension.sendRequest(AutoFill());

【讨论】：

【解决方案2】：

要在文档上填写表格，您需要访问文档。您可以使用此内容脚本 - https://developer.chrome.com/extensions/content_scripts

我不确定您为什么要通过 URL 传递凭据。我认为这是一种不好的做法，它可能会破坏网站行为。最好从后台脚本获取凭据 - https://developer.chrome.com/extensions/background_pages

内容脚本与后台页面的通信可以通过chrome.runtime.onMessage事件实现。

如果你真的需要从 URL 中获取参数，你可以在内容脚本中使用 URLSerachParams - https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

例子：

var url = new URL(location.href);
console.log(url.searchParams.get('user_name'));

【讨论】：

你能举一个背景页面的例子吗？