Chrome扩展程序 - 编辑文本框

Question

Chrome扩展程序 - 编辑文本框

javascriptgoogle-chrome-extension

6

我正在尝试编写我的第一个Chrome扩展程序。当单击时，它可以自动填写我大学登录页面的ID和密码字段（该表单的自动填充已被禁用）。这是一个非常特定的页面。

我有一些问题。我在Google和SO上搜索了一下，但没有找到如何通过Chrome更改文本字段值的解释。我知道如何在HTML和JavaScript中做到这一点，但是我无法获取正确的输入以修改其文本。

我还尝试使用了几个jQuery示例，但没有成功。我有一个HTML页面（popup.html），它调用一个JavaScript文件。我还尝试将JS放置在内容脚本中。

以下是manifest.json:

{
  "name": "My First Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
      "tabs", "http://*/*"
    ],
    "content_scripts": [
      {
        "matches": ["http://*/*"],
        "js": ["jquery-1.7.2.min.js","content.js"]
      }
  ]
}

我尝试编写的popup.js（从popup.html调用）之一如下：

chrome.tabs.getSelected(null, function(tab) {
    console.log(document)
});

我还尝试将此代码放置在content.js中，但结果相同，它会打印到控制台，但是打印的是popup.html的内容。

我还尝试直接（和上面的方法一样）通过document.getElementById()直接访问元素，但仍然没有成功。

所以，有人能告诉我我做错了什么吗？

- La bla bla

直接强制自动填充会更容易吗？ - Wug

我不知道。:) 当我查看源代码时，它说在表单中autocomplete="OFF"，它能被更改以允许自动完成并记住我输入的内容吗？我不知道。另外，我想知道如何做到这一点。 - La bla bla

有可能您的扩展程序只需搜索禁用了自动填充的表单并启用它们。 - Wug

3个回答

3

我认为您应该使用一个简单的内容脚本，在登录页面上执行。您甚至不需要任何浏览器动作或弹出窗口。

这是一个清单文件：

{
    "name": "Fill my password",
    "version": "1.0",
    "manifest_version": 2,
    "description": "Fills my password on University login page",
    "content_scripts": [
        {
            "matches": ["http://www.myuniversity.edu/login.html"],
            "js": ["content.js"]
        }
    ]
}

以下是内容脚本：

// define your username and password
var myUsername = '...';
var myPassword = '...';

// find the fiends in your login form
var loginField = document.getElementById('...');
var passwordField = document.getElementById('...');

// fill in your username and password
loginField.value = myUsername;
passwordField.value = myPassword;

// if you want, you can even automaticaly submit the login form
var loginForm = document.getElementById('...');
loginForm.submit();

- Fczbkk

0

可能的解决方案（Chrome扩展程序）：Autocomplete = on，但它可能无法与某些表单一起使用。

- Jan.J

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Micah Henning · Accepted Answer

您需要使用“web_accessible_resources”属性将JavaScript文件注入到页面中。请参见以下内容：

manifest.json

（注意：此处保留了HTML标签，仅翻译文本部分）

{
  "name": "My First Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png"
  },
  "permissions": [
      "tabs", "http://*/*"
    ],
    "content_scripts": [
      {
        "matches": ["http://*/*"],
        "js": ["jquery-1.7.2.min.js","content.js"],
        "run_at": "document_start"
      }
  ],
  "web_accessible_resources": ["inject.js"]
}

inject.js

(function () {
    console.log('test');
}());

content.js

(function (chrome) {
    var js = document.createElement('script');
    js.type = 'text/javascript';
    js.src = chrome.extension.getURL('inject.js');
    document.getElementsByTagName('head')[0].appendChild(js);
}(chrome));

只需将您想要在inject.js中使用的JavaScript代码放入其中以操纵页面。确保更改匹配项以仅匹配您大学的登录页。

之所以如此，是因为Chrome扩展程序可以在其自己的环境中运行和操作，而不受您所在的任何网站的影响。并且它们可以在您切换页面时继续处理。它们处于自己的沙盒环境中。