Question

我需要迭代并单击页面上具有类.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）时，没有任何反应。

Answer 1

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

假设您要在内容页面中触发类别为“.star_gray”的所有元素的click事件，则以下代码会在您单击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"});
});

Answer 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();

但请注意，这只能解决“通过扩展程序在网页上模拟点击事件”的问题。这并不意味着“保持迭代并在重定向后单击”将起作用。你最好用另外一个问题来详细说明你的意思。

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

2 个答案: