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"]
}
how do i search for specific text in firefox devtools -> network -> response ? when i do ctrl+F nothing happens, and when i right-click, search isn't one of the options..
by comparison it's easy in Chrome devtools, just pressing ctrl+F brings up a search menu..
As of Firefox 97.0, there is no direct option to search within the response. So I've created a feature request for that now.
The workarounds you currently have are
the global request search
The Network Monitor provides a feature that lets you search for arbitrary information within all requests. This search can be toggled by clicking the magnifying glass button within its toolbar.
opening the request in a new tab
You can open the request within a new tab by right-clicking it and choosing Open in New Tab. When the request is displayed in the new tab, open the source view (e.g. by pressing Ctrl+U or via the page's context menu > View Page Source). Within the source view, you can then search like you normally search within a page, i.e. by pressing Ctrl+F, for example.
I hate Firefox gestures, I just want to click, but if my move shake during click it happens a mess!
How do I disable firefox gestures?
You need to change the configuration, which you can do by typing about:config in the address bar and press the "Enter", just like you type the url of a website to open a website. If you see a warning just confirm.
Filter the available settings to the gesture-related settings by typing browser.gesture in the search bat at the top of the page.
Doubleclick on the relevant settings, and delete their contents if you want to disable them.
Close the about:config-tab once you're done.
So, after struggling with horrible interface choices of Xcode 4, I'm finally on 5.1.1.
The tabs became almost usable. Double clicking can be configured to open a file in a new tab. Good. Double clicking another file opens it in a new tab. Good. Double clicking first file again switches to previously open tab. Good! Double clicking first file while it is open in current tab opens a second tab with that file. Ok, I can live with that, since from there on they just switch from one to another.
So far a surprisingly sane behavior.
Unless you make a single click in the navigation panel by mistake. Single click opens whatever you click in the current tab, all logic and reason be damned.
The question is, how to change single click behavior to "Use separate tab" (or however Xcode refers to that behavior)?
Is there any way to disable single clicks from doing anything at all aside from highlighting the selection?
There's no option to disable the single-click behavior. Two options that get you close to your desired behavior are:
Use a single separate window for most of your tabs. Use a "main" window that has the file navigator visible, and a separate "work" window with the file navigator hidden. If you want to add a tab to the work window, create it in the main window and then drag it's tab over to the work window. This is an extra step, but you'll never have a single click change any of the tabs that you care about (thought it'll still change the primary or focussed editor in the main window, depending on your settings).
Use separate windows for each file. There's a preference setting that lets you create windows instead of tabs when you double-click a file in the file navigator. Use Mission Control instead of the tab bar to navigate between your files.
I'm using an old version of Visual Studio that provides only the 'interactive' method for setting tab stops. Is there anyway to clear all the tab stops before setting them? Or anyway to exclude a given control from having a tab stop?
Added 10-sept-2009
Part of my problem was confusing tab stop order and tab stops. I naively assumed setting tab stop order, set a tab stop hence much confusion. Thanks for pointing out that tab stops are set in the property box.
You are not clear about your specific VS version, but as far as I remember (back to VC6) you automatically assign the tab order if you simply click once on each control in your desired order. There is usually no need to reset them beforehand.
This hint from a VC6 tutorial might be helpful:
To adjust the tab order of your
controls, you can choose the Tab Order
command from the Layout menu and click
the controls in the order that you
want them to be tabbed. If you have a
complicated dialog box and only want
to change the tab order of a few
controls, you can take a little
shortcut by holding the Ctrl key down
and selecting the last control that
tabs properly before selecting the
controls that tab incorrectly.
Clicking an empty spot in the dialog
box, or pressing Enter, will exit the
tab order mode.
To prevent a control from being
reached using the Tab key, clear the
Tab stop checkbox on the control's
property page.
If you want to change the tab behaviour programmatically, look for the WS_TABSTOP windows style.
Open the dialog whose tab order you want to change. Press Ctrl + D. On the dialog you will see numbers next to each control which indicate the tab order for that control. Click the controls in the order you want the tab order to go.