I am following the basics of creating a chrome extension
https://developer.chrome.com/extensions/getstarted
I placed a console.log() statement but it won't show up , should I be using some other API to log stuff on console?
No, you should be looking in the right place.
A background or event page's console and Dev Tools are accessible through the extension list in Developer mode - there will be a link under the extension listing.
Extra note: event page's unload will lose the logs for it.
A popup page's console and Dev Tools are accessible through right-clicking the action's button and selecting "Inspect popup".
A content script's console and Dev Tools are accessible through the normal Dev Tools for the page that the content script executes in.
Extra note: since a content script executes in a different context, you need to select that context above the console if you want to run commands in it, as opposed to the page itself.
Related
I am learning to write chrome extensions. Sometimes ,i do want to learn from the examples given on the chrome developer site. As the instruction says, i need a browser_action or a page_action, then right click ,then inspect popup. I am wondering whether there is other ways to debug the chrome extension.
And the other thing is , i have to write "window.reload(true)" in the debug console to reload the popup page, is there a better or more convenient way to do it?
Of course it's not needed. Your extension either has a popup of some sorts, a background script of some sorts, or a content script of some sorts.
You already know how to debug a popup.
To debug a background page, you can go to chrome://extensions/ with Developer mode enabled. Then you'll see a "background page" link next to extensions that have them - you can click that link to bring up Dev Tools for the extension.
To debug a content script, you should look into the page's own Dev Tools. The console output will be displayed alongside normal console. To type code in the console to execute in the extension's context, you need to change the the context from <top frame> to the extension in the UI:
Depends on what you want to debug.
Chrome extensions also have background page and content-scripts.
Background page console you can find here: open chrome://extensions/ and under extension you'll see "Inspect views".
Content-scripts print messages to the page console.
Popup and other pages you can open in normal tab and inspect in its console. They are accessible by the url: "chrome-extension://YOUR_EXTENSION_ID/path/to/popup.html"
When there's a problem in the content or background script, I do not get any error messages outputted in the console. Neither will it print anything to the console via console.log('msg'). except when I do alert() explicitly.
I am copying and pasting the javascript in the console manually to catch errors, but there must be a better way of debugging a chrome extension script.
There are two consoles, one for your popup and one for the background pages. You're probably looking at the wrong one.
You can access the popup console by right clicking your extension's icon and selecting Inspect Popup and clicking the console tab in the top right.
You can access the background console by going to chrome://extensions and selecting Background Page which is to the right of Inspect views by your extension.
Make sure you're in developer mode. If you're not sure how to enter that, check out https://developer.chrome.com/extensions/getstarted
I write a DOM tree protecter Chrome extension to examine if the DOM tree changes. I have the js files in background_page, how can i get those console.logs() in other test html files? What I can only find now is the debug information of chrome://extensions/ when i click on generated_background_page.html. So how can I get information of other webpages? Thanks for replying.
One thing I have found very useful when debugging chrome extensions is to use the "inspect element" feature of the chrome developer tools. If you have a page or an element (such as on a popup from your extension) that you want to debug:
Open up Developer Tools
Wait for your popup to appear (if its not already up)
Switch to the Elements view on Developer Tools
Click the magnifying glass at the bottom so you can select an element
Click on an element in the page you want to debug (e.g. the popup page)
Now your Sources view and other views line up to match the element you've clicked on. The console will now let you look at variables in that context.
If you are not able to get the extension to work, there could be a whole host of reasons.
Are all your scripts loaded form the extension's directory or are you serving
them from a site? Chrome will not load scripts from an external site
unless over https AND after the site that is serving the script has
been whitelisted. See the Chrome Content Security
Policy
for more info.
To inspect the DOM, you need to inject a content script into the page that is being loaded. Are you sure you are doing this correctly? The manifest.json must be done right or else your content script will not get loaded.
For your content script and extension to communicate, you must post and receive messages. More information is available here.
Perhaps the best suggestion I have is that you follow the Chrome extension "tutorial" carefully until you have something working and then amend it to suit your needs.
I want to be able to call functions that I am writing in a Chrome extension from the JS console in Chrome, so that I can test them easily and see how their output changes as the page changes.
But it seems as the functions I write aren't available to the chrome JS console. I don't really understand JS that well, or the chrome extension model, but I need to somehow inject the extension source into the body of the page that I am using the extension for?
If you are talking about functions that you defined in a background page, then you need to go to your extensions page, check the developer mode box, and click on _generated_background_page.html. That is where you will find your background page code.
If you mean functions in a content script, then when you are in the console, go down to where it says <page context> and change it to your extension. Then you will have access to the functions in the content script.
If I open up the JavaScript console in Chrome Developer Tools to debug my extension's content scripts, I don't get the context of the content scripts. For example, jQuery isn't accessible, and I can't get access to my global variables unless I go to the debugger and set up a breakpoint.
Am I just missing something? It would be great to be able to check my global variables from the JS console or invoke jQuery.
It is not possible at the moment to perform evaluations in context of a content script except the described way of setting a breakpoint/inserting debugger statement and pausing inside the script. I filed a bug on this, You can add yourself to the CC list to track its progress.
You can achieve this indirectly by triggering the debugger in the isolated world of the content script:
Select the tab whose content scripts you wish to inspect
Open the dev tools for that tab
Open the inspector for your extension's background page (or any other extension page) in a popup window
Run chrome.tabs.executeScript(undefined, {'code': 'debugger'})
You should also be able to use the debugger keyword directly in your content script, if there's a place in the execution that you wish to inspect.