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
Related
I am trying to test sample code for web extension for browsers.
But, it doesn't work. I checked the console for Google Chrome and also for Firefox. It doesn't print anything. The following is my code:
manifest.json:
{
"description": "Demonstrating webRequests",
"manifest_version": 2,
"name": "webRequest-demo",
"version": "1.0",
"permissions": [
"webRequest"
],
"background": {
"scripts": ["background.js"]
}
}
background.js:
function logURL(requestDetails) {
console.log("Loading: " + requestDetails.url);
}
chrome.webRequest.onBeforeRequest.addListener(
logURL,
{urls: ["<all_urls>"]}
);
console.log("Hell o extension background script executed");
Am I missing something?
Your code is correct as written, it works and outputs to console.
If you are not seeing it, then you are, probably, looking at the wrong console.
1. Firefox
Mozilla describes what extension output can be seen in which console in their Debugging article.
Browser Console
The Browser Console no longer shows output from WebExtensions background pages by default. You can have it show output from all WebExtensions by selecting to display "Show Content Messages", which is available from the popup that opens when you click on the gear-like symbol "⚙️" in the upper right of the window, just to the right of "Requests". Depending on what you are doing, the Browser Console may show output from a WebExtensions Experiment. You can access the Browser Console from Tools➜Web Developer➜Browser Console (keyboard shortcut Ctrl-Shift-J, or Cmd-Shift-J on Mac).
In older versions of Firefox, this was the console to use to see output from extensions. However, that is no longer the case.
Browser Toolbox
If you have it enabled, you could also use the Browser Toolbox console. You can access it from Tools➜Web Developer➜Browser Toolbox (keyboard shortcut Ctrl-Alt-Shift-I; On a Mac: Cmd-Alt-Shift-I). If it is not available you can enable it through options from the Web Console settings page.
The console in this toolbox will show output from both scripts running in the background context and from content scripts. However, complex data will not be available (e.g. no Objects).
Add-on Debugger
This is what you should be using to view console output from scripts running in the background context of your WebExtension. This includes background scripts, scripts running in popups, options pages, and any other page loaded from the extension as the main URL for a tab, or iframe. You can access the Add-on Debugger though about:debugging➞Inspect (use the "Inspect" button that's associated with the WebExtension you are debugging; there's a separate button for each extension). This will open a new tab with the debugger. You can then click on the Console tab within that browser tab. This console will display only content from the WebExtension which you are inspecting.
Web Console
You, probably, are looking at the Web Console (keyboard shortcut F12) which is associated with only a single tab. This is what you want when debugging a webpage, but not an add-on's background scripts. For a content script which is injected in that tab, the console.log() output will show up in this console. However, you will not see output from any other portion of your add-on (e.g. not content scripts in other tabs, not background scripts, etc.).
2. Google Chrome
Showing the correct console for your extension is a bit more complex in Chrome. Console output will show up in only one of multiple possible places, depending on from what context the console.log() was executed. Each of the following DevTools are independent of each other and are displayed in separate windows, or tabs. Displaying in the associated tab (bottom or side) is the default for the DevTools associated with web pages and content scripts, because those are specific to the tab. For the web page/content script DevTools, you have the option of having it displayed in its own separate window, or docked inside the tab (side or bottom).
Background Scripts
As explained here, you have to go through multiple selections on a drop-down menu, to get to the chrome://extensions page (or you can type that in by hand as the URL, or use a bookmark) then select both a checkbox ("Developer mode") and then click on the "background page" link. Then, you have to select the "Console" tab on the window that pops up.
It is much easier to show what you have to do:
Content Scripts
Output will be shown in the regular web console (in the web Developer Tools). You can open it by pressing F12 (or other shortcuts) in the webpage in which your content script was injected. Each web console will only show the output from the scripts injected in that tab.
Doing the above with show the console.* output from your extension, but will result in the console JavaScript command line, debugger, etc. being in the context of the page, not the content script.
If you want to use the console JavaScript command line in the context of the content scripts which are injected into a web page, you need to select your extension's content script context from the drop-down menu in the upper left of the Console window. This drop-down menu will normally start with the value "top". The drop down will have selections for each of the content script contexts (one per extension that has script(s) injected).
Popup (built-in)
Right-click on your browserAction button and select "Inspect Popup". Alternatively, right-click within the popup and select "Inspect". Either will open the DevTools for the popup page. The popup will be kept open under more conditions than it normally would, but will still be closed if you switch tabs, etc.
Options
Right-click within the main content of the Options popup (not the title bar) and select "Inspect". This will open the DevTools for the options page.
Devtools extension panel
Same as Options above: right-click inside + inspect.
In case your panel intercepts the right-click or in a bugged Chrome 97/98, open devtools-on-devtools, then use its picker button in the toolbar of the Elements panel (or press Ctrl-Shift-C on PC) to select your panel in the original devtools window.
Tab or popup (detached) with a page from your extension
When a tab or a detached popup window is focused, you can open the DevTools by pressing F12 (or other shortcuts), or by opening the context menu (right-click) and selecting "Inspect".
Note, the "detached popup" here means a window without an address bar, which is created using window.open or chrome.windows.create. There was another type called "panels", but it's no longer supported in modern Chrome.
Which console are you viewing in for the logs?
If you are viewing console on a tab, then that is the wrong place.
Open settings / Extensions or in a new tab type
chrome://extensions
Under your extension click on "background page" link which is where you can watch for logs
**Make sure Developer mode is checked
Yes for Chrome you have to click the background page link mentioned, but it won't be there unless you set it to be persistent:
"background": {
"persistent": true,
"scripts": ["background.js"]
}
I am trying to test sample code for web extension for browsers.
But, it doesn't work. I checked the console for Google Chrome and also for Firefox. It doesn't print anything. The following is my code:
manifest.json:
{
"description": "Demonstrating webRequests",
"manifest_version": 2,
"name": "webRequest-demo",
"version": "1.0",
"permissions": [
"webRequest"
],
"background": {
"scripts": ["background.js"]
}
}
background.js:
function logURL(requestDetails) {
console.log("Loading: " + requestDetails.url);
}
chrome.webRequest.onBeforeRequest.addListener(
logURL,
{urls: ["<all_urls>"]}
);
console.log("Hell o extension background script executed");
Am I missing something?
Your code is correct as written, it works and outputs to console.
If you are not seeing it, then you are, probably, looking at the wrong console.
1. Firefox
Mozilla describes what extension output can be seen in which console in their Debugging article.
Browser Console
The Browser Console no longer shows output from WebExtensions background pages by default. You can have it show output from all WebExtensions by selecting to display "Show Content Messages", which is available from the popup that opens when you click on the gear-like symbol "⚙️" in the upper right of the window, just to the right of "Requests". Depending on what you are doing, the Browser Console may show output from a WebExtensions Experiment. You can access the Browser Console from Tools➜Web Developer➜Browser Console (keyboard shortcut Ctrl-Shift-J, or Cmd-Shift-J on Mac).
In older versions of Firefox, this was the console to use to see output from extensions. However, that is no longer the case.
Browser Toolbox
If you have it enabled, you could also use the Browser Toolbox console. You can access it from Tools➜Web Developer➜Browser Toolbox (keyboard shortcut Ctrl-Alt-Shift-I; On a Mac: Cmd-Alt-Shift-I). If it is not available you can enable it through options from the Web Console settings page.
The console in this toolbox will show output from both scripts running in the background context and from content scripts. However, complex data will not be available (e.g. no Objects).
Add-on Debugger
This is what you should be using to view console output from scripts running in the background context of your WebExtension. This includes background scripts, scripts running in popups, options pages, and any other page loaded from the extension as the main URL for a tab, or iframe. You can access the Add-on Debugger though about:debugging➞Inspect (use the "Inspect" button that's associated with the WebExtension you are debugging; there's a separate button for each extension). This will open a new tab with the debugger. You can then click on the Console tab within that browser tab. This console will display only content from the WebExtension which you are inspecting.
Web Console
You, probably, are looking at the Web Console (keyboard shortcut F12) which is associated with only a single tab. This is what you want when debugging a webpage, but not an add-on's background scripts. For a content script which is injected in that tab, the console.log() output will show up in this console. However, you will not see output from any other portion of your add-on (e.g. not content scripts in other tabs, not background scripts, etc.).
2. Google Chrome
Showing the correct console for your extension is a bit more complex in Chrome. Console output will show up in only one of multiple possible places, depending on from what context the console.log() was executed. Each of the following DevTools are independent of each other and are displayed in separate windows, or tabs. Displaying in the associated tab (bottom or side) is the default for the DevTools associated with web pages and content scripts, because those are specific to the tab. For the web page/content script DevTools, you have the option of having it displayed in its own separate window, or docked inside the tab (side or bottom).
Background Scripts
As explained here, you have to go through multiple selections on a drop-down menu, to get to the chrome://extensions page (or you can type that in by hand as the URL, or use a bookmark) then select both a checkbox ("Developer mode") and then click on the "background page" link. Then, you have to select the "Console" tab on the window that pops up.
It is much easier to show what you have to do:
Content Scripts
Output will be shown in the regular web console (in the web Developer Tools). You can open it by pressing F12 (or other shortcuts) in the webpage in which your content script was injected. Each web console will only show the output from the scripts injected in that tab.
Doing the above with show the console.* output from your extension, but will result in the console JavaScript command line, debugger, etc. being in the context of the page, not the content script.
If you want to use the console JavaScript command line in the context of the content scripts which are injected into a web page, you need to select your extension's content script context from the drop-down menu in the upper left of the Console window. This drop-down menu will normally start with the value "top". The drop down will have selections for each of the content script contexts (one per extension that has script(s) injected).
Popup (built-in)
Right-click on your browserAction button and select "Inspect Popup". Alternatively, right-click within the popup and select "Inspect". Either will open the DevTools for the popup page. The popup will be kept open under more conditions than it normally would, but will still be closed if you switch tabs, etc.
Options
Right-click within the main content of the Options popup (not the title bar) and select "Inspect". This will open the DevTools for the options page.
Devtools extension panel
Same as Options above: right-click inside + inspect.
In case your panel intercepts the right-click or in a bugged Chrome 97/98, open devtools-on-devtools, then use its picker button in the toolbar of the Elements panel (or press Ctrl-Shift-C on PC) to select your panel in the original devtools window.
Tab or popup (detached) with a page from your extension
When a tab or a detached popup window is focused, you can open the DevTools by pressing F12 (or other shortcuts), or by opening the context menu (right-click) and selecting "Inspect".
Note, the "detached popup" here means a window without an address bar, which is created using window.open or chrome.windows.create. There was another type called "panels", but it's no longer supported in modern Chrome.
Which console are you viewing in for the logs?
If you are viewing console on a tab, then that is the wrong place.
Open settings / Extensions or in a new tab type
chrome://extensions
Under your extension click on "background page" link which is where you can watch for logs
**Make sure Developer mode is checked
Yes for Chrome you have to click the background page link mentioned, but it won't be there unless you set it to be persistent:
"background": {
"persistent": true,
"scripts": ["background.js"]
}
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.
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"
I am new to Chrome Extension. I have a popup.html that collects data and displays when mouse over on the current open page/tab. I also send data to popup.html on click on the current open page/tab.
The problem is when i click on the page data gets passed to the popup.html but popup.html disappears/closes. When i click on the extension again the data persists since i am persisting the data on a background page.
How do i avoid popup.html not to close/disappear on click on current open page/tab.
Thanks in advance
It is not possible.
The popup for Browser Actions / Page Actions is designed to close as soon as it loses focus. It is also not possible to programmatically open it.
You did correctly by making the background script handle the data. If you need persistent UI while you're interacting with a page, then your only option seems to be some HTML UI injected by a content script.
You might be interested in this question.
I understood that pop.html does not persist on the screen, hence took up a different route by getting my extension on to the chrome dev tools. They perform the same actions such as an extension the pain is that your dev tools have to be open always.
For my use case keeping the console open does not make much of a difference. This post helped me a lot set this up.
Thanks for your suggestions
I m not sure u can. There is a reason the page is named as popup. Although you can try notifications(https://developer.chrome.com/extensions/notifications) to provide the same functionality.