0

I have been looking for the answer to this question, but it only took me to the solution for debugging the extension itself, while I want to debug the webpage.

I want to create an extension that allows me to modify a particular web page (obviously only on my computer).
I have created a very simple script following the "activeTab" permission tutorial on the chrome developer's site, then I have made the following:

// Called when the user clicks on the browser action.
chrome.browserAction.onClicked.addListener(function(tab) {
  // No tabs or host permissions needed!
  chrome.tabs.executeScript({
    code:'
      var oSwitchContainer = document.getElementById("norm");
      console.log(oSwitchContainer.childNodes);
    '
  });
});

When I inspect the page I cannot see any console messages, however, I can change the content of that oSwitchContainer easily by modifying its innerHTML.

Is there any way to see the console logs of the page after I enable the extension?

Xan
  • 74,770
  • 16
  • 179
  • 206
Alessandro Coraglia
  • 9
  • 3
  • @jfriend00 Incorrect duplicate! The output of that command is NOT in the context of the background page. – Xan Feb 27 '15 at 10:15
  • @Xan - The output of what command? I don't understand your comment. We should also hear for the OP on that subject. They've been strangely silent. – jfriend00 Feb 27 '15 at 10:16
  • I fully understand the question and can provide an answer. `console.log` statement does not execute in the background, and that question does not apply. Please reopen. – Xan Feb 27 '15 at 10:17
  • @Xan - I thought the question was how to use `console.log()` in an extension and that's what that dup question shows you. What do you think differently? And, if the OP disagrees, they should comment. – jfriend00 Feb 27 '15 at 10:18
  • No, this is not the question. This has to do with how `executeScript` operates. Do you understand it? – Xan Feb 27 '15 at 10:20
  • @Xan - So, are you saying it's a dup of this [console.log doesn't work from chrome.tabs.executeScript](http://stackoverflow.com/questions/12615515/console-log-doesnt-work-from-chrome-tabs-executescript)? – jfriend00 Feb 27 '15 at 10:21
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/71868/discussion-between-xan-and-jfriend00). – Xan Feb 27 '15 at 10:22
  • @Xan - I reopened. I'm not convinced yet that there isn't a dup of this question and shame on the OP for being absent after posting and not commenting on whether the dup solved their issue or not. Normally if an OP doesn't object or explain why the dup doesn't work for them, I'd leave it - after all, they're the one that should know. – jfriend00 Feb 27 '15 at 10:28

1 Answers1

2

You say that you found solutions to debug "the extension itself".

Take a look at the Architecture Overview.

What you refer to as "extension itself" is its background page, and that's where your browserAction.onClicked listener executes. If you execute console.log() statements from that code, it will go to the background page's console.

However, using chrome.tabs.executeScript, you pass code to be executed in the context1 of an open tab instead of executing it in the background page. All console.log() calls from that context go to the open page's own console - you should look there.

console.log("This will show in the background page console");
chrome.tabs.executeScript(
  { code: 'console.log("This will show in the current tab console");' }
);

1 To be precise, the extension creates an isolated context, but it still belongs to the open page. See Content Scripts documentation for more details.

Xan
  • 74,770
  • 16
  • 179
  • 206
  • Thanks, actually I have found the solution by checking how another extension worked and all I needed to do was having a different manifest.json file, which included certain commands, now everything is working smoothly and I am ready to more new struggles :D – Alessandro Coraglia Feb 27 '15 at 11:11
  • Hm, looks like you went with injecting content scripts through manifest? Then you lose the advantages of `activeTab`, but gain automatic execution instead of clicking on the button. I assume those are the changes you mention. – Xan Feb 27 '15 at 11:12
  • Yes, I think I have learned more by editing an existing extension than by reading google documentation lol :) Now I have separate files and folders and everything is tidier :) – Alessandro Coraglia Feb 27 '15 at 16:36