如何通过将侦听器添加到“窗口”来从Chrome扩展程序单击网页上的按钮？

Question

我正在编写一个简单的Chrome扩展程序，它将在我公司内部网站内单击一个按钮。 具体而言，该网站包含一个“显示更多”按钮，单击该按钮将显示更多数据。

我的问题是，当我执行单击Chrome控制台中的按钮所需的Javascript时，一切正常。 但是，当我从扩展的content.js脚本执行它时，未单击按钮。

这是我的manifest.json：

{
 "manifest_version": 2,
 "name": "asd",
 "description": "qwe",
 "version": "0.1",
 "author": "abc",
 "browser_action": {
   "default_icon": "asd.png",
   "default_title": "Have a good day",
   "default_title": "asd"
},
"permissions": ["activeTab", "https://ajax.googleapis.com/"],
"content_scripts": [
    {
      "matches": ["http://*/*"],
      "js": ["content.js"],
      "run_at": "document_end",
      "all_frames": true
    }
  ]
}

content.js是这样的：

window.addEventListener('load', function(event) {
    console.log("page load!");
    console.log(window.location.href);
    console.log()
    var pageURL = window.location.href;
    if (pageURL.indexOf('example.com')) {
        console.log('example.com');
        var metaTags = document.querySelectorAll('meta');
        for (var i = 0; i < metaTags.length; i++) {
            console.log(metaTags[i].getAttribute('content'));

            if (metaTags[i].getAttribute('name') === 'application-name' && metaTags[i].getAttribute('content') === 'XYZ') {
                console.log('got match');
                var buttonClass = document.getElementsByClassName('source-viewer-more-code');
                console.log('buttonClass = ' +  JSON.stringify(buttonClass));
                var button = buttonClass[0];
                console.log("button = " + button);
            }
        }
    }
});

我确实看到了所有console.log打印，但是JSON.stringify(buttonClass)打印了一个空对象， console.log("buttonw = " + button); 打印未定义。

我目前正在本地运行扩展程序。 这是Chrome权限问题还是其他原因？

Answer 1

如果您可以读取元标记，我想这不是权限问题，当尝试通过“ getElementsByClassName”获取按钮时，请确保Button位于DOM中（按钮不在DOM中的一个可能原因是页面中的一些js ajax请求后，可能会将按钮填充到DOM）。 （当您在控制台中执行时，您可能会在DOM中填充元素之后执行），如果您希望有一个按钮但不在dom中，请使用setTimeout之类的内容，然后等待该按钮由页面中的其他js填充。