如何点击Chrome扩展程序中的按钮 [英] How to click on a button in Chrome Extension
问题描述
我已经研究过这一点了。
我试图设置一个简单的Chrome扩展，只需单击扩展按钮就点击一个元素。 ，我找不到一个简单的答案，说如何点击，其他人都有非常详尽的代码，我不明白，不知道是否有必要。我的意思是，每当我搜索点击时，我发现一个问题比我的关卡要先进得多。
（我即将做很多$ off这个扩展名，所以请你帮助一个兄弟;）
使用我所看到的我已经把代码拼凑在一起：
popup.js：
var evt = document.createEvent（HTMLEvents）;
evt.initEvent（click，true，true）;
document.getElementById（'product-addtocart-button'）。dispatchEvent（evt）;
manifest.Json：
{
manifest_version：2，
name：Shoe BOT，
description：该扩展程序显示Google图片当前页面的搜索结果，
version：1.0，
browser_action：{
default_icon：icon.png，
default_popup：popup.html
}，
权限：[
activeTab，
https://shop.adidas.ae/en/
}
popup.html：
<！doctype html>
<！ -
当单击扩展按钮时显示此页面，因为manifest.json中的
browser_action字段包含具有
值的default_popup键popup.html。
- >
< html>
< head>
< title>入门Extension的弹出式菜单< / title>
< style>
body {
}
#status {
}
< / style>
<！ - -
- JavaScript和HTML必须位于单独的文件中：有关详细信息和说明，请参阅我们的Content Security
- 策略文档[1]。
-
- [1]：https：//developer.chrome.com/extensions/contentSecurityPolicy
- >
< script src =popup.js>< / script>
< / head>
< body>
<！ - < div id =status>< / div>
< img id =image-resulthidden> - >
< / body>
< / html>
目前尚不清楚您为什么使用 document.createEvent（） 。该界面已弃用。要创建活动，您应该使用活动构造函数。但是，对于通用的 点击事件，您可以使用 click（）方法，而不必实际构造事件。
一个简单的，完整的插入内容脚本的Chrome扩展程序，点击 id =按钮product-addtocart-button当你点击 browser_action 按钮时：
background.js ：
chrome.browserAction.onClicked.addListener （function（tab）{
chrome.tabs.executeScript（tab.id，{
code：document.getElementById（'product-addtocart-button'）。click（）;
}）;
}）;
manifest.json ：
{
description：点击ID为product-addtocart-button的按钮，
manifest_version ：2，
name：click-product-addtocart-button，
version：0.1，
permissions：[
activeTab
]，
background：{
scripts：[
background.js
]
}，
browser_action：{
default_icon：{
32：myIcon.png
}，
default_title ：点击product-addtocart-button
}
}
I am just trying to set up a simple chrome extension that will just click on an element once the extension button is clicked on.
I have researched this a bit, and I can't find a simple answer that says how to click, everyone else has very elaborate code that I can't understand and don't know if it's necessary or not. What I mean is, whenever I search for just "click" I find a question that is much more advanced than my level.
(I am about to make a lot of $ off of this extension, so please will you help a brother out ;)
Using what I have seen I have scraped together the code:
popup.js:
var evt = document.createEvent ("HTMLEvents");
evt.initEvent ("click", true, true);
document.getElementById('product-addtocart-button').dispatchEvent (evt);
manifest.Json:
{
"manifest_version": 2,
"name": "Shoe BOT",
"description": "This extension shows a Google Image search result for the current page",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab",
"https://shop.adidas.ae/en/"
]
}
popup.html:
<!doctype html>
<!--
This page is shown when the extension button is clicked, because the
"browser_action" field in manifest.json contains the "default_popup" key with
value "popup.html".
-->
<html>
<head>
<title>Getting Started Extension's Popup</title>
<style>
body {
}
#status {
}
</style>
<!--
- JavaScript and HTML must be in separate files: see our Content Security
- Policy documentation[1] for details and explanation.
-
- [1]: https://developer.chrome.com/extensions/contentSecurityPolicy
-->
<script src="popup.js"></script>
</head>
<body>
<!--<div id="status"></div>
<img id="image-result" hidden>-->
</body>
</html>
It is not clear why you are using document.createEvent(). That interface is deprecated. To create events, you should be using event constructors. However, for a generic click event on an HTML element, you can just use the click() method without having to actually construct the event.
A simple, complete Chrome extension which injects a content script to click the button with id="product-addtocart-button" when you click on a browser_action button would be:
background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(tab.id,{
code: "document.getElementById('product-addtocart-button').click();"
});
});
manifest.json:
{
"description": "Click a button with ID=product-addtocart-button",
"manifest_version": 2,
"name": "click-product-addtocart-button",
"version": "0.1",
"permissions": [
"activeTab"
],
"background": {
"scripts": [
"background.js"
]
},
"browser_action": {
"default_icon": {
"32": "myIcon.png"
},
"default_title": "Click product-addtocart-button"
}
}
这篇关于如何点击Chrome扩展程序中的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
