Chrome 扩展（无法获取和单击新 chrome 选项卡上的元素）答案

【问题标题】：Chrome extensions (can't get and click elements on new chrome tabs)Chrome 扩展（无法获取和单击新 chrome 选项卡上的元素）
【发布时间】：2021-08-23 11:10:18
【问题描述】：

就是这样。让我解释一下自己。我编写了一个 chrome 扩展程序，当点击一个按钮时，它会打开一个新的调整大小的选项卡（贝宝登录），但我无法点击贝宝的“登录按钮”，因为试图

document.getElementById('btnLogin').click();

不起作用，也没有添加：

var paypal = window.open("https://www.paypal.com/es/signin", "PayPal", "width=400,height=400,location=yes,menubar=yes,status=yes,titilebar=yes,resizable=yes");
paypal.onload = function() {
    paypal.document.getElementById('btnLogin').click();
}

查看我的所有代码：

manifest.json

{
    "manifest_version": 2,
    "name": "Zapatillao",
    "description": "Yatusabe te cojo sapatilla",
    "version": "2.0.0",
    "content_scripts": [
        {
        "matches": ["<all_urls>"],
        "js": ["content.js"]
        }
    ],
    "browser_action": {
        "default_popup": "popup.html",
        "default_icon": "icon128.jpg"
    },
    "permissions": [
        "tabs",
        "http://*/*",
        "https://*/*",
        "chrome://*/*"
    ]
}

content.js

document.getElementById('paypal_prelog').addEventListener('click', function() {
    chrome.tabs.executeScript({
      file: "paypal_prelog.js"
    });
});

popup.html

<html>
    <head>
        <style>
            html, body {
                height: 200px;
                width: 200px;
            }
        </style>
    </head>
    <body>
        <h1>Discord: Loan#2334</h1>
        <button id='paypal_prelog'>PayPal Prelogin</button>
        <script src='content.js'></script>
    </body>
</html>

paypal_prelog.js

function sleep (ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

var paypal = window.open("https://www.paypal.com/es/signin", "PayPal", "width=400,height=400,location=yes,menubar=yes,status=yes,titilebar=yes,resizable=yes");
paypal.onload = function() {
    paypal.document.getElementById('btnLogin').click();
}

function closeWin() {
    paypal.close();
}

我已经尝试了上千种方法，希望你能帮助我。

【问题讨论】：

标签： javascript html google-chrome-extension paypal

【解决方案1】：

简而言之，您正在编写的 ManifestV2 扩展程序的解决方案是使用 chrome.windows.create 打开一个新的贝宝登录窗口，然后使用 chrome.tabs.executeScript 注入点击 btnLogin 的内容脚本代码。但是，您当前的代码完全错误。

从 manifest.json 中删除 content_scripts、tabs 和 chrome://*/*。
从您的扩展程序和 popup.html 中删除 content.js
删除paypal_prelog.js

创建popup.js

document.getElementById('paypal_prelog').onclick = () => {
  chrome.windows.create({
    url: 'https://www.paypal.com/es/signin',
    width: 400,
    height: 400,
  }, w => {
    chrome.tabs.executeScript(w.tabs[0].id, {
      code: `(${() => {
        document.getElementById('btnLogin').click();
      }})()`,
    });
  });
};

在 popup.html 中加载 popup.js：

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

【讨论】：

如何在带有计时器的“document.getElementById.....”之后添加更多代码行？我的意思是，我想做已经完成的事情。等待然后，继续搜索元素。尝试创建一个等待函数并在那里使用它，但不起作用，并且该不起作用的函数之后的所有代码都不起作用。