从扩展弹出窗口写入当前选项卡控制台 [英] Writing to current tab console from the extension popup

问题描述

对于Chrome扩展程序和一般开发人员来说，我还很陌生.

I am pretty new to Chrome extensions and to development in general.

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

I have a piece of code that I am often using during work that I just paste to the Chrome console to make it work.

创建一个扩展程序可以使我的工作更加轻松，当我点击扩展程序弹出窗口上的链接时，我希望产生同样的效果. 本质上，我试图从弹出窗口向当前选项卡的控制台发送消息".我试图弄清楚如何仅发送一个简单的console.log("hi")，但无法使其正常工作或无法为像我这样的白痴找到简单的解释.

Creating an extension to ease my work a little, I would like to have the same affect when clicking a link on my extension's pop up. Essentially, I am trying to send a "message" to the current tab's console from the popup. I tried to figure out how to send just a simple console.log("hi"), but could not get it to work or find a simple explanation for an idiot like myself.

任何帮助将不胜感激. 谢谢！

Any help is greatly appreciated. Thanks!

推荐答案

请参见架构概述.视您需要做什么而定，这是否容易.

See Architecture Overview. Depending on what you need to do, it's easy or not.

要与当前选项卡进行交互，至少需要内容脚本. 程序注入最适合这种情况.

To interact with the current tab, at a minimum you need Content Scripts. Programmatic Injection is the most suitable for this case.

绝对最小扩展名是:

manifest.json:

manifest.json:

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

background.js:

background.js:

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

content.js:

content.js:

console.log("hi");

这完成了在控制台中打印静态字符串的任务.您可以根据需要创建一个弹出页面，并将逻辑从onClicked侦听器移至该页面，例如，如果需要多个链接.

This achieves the task of printing a static string in the console. You can, if you need, make a popup page and move the logic from the onClicked listener to it, for instance if you need multiple links.

可能的并发症很多.

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

然后，您必须使用消息或

Then, you have to employ Messaging or Storage to pass this information to the content script.

假设您要打印一些内容，该内容取决于页面中运行的JavaScript(而不仅仅是DOM).

Suppose you want to print something that depends on JavaScript running in the page (and not just DOM).

然后，您必须隔离的上下文.

Then, you have to inject your code into the page's context. See also Isolated context.

假设您想在控制台中执行某些东西，而不仅仅是登录.

Suppose you want to execute something in the console, instead of just logging.

您可以使用在页面上下文中执行代码的方法2，但是此时您应该考虑制作一个控制台API . 总的来说，这可能是个好主意，即使有些复杂. 请注意，在撰写本文时，Devtools扩展必须受讨厌的错误.

You can use the method 2 of executing the code in page's context, but at this point you should consider making a Devtools extension. You can add your own panels, interact with the page using eval() with full access to Console APIs. In general, this might be a good idea, if somewhat more complicated. Note that at the time of writing Devtools extensions are subject to a nasty bug.

这篇关于从扩展弹出窗口写入当前选项卡控制台的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！