Chrome 扩展程序 - 修改文本字段

Chrome Extension - edit a text field

本文关键字：文本 字段 修改 扩展 程序 Chrome      更新时间：2023-09-26

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

我有几个问题。我搜索了Google和SO，但找不到有关如何通过Chrome更改文本字段值的说明。我知道如何在HTML和JavaScript中做到这一点，但是我无法获得正确的输入来修改其文本。

我也尝试使用我找到的一些例子来使用jQuery，但没有运气。我有一个HTML页面（popup.html），它调用了一个JavaScript文件。我还尝试将JS放在内容脚本中

下面是清单.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"]
      }
  ]
}

我对弹出窗口的尝试之一.js（从popup.html调用）是：

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

我也尝试将此代码放在内容中.js相同的结果，它打印到控制台，但是它会打印弹出窗口.html内容。

我也尝试直接（以及从上面的方法）通过document.getElementById()直接访问元素，但仍然没有运气。

所以谁能告诉我我做错了什么？

您需要

使用 "web_accessible_resources" 属性将 JavaScript 文件注入页面。 看这里：

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"
  },
  "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"]
}

注入.js

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

内容.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));

然后只需将要使用的 JavaScript 代码放入 inject.js 即可操作页面。 请务必更改匹配项以仅匹配您大学的登录页面。

之所以会出现这种情况，是因为无论您在哪个网站上，Chrome 扩展程序都可以自行运行和运行。 当您切换页面时，它们可以继续处理。 它们位于自己的沙盒环境中。

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

下面是一个清单：

{
    "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();

可能的解决方法（chrome 扩展）：自动完成 = 打开，但它不适用于某些表单。

相关文章：