Ric*_*ark 16 javascript google-chrome click google-chrome-extension
我正在尝试创建一个Chrome扩展程序,当您单击扩展程序上的按钮时,它将单击网页上的元素,但由于某种原因,无论我尝试什么,它都不会执行任何操作.
到目前为止我已经有了这个
的manifest.json
{
"manifest_version": 2,
"name": "Such Activity",
"description": "Wow",
"version": "1.0",
"permissions": [
"tabs", "<all_urls>"
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": [ "<all_urls>" ],
"js": ["content_script.js"]
}
]
}
popup.html
<!doctype html>
<html>
<head>
<title>activity</title>
<style>
</style>
<script src="content_script.js"></script>
</head>
<body>
<button id="clickactivity">click</button>
</body>
</html>
content_script.js
function ClickPlanet()
{
var planets = document.getElementsByClassName("planet-name");
var randomplanet = Math.floor(Math.random() * planets.length);
var clickplanet = planets[randomplanet];
clickplanet.click();
setInterval(function () { ClickPlanet() }, 2000);
}
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('clickactivity').addEventListener('click', ClickPlanet);
});
我似乎得到的只是这个错误
Uncaught TypeError: Cannot read property 'click' of undefined
我已经花了几个小时摆弄这个,但我无法让它工作.任何和所有的帮助表示赞赏!
Mar*_*lli 31
看起来你误解了内容脚本的行为.
引用官方文档:
内容脚本是在网页上下文中运行的JavaScript文件.通过使用标准文档对象模型(DOM),他们可以阅读浏览器访问的网页的详细信息,或对其进行更改.
所以,使用你content_script.js的内容popup.html没有多大意义,显然会导致错误,因为你class="planet-name"的popup.html页面中没有任何按钮.
要执行您想要的操作,您需要为您创建一个不同的脚本popup.html,并为该按钮添加一个侦听器,因此当单击它时,您可以将content_script.js脚本注入页面以单击"planet"元素.
所以你必须:
manifest.json删除"content_scripts"字段popup.js要在popup.html页面中添加的文件popup.js注入content_script.js文件chrome.tabs.executeScript()content_script.js,使其直接单击页面上的按钮首先,编辑你的manifest.json,它应该是这样的:
{
"manifest_version": 2,
"name": "Such Activity",
"description": "Wow",
"version": "1.0",
"permissions": ["tabs", "<all_urls>"],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
然后,从中删除并用脚本替换它content_script.jspopup.htmlpopup.js:
<!doctype html>
<html>
<head><title>activity</title></head>
<body>
<button id="clickactivity">click</button>
<script src="popup.js"></script>
</body>
</html>
创建popup.js脚本并将侦听器添加到将脚本注入当前页面的按钮:
function injectTheScript() {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
// query the active tab, which will be only one tab
//and inject the script in it
chrome.tabs.executeScript(tabs[0].id, {file: "content_script.js"});
});
}
document.getElementById('clickactivity').addEventListener('click', injectTheScript);
现在,在您的工作中content_script.js,您需要直接点击按钮,而且您也不需要使用DOMContentReady,因为Chrome会等待自己注入脚本.所以,你的新人content_script.js将是:
function clickPlanet() {
var planets = document.getElementsByClassName("planet-name"),
randomplanet = Math.floor(Math.random() * planets.length),
clickplanet = planets[randomplanet];
clickplanet.click();
}
clickPlanet();
从HERE下载扩展的工作示例.
我强烈建议您查看我的示例中使用的方法的文档,以完全理解它们的行为及其属性,这里有一些您可能会觉得有用的链接:
| 归档时间： |
|
| 查看次数： |
23468 次 |
| 最近记录： |