javascript - Google Chrome 扩展和 document.getElementbyId().click()

Question

长期读者，第一次提问者。当我试图弄清楚这一点时，我已经看到了很多类似的问题，但是对于我的生活，我就是无法启动并运行它。我没有做太多的 Javascript，所以虽然我一直在阅读很多文档链接，但我不能总是把我的头绕在它周围。

我公司的一个供应商在我公司的自定义域上有一个“使用 Google 登录”按钮。我们使用谷歌身份，所以我们总是有一个活跃的谷歌会话，但供应商说这个按钮必须被点击。我认为创建一个 Chrome 扩展程序很容易，一旦我们进入供应商的页面，它就会单击按钮。

从开发工具的控制台中，我可以运行以下行，这将激活按钮并启动身份验证流程，因此这部分可以手动工作：

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

我尝试了几种不同的解决方案，所以我的“manifest.json”、“background.js”和“ClickButton.js”有点仓促，抱歉。

清单.json

{
  "name": "ClickButton",
  "version": "1.0",
  "description": "Clicks Sign in with Google Button",
  "background": {
      "scripts": ["background.js"],
      "persistent": false
   },
  "permissions": ["declarativeContent", "webNavigation", "tabs", "https://www.vendor.com/"],
  "browser_action":{
    "default_title": "Title"
  },
  "content_scripts": [
   {
     "matches": ["http://www.vendor.com/*"],
     "all_frames": true,
     "run_at": "document_end",
     "js": ["ClickButton.js"]
   }
 ],
  "manifest_version": 2
}

背景.js

//When I run this code in background.js it works as it requires me to click the plugin button
//Clicking the plugin button will run ClickButton.js and it will activate the "googleSignInButton"
/*
chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.tabs.executeScript(tab.ib, {
        file: 'ClickButton.js'
    });
});
*/

//This is the chunk of code pulled from Google's Getting Started Tutorial https://developer.chrome.com/extensions/getstarted
//This will load ClickButton.js when I am just running alert. It also loads the ClickButton.js when I am actually trying to click the "googleSignInButton"

chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
      chrome.declarativeContent.onPageChanged.addRules([{
        conditions: [new chrome.declarativeContent.PageStateMatcher({
          pageUrl: {hostEquals: 'www.vendor.com'},
        })
        ],
            actions: [new chrome.declarativeContent.RequestContentScript({js: ["ClickButton.js"]})]
      }]);
});

ClickButton.js

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

//When I am just running an alert, this pops up when I navigate to my vendor's page, so JS should be getting injected
/*alert ("Test");*/

我尝试了许多不同类型的故障排除。从 background.js 和 ClickButton.js 可以看出，我已经注释掉了我的一些测试。当我使用 chrome.browserAction.onClicked 时，我可以手动启动 javascript 以单击按钮，但这正是我想要避免的。

使用 chrome.declarativeContent.PageStateMatcher （即不手动单击扩展）时，我在扩展中遇到的错误是：

Uncaught TypeError: Cannot read property 'click' of null

据我所知，这意味着扩展程序尝试运行时可能未加载 DOM。这就是为什么我同时尝试了 document_idle（根据 Content Scripts 文档）和 document_end 的原因，我认为 DOM 可能还没有准备好。我也试过 setTimeout 只是为了等待它，但如果没有上述错误，它仍然无法运行。

我还参考了 Dan Harper 的最低限度的 Chrome 扩展。当我单击一个按钮时，我可以让他的 Javascript 运行：

(function() {

    // just place a div at top right
    var div = document.createElement('div');
    div.style.position = 'fixed';
    div.style.top = 0;
    div.style.right = 0;
    div.textContent = 'Injected!';
    document.body.appendChild(div);

    alert('inserted self... giggity');

})();

但是当我尝试在点击页面后立即运行它时，出现错误：

Uncaught TypeError: Cannot read property 'appendChild' of null

这让我认为在这种情况下 document.body.appendChild(div) 存在问题，并且可能扩展程序试图在加载所有内容之前运行。

这也可能是脚本无法访问页面上的“googleSignInButton”的权限问题。我试图尽我所能在 manifest.json 中设置供应商网站的权限。

我为我的问题的长度道歉！但我真的一直在尝试很多不同的方法来让它工作，我已经做了很多谷歌搜索。我就是想不通。希望有人可以提供帮助。

非常感谢！

标签： javascriptgoogle-chrome-extension