I have an extension that has the following files:
content.js, background.js, manifest.json, mystyles.css, jquery-2.0.3.js and icon.png.
I can set breakpoints in the content.js file via the Chrome Debug Tool via the "Sources" tab and via the "Content Scripts" tab. My problem is that I can't find a reference to the "background.js" file, so I can set a breakpoint in it. Can someone tell me what I am overlooking or doing wrong?
References:
I have watched the Chrome Debug Video on YouTube.
I have read the Chrome Tutorial on Debugging.
If you open up a new tab and go to chrome://extensions, you will see a list of installed plugins, including your own. Next to your plugin, there will be a link to "Inspect Views" pointing to a background.html page or a generated one in your case. This will launch a new debug window in Chrome that will allow you to browse to your background.js file and set breakpoints (by clicking on the line number)!
Related
I am developing a Chrome DevTools extension, and I can't find how to debug a script running in the background page.
I declared a DevTools background page in manifest.json:
"devtools_page": "devtools-background.html"
That HTML page runs a script:
<script src="devtools-background.js"></script>
The script adds a panel:
chrome.devtools.panels.create('My Extension', '', 'index.html')
I can run my extension by opening DevTools on any page, and that works great, I see the panel. I can debug my panel's Elements and Scripts by opening the DevTools on the DevTools page (or going through chrome://extensions developer mode). I can even connect an external debugger from VS Code to the extension panel.
But I can't connect a debugger to the devtools-background.js from the background page. I can't use console.log or step debugging to understand what's going on in the background. The only thing I have is Errors from the chrome://extensions developer mode if an error occurs in that script. But no console or debugger.
When you click "service worker", you can find background of console log.
For the life of me I can't find where to enable this setting: Override requests with workspace project in Chrome Canary v64.0.3
Where do you enable this feature?
I learned about this feature from here: https://umaar.com/dev-tips/162-network-overrides/
Currently with 65 Chrome Canary it's not experimental anymore.
But you still cannot "Save for overrides" XHR requests.
This restriction is only in UI. To get XHR request override:
Open "Sources tab" in Chrome Canary DevTools and "Overrides" sub-tab under it.
Check "Enable Local Overrides" and add a folder to store changes in the filesystem.
Open "Network" tab in Chrome Canary DevTools and select XHR request
Press "Open in new tab"
Go to new opened tab Chrome DevTools - "Network"
Select the first request in the list and "Save for Overrides" button appears.
You can follow the gif from question starting step 5:
It's behind an experiment (https://developers.google.com/web/tools/chrome-devtools/ui#experiments) then it'll be under experiments in the settings panel of devtools.
Please do be warned though, this is an experimental feature, there are bugs and it might not work as intended.
We are trying hard to get it fully released soon (on Canary) but it needs to be a 1st class feature before we will feel ready to release it.
I think they might have shipped the feature, so it's no longer behind an experiment.
Try the workflow that Umaar outlined, omitting the step about enabling the experiment.
Haven't tried it myself yet, so I could be wrong
The feature is no longer an experiment in Chrome Canary (current version at the time of this: 64.0.3261.0). You can start to use it now. It will take a little time to arrive in Chrome stable.
In the latest version of Chrome Canary (Version 65.0.3317.2) you still need to enable dev tool experiments. The option is still behind the experiment flag #kayce-basques . I also followed the tutorial of Umaar - also using GitHub for testing - but I don't get any visible website changes after pressing F5.
Has someone figured out how to get it to work?
(1) Select the Overrides Tab in the Sources Panel.
(2) Click the Setup Overrides ( + icon) to add an empty folder.
(3) Confirm that Enable Network Overrides are enabled.
(4) Select the js file to be persisted on the Network Tab and display the source code in the code editor.
(5) Add code “console.log (‘hello world’);” to the beginning of the source code.
(6) Right click on the source code, select command [Save for overrides] on the context menu.
(7) Reload the current page after saving the file.
(8) Open the Console Panel and check the result.
This feature is now enabled in chrome stable you can follow these step:
In chrome go to "Sources tab" then in devtools "Overrides" click "Enable Local Overrides" then create a folder to put the changes in the filesystem. Go to
"Network" then select XHR request then "Open in new tab" then go to new opened tab Chrome DevTools - "Network"
pick the first request in the list and normally you will have a "Save for Overrides" button appears.
In the Developer Tools window within the Chrome Browser, there is a "Sources" tab which in the past, I have been able to set breakpoints and step through the Javascript. I am still able to do that for a web app that I wrote. However, when I try to do the same for some another web app, the javascript file does not appear on the Sources tab. Instead, I find it on the Application tab but I do not appear to have the ability to step through the breakpoints on that tab.
How does the Application tab differ from the Sources tab and how might I be able to debug the javascript file?
I have an extension with a background page, and by default this causes Chrome to persist after you close all windows, and puts the Chrome icon in the system-tray. I would like to avoid this -- I do not want my extension to cause the Chrome process to persist after closing all Chrome windows, nor do I want to cause Chrome to appear in the systray.
According to the only docs I could find on this indicates that the user can set this option globally across all extensions, but that isn't what I'm trying to do. I'd like the extension to be unassuming / unobtrusive, and don't want to change the user's browser behavior. Does anyone know how to accomplish this while retaining the ability to have a background page?
UPDATE
With manifest version 2 you can now run event pages that are not persistent. Event pages are very similar to background pages but are only loaded when needed by the extension.
Example from the event pages doc on setting a non persistent event script in your manifest:
{
"name": "My extension",
...
"background": {
"scripts": ["eventPage.js"],
"persistent": false
},
...
}
Here is a tutorial on migrating your Chrome extension to manifest version 2.
OLD ANSWER
Currently, if your extension has a background defined in the manifest.json file, it will run before Chrome is launched and continue after all windows of Chrome are closed. That is unless the user changes their settings like you mentioned. There may be future versions of Google Chrome that allow for different functionality but you, the developer, won't be able to get around this issue at this time.
An excerpt from the background manifest docs
Makes Chrome start up early and and shut down late, so that apps and extensions can have a longer life.
When any installed hosted app, packaged app, or extension has "background" permission, Chrome runs (invisibly) as soon as the user logs into their computer—before the user launches Chrome. The "background" permission also makes Chrome continue running (even after its last window is closed) until the user explicitly quits Chrome.
How can I run Chrome without all browser's controls (tabs, address line, buttons)?
only page-area loaded with specific URL
Thanks
Assuming you want to open a specific URL (let's say http://www.example.com), here are 3 options for your consideration. For all options, start by creating a shortcut to Chrome.exe, which you will edit by adding a flag/switch to the 'Target' property of the shortcut.
Open as an App - Use a 'Target' like this:
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --app=http://www.example.com
This will open the web page in a generic Windows window, with no browser Chrome available although you can still access browser tools, e.g., pressing F12 to open Developer Tools.
Open Fullscreen - Use a 'Target' like this:
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" http://www.example.com --start-fullscreen
This will open the web page in a Chrome window, which will start fullscreen unless there is another instance of Chrome already open, in which case the page will open in that instance. If you press F11, the browser will return to its normal view mode.
Open in Kiosk Mode - Use a 'Target' like this:
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" http://www.example.com --kiosk
This will open the web page in a Chrome window, which will start in Kiosk mode unless there is another instance of Chrome already open, in which case the page will open in that instance. From my understanding, the only way to close this would be to press Alt+F4.
As mr_kazz explained, you can refer to http://www.chromium.org/developers/how-tos/run-chromium-with-flags to see which flags you can use to when launching a Chrome shortcut.
You'll need to start Chrome in "Kiosk mode"
Here is a tutorial for windows: http://think2loud.com/868-google-chrome-full-screen-kiosk-mode/
If you are building a more elaborate kiosk solution, you would put this command in a shell/bash script that would continuously run it (and wait for exit before doing it again). This was if your user pressed Alt+F4 it would just start it again.
http://www.chromium.org/developers/how-tos/run-chromium-with-flags
The above page links to a page with a huge list of arguments, maybe it can be achieved that way. I would also like to know how this can be done.
I currently use this for opening µTorrent server's webUI
chromium-browser --window-size=900,700 http://admin:#localhost:8080/gui/
Run it with the "--kiosk" switch:-
"C:\Program Files\Google\Chrome\Application\chrome.exe" --kiosk
or wherever else it might be installed.
You can open the webpage as an app. To find out how to do so, search a search engine for "open chrome webpage as app" and follow the instructions. I could paste the instructions here, but once you know how to search for it, it's pretty easy.