How to debug Chrome extension example with code injection?

Question

This question may be a little noob, but I don't understand this JavaScript stuff. My question is: how do I debug the entered code of the following chrome extension example ? The popup.js file executes send_links.js (this is the entered file, as I understand it). I would like to debug send_links.js. I cannot set a breakpoint because I do not see send_links.js in the Chrome developer tools. I tried the debugger command; in send_links.js, but it does not work. "Console.log (" blah ");" commands are also ignored.

Thanks!

Answer 1

The debugger keyword will work if you open the Developer Tools for the current tab before clicking the action button.

Also, if you want the script to display with its name, add the following line to send_links.js :

 //@ sourceURL=send_links.js 

Then the script will appear on the "Content Scripting" tab of the developer tools of the current tab. There you can set breakpoints, etc. But you need to always open the developer tools for the tab before clicking the button for this.

Answer 2

All Injected Files or Content Scripts displayed on the Developer Tools page, you can set breakpoints and all the usual things you do on regular Java Script Pages.

All your console logs appear on the page they enter.

Example:

If I embed console.log(document.getElementsByTagName('body')[0].style); in http://www.google.co.in/ , then I need to open devtools http://www.google.co.in/ and look at the console.

The output is similar to a normal debugging result.

EDIT 1

They are displayed through chrome.tabs.executeScript () , but indirectly when you install the debugger; command debugger; , you can check the code.

Demonstration

If some sample code introduces

 chrome.tabs.executeScript(35, { "code": "console.log('hi');debugger;//@ sourceURL=send_links.js" }); 

The page debugger shows the Script that is being entered.

Answer 3

I suppose because you open the debugger tool on a tab, not on an extension. Right-click the icon for your extension and select the Inspect pop-up menu item. You can find more information on this page http://developer.chrome.com/extensions/tut_debugging.html

Answer 4

In this case, the script is not entered until you open the popup. As soon as the popup is loaded, it enters send_links.js , which in turn sends a message as soon as this is done, receiving links. You can cancel this messaging and paste the file into the manifest:

 "content_scripts": [{ "matches": ["<all_urls>"], "js": ["send_links.js"] }], 

add a message handler to send_links.js with support for sending a response

 chrome.extension.onMessage.addListener(function(message,sender,sendResponse){ [...] sendResponse(links); }); 

and then replace the onMessage and executeScript in the executeScript popup sendMessage callback

 chrome.windows.getCurrent(function (currentWindow) { chrome.tabs.query({active: true, windowId: currentWindow.id},function(tab) { chrome.tabs.sendMessage(tab[0].id, {method: "getlinks"},function(links){ for (var index in links) { allLinks.push(links[index]); } allLinks.sort(); visibleLinks = allLinks; showLinks(); }); }); }); 

This layout will put send_links.js on every page so you can debug it more easily. Once this is a mistake, you can return to the software injection, because in such cases it is more effective. You can find the script under Sources> Content Scripts> One of them ( plfdheimenpnchlahmhicnkejgmhjhom for example).

Edited Source Files