Chrome扩展程序 - 编辑文本字段

Question

我正在尝试编写我的第一个Chrome扩展程序.点击后,它会自动填写我大学登录页面的ID和密码字段(其表格的自动填充功能已禁用).这是一个非常具体的页面.

我有一些问题.我搜索了Google和SO,但无法找到有关如何通过Chrome更改文本字段值的说明.我知道如何在HTML和JavaScript中执行此操作,但是我无法获得正确的输入来修改其文本.

我也尝试过使用jQuery,我发现了一些例子,但没有运气.我有一个调用JavaScript文件的HTML页面(popup.html).我也尝试将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()但仍然没有运气..

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

Answer 1

您需要使用"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"]
}

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扩展程序都可以自行运行和运行.他们可以在切换页面时继续处理.他们在自己的沙盒环境中.