Writing to current tab console from the extension popup

Question

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

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.

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!

Answer 1

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.

An absolute minimal extension would be:

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");

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.

---

The possible complications are numerous.

1. Suppose you want to print a string that depends on something known in the extension.

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

2. 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.

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

   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.