Question

我对Chrome扩展程序和一般开发都很陌生。

我有一段代码，我经常在工作中使用，只是粘贴到Chrome控制台以使其正常工作。

创建扩展程序以简化我的工作，我希望在点击我的扩展程序弹出窗口上的链接时会产生同样的影响。基本上，我试图从弹出窗口向当前选项卡的控制台发送“消息”。我试图找出如何发送一个简单的console.log（“hi”），但无法让它工作或找到像我这样的白痴的简单解释。

非常感谢任何帮助。谢谢！

Answer 1

见Architecture Overview。根据您的需要，这很容易或不容易。

要与当前标签进行互动，您至少需要内容脚本。 Programmatic Injection最适合这种情况。

绝对最小的扩展名为：

的manifest.json：

{
  /*..required fields like "name"..*/
  "background" : {
    "scripts" : [ "background.js" ]
  },
  "browser_action": {
    "default_icon": "someimage.png"
  },
  "permissions" : [
    "activeTab"
  ]
}

background.js：

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript(tab.id, {file: "content.js"});
});

content.js：

console.log("hi");

这实现了在控制台中打印静态字符串的任务。如果需要，您可以创建一个弹出页面并将逻辑从onClicked侦听器移动到它，例如，如果您需要多个链接。

可能的并发症很多。

假设您要打印一个字符串，该字符串取决于扩展名中已知的。

然后，您必须使用Messaging或Storage将此信息传递给内容脚本。

假设您要打印依赖于页面中运行的JavaScript的内容（而不仅仅是DOM）。

然后，你必须inject your code into the page's context。另请参阅Isolated context。

假设你想在控制台中执行某事，而不仅仅是记录。

您可以使用在页面上下文中执行代码的方法2，但此时您应该考虑制作Devtools extension。您可以添加自己的面板，使用eval()与该页面进行互动，并拥有对Console APIs的完全访问权限。 一般来说，这可能是一个好主意，如果有点复杂的话。 请注意，在撰写本文时，Devtools扩展程序需遵守nasty bug。

从扩展弹出窗口写入当前选项卡控制台

1 个答案: