使用扩展程序的 Chrome 自动化；单击按钮并填写表格

Question

在浏览了 Stack Overflow 一段时间以及过去与该主题相关的所有问题之后，我还没有真正找到合适的答案/问题来提供与我类似的情况的示例。我基本上需要一个 chrome 扩展（点击图标后）在填写某些相关表单后单击页面上的某些对象/按钮，例如填写相关用户名和密码框后的登录按钮，或搜索按钮填写搜索栏后的搜索引擎（例如Google）。

另外，（不直接相关）在扩展程序开始自动执行某些浏览器操作之前，它将打开我想要在新页面中编辑的页面，并关闭当前选项卡。如果有帮助，这里是我到目前为止整理的一些工作代码：

背景.js

    chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.tabs.create({
        url: "http://google.com"
    });

    chrome.tabs.getSelected(function (tab2) {
        chrome.tabs.remove(tab.id, function() { });
    });

});

我对 chrome 扩展非常陌生，如果有人可以在解释中包含示例，我将非常感激！提前谢谢了！:)

Answer 1

我认为您正在寻找的是内容脚本。内容脚本被注入到扩展程序清单文件指定的每个页面中。

内容脚本可以访问它们所注入的 DOM，因此它们可以对 DOM 元素执行操作。以下是加载 jquery 和内容脚本的 manifest.json 文件的示例摘录：

清单.json

{
  ...

  "content_scripts": [
    {
      "matches": ["http://www.target-page.com"],
      "scripts": ["https://code.jquery.com/jquery-1.11.2.js", "my-script.js"]
    }
  ]

  ...
  }

内容.js

$(document).ready(function() {

   /* Get a reference to your form of interest. */
   var form = $('#form-id");
   /* ... Manipulate the form */

   /* Get a reference to your button of interest. */
   var button = $('#button-id');
   /* ... Manipulate the button (ie button.click())*/
 });