从Chrome扩展模拟页面上的点击元素？ [英] Simulate clicking elements on the page from a Chrome extension?
问题描述
我需要在页面上迭代并单击类 .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：[
tab，
http：// * / *，
https：// * / *
]
}
$ b popup.html
c $ c><！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）;
}）;
函数injectScript（）{
alert（'Handler called！'）;
chrome.tabs.executeScript（null，{file：'background.js'}）;
}
background.js
$ p $
$（document）.ready（function（）{
$（'。star_gray'）。click（）;
$ （'a.btn.page_next'）。click（）;
}）;
使用上面的代码，当我点击按钮（＃check-btn
通过@ haibara-ai改进以前的答案不是使用 标签权限。 ready（），因为脚本只在浏览器时运行在$
$ b manifest.json
{
name：Test，
version：1.0，
permissions：[
activeTab
]，
description：Test，
background：{
scripts：[
background.js
}，
browser_action：{
title：Test
}，
manifest_version：2
}
表现力ound.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。'）点击（）;
$（'a.btn.page_next'）。click（）;
请注意，这只能解决'通过扩展'模拟网页上的点击事件'问题。这并不意味着'保持迭代和重定向后的点击'将起作用。你最好用你的具体细节创建另一个问题。
I need to iterate and click all the elements with the class .star_gray on page, and keep the iteration and clicking going after redirection. Running JavaScript code cannot meet the second requirement, so I plan to write a Chrome Extension.
But I failed to simulate clicking events on web pages via the extension. My project is as below:
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();
});
With the code above, when I click the button(#check-btn) on the popup, nothing happens.
Improving the previous answer by @haibara-ai not to use the tabs permission.
Note that in your case you don't even need to watch for ready() since the script runs only when browser action is triggered which is presumably well after 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();
Note, however that this only solves the 'simulate clicking events on web pages via the extension' question. It does not mean that 'keep the iteration and clicking going after redirection' will work. It's best you create another question with the details of what exactly you mean by that.
这篇关于从Chrome扩展模拟页面上的点击元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
