单击带有 chrome 扩展名的网站上的按钮答案

【问题标题】：Clicking Buttons on a Website with a chrome extension单击带有 chrome 扩展名的网站上的按钮
【发布时间】：2018-09-07 20:31:37
【问题描述】：

我正在尝试制作一个 google chrome 扩展程序，允许用户在 chrome 扩展程序菜单中按下一个按钮，并导致点击所选网页上的一个按钮。我目前遇到的问题是我的语法和代码注射器.js。它说意外的令牌；和意外的令牌 [.我将不胜感激任何帮助。这是我的 manifest.json：

    {
  "manifest_version":2,

  "name": "Button Click",
  "description": "Be able to press buttons",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab",
    "storage"
  ]
}

这是我的html

    <!DOCTYPE html>

<html>  
    <head>
    <title>Fill</title>

    </script><script src="popup.js"></script>

    </head>
  <body>
    <h2 id="htwo">Button presser</h2>
    <button id="press">Press Button</button>
  </body>

</html>

还有我的javascript：

window.onload=function(){
    if(document.getElementById("press")){
        document.getElementById("press").addEventListener('click',function(){
            document.getElementById("htwo").innerHTML="yay";
            chrome.tabs.executeScript({
                file:"injector.js"
            });
        });
    }
}

injector.js：

function pressButton(){
    var buttons=document.getElementsByClassName("button"),
    button[0].click();
}
pressButton();

顺便说一句，我试图单击的按钮是一个输入按钮，我在其中检查元素，我得到： “（输入类型=“提交”名称=“提交”值=“添加到购物车”class=“按钮”）” 由于某种原因不会显示这个按钮可以在这里找到： http://www.supremenewyork.com/shop/accessories/p840x2jsc/yks6zay73

注意：我知道还有其他人就同一主题提出问题，但他们使用的方法对我不起作用。感谢您帮助我！

【问题讨论】：

扩展弹出窗口是一个单独的页面，有自己的窗口、文档、DOM。您需要在选项卡中运行内容脚本，请参阅文档和示例。
好的，感谢您的帮助
@wOxxOm 我已经编辑了我的脚本并添加了一个内容脚本，但它仍然不起作用。

标签： javascript html google-chrome-extension

【解决方案1】：

现在可以了。安装它并检查它。要查看扩展的工作原理，您应该在此站点 (StackOverflow) 上并提供所有这些文件和icon.png

manifest.json

{
    "manifest_version": 2,
    "name": "Button Click",  
    "description": "Be able to press buttons",  
    "version": "1.0",    
    "browser_action": { 
        "default_icon": "icon.png",
        "default_popup": "popup.html"  
    },
    "permissions": ["tabs", "<all_urls>"]
}

popup.html

<!doctype html>  
<html>  
    <head><title>Fill</title></head>  
    <body>
        <h2 id="htwo">Button presser</h2>
        <button id="press">Go to activity tab</button>  
        <script src="popup.js"></script> 
    </body>
</html>

popup.js

function injectTheScript() {
    // Gets all tabs that have the specified properties, or all tabs if no properties are specified (in our case we choose current active tab)
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        // Injects JavaScript code into a page
        chrome.tabs.executeScript(tabs[0].id, {file: "utilities.js"});
    });
}
// adding listener to your button in popup window
document.getElementById('press').addEventListener('click', injectTheScript);

utilities.js

/**
 * Gets the desired element on the client page and clicks on it
 */
function goToActivityTab() {
    var activityTab = document.getElementsByClassName("my-profile")[0];

    activityTab.click();
}

goToActivityTab();

欲了解更多信息，请使用这些链接

chrome.tabs
Content Scripts
Tutorial 适用于 Google 的初学者

【讨论】：

如果我想选择另一个按钮，我该怎么做？
我能找到按钮的类并替换我的配置文件吗？
很抱歉打扰您，但我有几个问题
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) 做什么？还有 chrome.tabs.executeScript(tabs[0].id, {文件：“utilities.js”}）；这样做。
好的，感谢您的帮助。我通过更改一些 javascript 使其工作。我没有使用document.getElementsByClassName，而是使用了document.getElementsByName。另外你需要添加一个window.onload函数，否则我认为程序会启动得太早。无论如何，非常感谢你的帮助