单击 chrome 扩展中的页面

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

您要做的第一件事就是阅读概览页面，尤其是架构部分。仔细阅读它，它将回答您的许多问题。

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

1. 如何通过单击扩展程序触发某些内容。

2. 如何单击活动选项卡内的某些内容。

在我继续之前，我将重申 wOxxOm 所说的话：文档中有一个很好的小示例，几乎可以满足您的需求。但是，如果您想成为受教钓鱼的人，而不是鱼，请继续阅读。

如何通过点击您的扩展程序来触发某些事情

这取决于您使用的 UI 类型；最简单的是浏览器操作按钮。

最简单的按钮：

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

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

然后单击它会将chrome.browserAction.onClicked事件引发到您的扩展程序页面。在您需要时随时打开的唯一页面是后台页面，其作用通常是扩展事件的中央调度。因此，您需要一个监听该事件的后台页面：

"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"在清单中指定了 a ，则chrome.browserAction.onClicked不会触发。相反，将打开一个带有您指定的 HTML 文件的小弹出页面；您可以根据需要在那里添加 UI/逻辑，原理与普通网页相同，但具有 Chrome API 访问权限，除了：

  • 您需要自己查询当前选项卡。
  • 您需要注意Chrome 的扩展 CSP。
  • 如果遇到问题，您需要知道如何调试它们。

• 如果您的扩展程序仅针对几个特定页面，请考虑使用页面操作而不是浏览器操作。

• 如文档中所述，事件页面优于背景页面。在这种情况下，您可以轻松使用 Event 页面而不会产生任何副作用，但通常这可能需要一些思考。

• 您可以使用内容脚本将自己的 UI 注入页面本身；这是一个高级主题，这里不会介绍。

如何单击活动选项卡内的某些内容

由于您已经阅读了架构概述，您已经知道可以与打开页面的 DOM 交互的扩展程序的唯一部分是内容脚本。

内容脚本可以在清单中指定（然后它们会在打开匹配页面时自动注入并为您准备好），也可以手动注入页面。

在您的情况下，您想要做一些简单的事情，并且只有在点击时。这是程序化注入的完美工作，所以我们会坚持下去。

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

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

程序化注入是通过chrome.tabs.executeScriptmethod完成的。至少，您需要指定要注入的选项卡以及将运行的代码：

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

这还不是全部尚未虽然。扩展程序必须有权在打开的选项卡中执行代码。

您可以使用由匹配模式定义的“主机权限”来授予对特定页面的访问权限，但请记住，我们仅在用户单击扩展程序时触发它。

对于那个特定的情况，有一个特殊的权限"activeTab"。当显式调用扩展时，用当前活动的选项卡做很多事情就足够了，点击它的按钮就足够了。

因此，添加到清单：

"permissions": ["activeTab"],

这应该是你需要的一切。

额外学分：

• 虽然对于这个简单的目的不是必需的，但您可能希望在选项卡中执行比单行更复杂的代码。然后使用单独的文件并使用而不是调用executeScript是有意义"file"的"code"。

• 由于 DOM 事件是共享的，因此只需触发对按钮的单击不需要您直接与在页面本身中运行的 JavaScript 进行交互。但是，重要的是要了解，通常情况下，内容脚本无法与页面自己的脚本进行交互，这称为“孤立世界”。如果您真的需要它，有一些方法可以绕过它，但它是一个高级主题，在别处更好地解释。

• 有时您需要内容脚本持久化，回答一些命令，并可能将其自己的查询发送到扩展的页面。在这种情况下，最好通过清单自动注入并使用Messaging而不是executeScript.