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

我需要迭代并单击页面上类.star_gray的所有元素，并在重定向后保持迭代和点击。运行JavaScript代码不能满足第二个要求，所以我打算编写一个Chrome扩展。模拟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），没有任何反应。

来源

2016-01-04 Jason Lam

'document.getElementById（'＃check-btn'）;'是错误的。删除'＃'符号。你可以用'document.querySelector'来使用它，因为它表示下面的文本是一个id。但是，使用仅查找元素标识的函数，这是多余的和错误的。 – enhzflep

@enhzflep对不起，这是一个错字。如果没有'＃'，代码仍然不起作用。 –

您无法在后台页面访问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"}); 
});

来源

2016-01-04 10:22:12

感谢您的澄清。现在消息在内容和背景之间成功发送，但content_script中的'sendResponse'之外的代码不起作用。 –

你为什么要为[activeTab]（https://developer.chrome.com/extensions/activeTab）可以完成的事情建议'tabs'权限？ – minj

谢谢你提及！由于我在查询标签，我需要标签权限。但是，您也可以声明activeTab权限并使用“chrome.browser.Action.onClicked.addListener（function（tab）{...}）;”代替。 –

提高以前的答案被@灰原爱不使用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();

但请注意，这只是解决了“模拟通过点击网页上的活动延伸'的问题。这并不意味着'保持迭代和重定向后的点击'将起作用。最好你用详细描述你的意思来创建另一个问题。

来源

2016-01-04 13:46:00 minj

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

回答

相关问题