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

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"
  ]
}

背景.js:

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

内容.js:

console.log("hi");

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

<小时/>

可能出现的并发症有很多。

1. 假设您想要打印一个依赖于扩展中已知内容的字符串。

   那么，你必须雇用 Messaging或Storage将此信息传递给内容脚本。

2. 假设您想要打印一些依赖于页面中运行的 JavaScript(而不仅仅是 DOM)的内容。

   那么，你必须inject your code into the page's context 。另请参阅Isolated context .

3. 假设您想在控制台中执行某些内容，而不仅仅是记录日志。

   您可以使用方法2在页面上下文中执行代码，但此时您应该考虑制作Devtools extension 。您可以添加自己的面板，使用 eval() 与页面交互，并具有 Console APIs 的完全访问权限。 一般来说，这可能是一个好主意，尽管稍微复杂一些。 请注意，在撰写本文时，Devtools 扩展受 nasty bug 的约束。 .