从 Chrome 扩展程序模拟点击页面上的元素？答案

【问题标题】：Simulate clicking elements on the page from a Chrome extension?从 Chrome 扩展程序模拟点击页面上的元素？
【发布时间】：2016-04-07 19:44:00
【问题描述】：

我需要迭代并单击页面上类.star_gray 的所有元素，并在重定向后保持迭代并单击继续。运行 JavaScript 代码不能满足第二个要求，所以我打算写一个 Chrome 扩展。

但我未能通过扩展程序模拟网页上的点击事件。我的项目如下：

manifest.json

{
  "manifest_version": 2,

  "name": "Check'em All",
  "description": "",
  "version": "1.0",

  "browser_action": {
   "default_popup": "popup.html"
  },
  "background": {
    "persistent": true,
    "scripts": ["jquery.js", "background.js"]
  },
  "content_scripts": [{
    "matches": ["file:///*"],
    "js"     : ["popup.js"]
  }],
  "permissions": [
    "tabs",
    "http://*/*",
    "https://*/*"
  ]
}

popup.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Check'em All!</title>
</head>
<body>
  <h1>Check'em All!</h1>
  <button id="check-btn">BUTTON</button>
  <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
  <script src="popup.js"></script>
</body>
</html>

popup.js

document.addEventListener('DOMContentLoaded', function () {
  var btn = document.getElementById('check-btn');
  btn.addEventListener('click', injectScript);
});

function injectScript() {
  alert('Handler called!');
  chrome.tabs.executeScript(null, { file: 'background.js' });
}

background.js

$(document).ready(function(){
  $('.star_gray').click();
  $('a.btn.page_next').click();
});

使用上面的代码，当我点击弹出窗口上的按钮（#check-btn）时，什么也没有发生。

【问题讨论】：

document.getElementById('#check-btn'); 是错误的。删除 # 符号。您可以将它与document.querySelector 一起使用，因为它表示以下文本是一个id。但是，对于只查看元素 ID 的函数，这是多余的，而且是错误的。
@enhzflep 抱歉打错了。没有#，代码仍然无法工作。
还没有接受的答案吗？

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

【解决方案1】：

您无法在后台页面中访问 DOM。根据您的代码，您可能需要向Official Tutorial 了解更多信息，因为您似乎对“弹出窗口”、“背景”和“内容”感到困惑。

假设您要触发内容页面中所有具有“.star_gray”类的元素的点击事件，则以下代码会在您点击 browserAction 时触发这些事件。

manifest.json

{
  "name": "Test",
  "version": "1.0",
  "permissions": [
    "tabs"
  ],
  "description": "Test",
  "background": {
    "persistent": false,
    "scripts": [
      "background.js"
    ]
  },
  "content_scripts": [
    {
      "matches": [
        "*://*/*"
      ],
      "js": [
        "jquery.js",
        "content.js"
      ],
      "run_at": "document_end",
      "all_frames": true
    }
  ],
  "browser_action": {
    "title": "Test"
  },
  "manifest_version": 2
}

background.js

chrome.browserAction.onClicked.addListener(function() {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        chrome.tabs.sendMessage(tabs[0].id, {command: "click"}, function(response) {
            console.log(response.result);
        });
    });
});

content.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)    {
    $('.star_gray').click();
    $('a.btn.page_next').click();

    sendResponse({result: "success"});
});

【讨论】：

感谢您的澄清。现在消息在内容和后台之间发送成功，但是content_script中sendResponse以外的代码不起作用。
你为什么建议 tabs 允许使用 activeTab 完成的事情？
感谢您提及！由于我正在查询选项卡，因此我需要选项卡权限。但是，您也可以只声明 activeTab 权限并使用“chrome.browser.Action.onClicked.addListener(function(tab){...});”而是。

【解决方案2】：

改进@haibara-ai 之前的答案，不使用tabs permission。

请注意，在您的情况下，您甚至不需要注意 ready()，因为脚本仅在触发浏览器操作时运行，这大概在 DOMContentLoaded 之后。

manifest.json

{
  "name": "Test",
  "version": "1.0",
  "permissions": [
    "activeTab"
  ],
  "description": "Test",
  "background": {
    "scripts": [
      "background.js"
    ]
  },
  "browser_action": {
    "title": "Test"
  },
  "manifest_version": 2
}

background.js

var files = [
    'jquery.js',
    'content.js',
];

chrome.browserAction.onClicked.addListener(function() {
    for (var file of files) {
        chrome.tabs.executeScript({
            file: file,
            allFrames: true,
        });
    }
});

content.js

$('.star_gray').click();
$('a.btn.page_next').click();

请注意，这仅解决了“通过扩展程序模拟网页上的点击事件”问题。这并不意味着“保持迭代并单击重定向后继续”将起作用。最好创建另一个问题，详细说明您的意思。

【讨论】：