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

时间:2018-12-04 11:33:48

标签: javascript dom google-chrome-extension

我正在编写一个简单的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权限问题还是其他原因?

1 个答案:

答案 0 :(得分:0)

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