Question

Chrome扩展程序如何点击活动页面上的按钮？

网上有平庸的页面。按钮类型的简单元素在页面上具有特定ID。还有一个带有按钮的Chrome扩展程序。我想点击分机按钮，按钮依次点击按钮。

var someElement = document.getElementById('someElement');
someElement.addEventListener('click', function () {
  // here I'd like to click on a button with specific ID.
});

Answer 1

您要做的第一件事就是阅读Overview page，，尤其是 Architecture部分。仔细阅读，它将回答你的许多问题。

您的问题可以分为两部分。

如何通过点击您的扩展程序来触发某些内容。
如何点击活动标签内的内容。

在我继续之前，我将重申wOxxOm所说的内容：文档中的a great small example几乎可以满足您的需求。但如果你想成为一个被教导钓鱼的人，而不是给鱼，请继续阅读。

如何通过点击您的分机

这取决于您使用的UI类型;最简单的是Browser Action按钮。

最简单的按钮：

如果您向清单添加浏览器操作，而不指定弹出窗口：

"browser_action": {
  "default_icon": { "38": "icon38.png" }
},

然后点击它会将chrome.browserAction.onClicked个活动提升到您分机的页面。在您需要的任何时候打开的唯一页面是background page，其作用通常是扩展事件的中央调度。因此，您需要一个监听该事件的后台页面：

"background": {
  "scripts": ["background.js"]
},

和

// background.js
chrome.browserAction.onClicked.addListener(function(tab) {
  // Okay, the actual action should go here
  // And look, we already have the required Tab object for free!
});

变体（读者练习）：

如果您在清单中指定了"default_popup"，则chrome.browserAction.onClicked将不会触发。相反，a small popup page将使用您指定的HTML文件打开;您可以根据需要添加UI /逻辑，其原理与普通网页相同，但使用Chrome API访问权限，除了：
- 您自己需要query获取当前标签。
- 您需要注意Chrome's extension CSP。
- 如果遇到问题，您需要知道how to debug them。
如果您的扩展程序仅定位几个特定页面，请考虑使用“页面操作”而不是“浏览器操作”。
如文档中所述，Event pages优于背景页面。在这种情况下，您可以轻松使用“事件”页面而不会产生任何副作用，但一般情况下此may require some thinking。
您可以使用Content scripts将自己的UI注入页面本身;这是一个高级主题，将不在此处讨论。

如何点击活动标签内的内容

由于您已阅读Architecture overview，因此您已经知道扩展程序中唯一可以与打开页面的DOM交互的部分是Content script。

内容脚本可以是specified in the manifest（当打开匹配的页面时，它们会自动注入并为您准备好），或者它们可以manually injected进入页面。

在您的情况下，您希望做一些简单的事情，并且只有在点击时才能做。这是程序化注射的完美工作，因此我们将坚持这一点。

假设上一节中的解决方案，您处于后台页面的上下文中，并且已将当前选项卡作为tab变量：

// background.js
chrome.browserAction.onClicked.addListener(function(tab) {
  // Do something with tab
});

程序化注入使用chrome.tabs.executeScript method完成。您至少需要指定要注入的选项卡以及将运行的代码：

// background.js
chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript(tab.id, {
    code: "document.getElementById('#specificId').click()"
  });
});

但并非所有尚未。扩展程序必须permissions才能在打开的标签页中执行代码。

您可以使用＆＃34;主机权限＆＃34;由match pattern定义以提供对特定网页的访问权限，但请记住，我们只会在用户点击扩展程序时触发它。

对于特定情况，我们有特殊权限"activeTab"。当扩展名显式调用时，使用当前活动的选项卡执行大量操作就足够了，并且单击其按钮是足够明确的。

所以，添加到清单：

"permissions": ["activeTab"],

这应该是你需要的所有工作。

额外信用：

虽然这个简单的目的不是必需的，但您可能希望在选项卡中执行比单行更复杂的代码。然后使用单独的文件和invoke executeScript与"file"而不是"code"一起使用是有意义的。
只需触发单击按钮，就不需要直接与页面本身中运行的JavaScript进行交互，因为DOM事件是共享的。但是，了解通常情况下，内容脚本can't interact with the page's own scripts，这被称为“隔离世界”＃34;是很重要的。如果你真的需要它，可以绕过它，但它是一个高级主题better explained elsewhere。
有时您需要内容脚本保留，回答一些命令，并可能将自己的查询发送到扩展程序页面。在这种情况下，通过清单自动注入并使用Messaging代替executeScript可能更好。

点击Chrome扩展程序页面

1 个答案:

如何通过点击您的分机

如何点击活动标签内的内容