I'm currently using the "Developer mode" on the chrome://extensions page of the chromium browser, loading it by clicking on "Reload (Ctrl+R)".
I'd like to be able to make a change to my unpacked chrome extension and load it into the browser in an automated way, especially since I'm testing the extension on a virtual machine so doing all this completely headlessly would be ideal. However, I would at least like to avoid having to click every time I want to load my extension, and I'd like to be able to collect any errors produced into a file/tty.
What is the best way of doing this? Does chrome provide tools for automating extension building and testing?
Regarding the other question linked below:
It doesn't really address my problem, since I am looking for a way to get console output, stack traces and any output generated by the extension reload to be accessible via a file/stream in my OS, as opposed to being displayed in a chromium browser window. The linked answers provide a way to reload the extension programmatically, but not much else.
There are a few avenues for you to research.
You could look into enabling logging with a high verbosity. In principle, I would think there is a level that echoes console output; I'm no expert though.
You could use Native Messaging to speak to a daemon that will log things for you; the downside is that you probably can't catch errors this way.
You could take this one step further and create an extension that attaches to your target extension with Remote Debugging protocol (which provides the same info as DevTools) using the chrome.debugger API, and then log stuff with Native Messaging.
Or, you could eschew using an extension as a supervisor and just use/write an external Remote Debugging client.
Related
I'm looking for a way to open the WebKit “developer tools” from a script attached to a web-page. I need solutions for both Google Chrome and Safari, that will open the developer-tools pane if it's not already open, and (hopefully, if you can figure out how) also switch to a particular tab/section of said pane upon opening.
(Use-case, if anyone's interested: I want to open the console.log output-window if there's been an error and a developer is looking at the page; this particular page will be the output of some JavaScript unit-tests.)
I'm setting a bounty on this question because it's obviously one that hasn't been answered to anyone's satisfaction before, and the answer is a hairy one. Please don't answer it unless you have a real answer that both: 1) works in both browsers, and 2) doesn't require private extension APIs that won't work from a static web-page.
See (related, but specific to Chrome, and extensions): Can I programmatically open the devtools from a Google Chrome extension?
Simply: You can't.
The Dev Tools are not sandboxed (unlike any web page), thus granting sandboxed environments the power to open and control an unsandboxed environment is a major security design flaw.
I hope this answers your question :-)
You cannot directly use the Chrome's Dev Tools from your web pages. It is bundled with the browser.
But you can use it like a regular web application. Go to Chrome Developer Tools, then go to Contributing. You will find help on using Dev Tools for your app.
Setting up
Install Chrome Canary on Mac OS / Windows or download the latest Chromium build from the Chromium continuous builds archive on Linux
Clone Blink git repo from https://chromium.googlesource.com/chromium/blink.git
Set up a local web server that would serve files from WebKit/Source/WebCore/inspector on some port (8090)
Running
Run one copy of Chrome Canary with the following command line flags: --remote-debugging-port=9222 --user-data-dir=blink/chromeServerProfile --remote-debugging-frontend="http://localhost:8090/front_end/inspector.html". These flags cause Chrome to allow websocket connections into localhost:9222 and to serve the front-end UI from your local git repo. (Adjust the path to chromeServerProfile to be some writable directory in your system).
Open a sample page (eg www.chromium.org).
Run a second copy of Chrome Canary with the command line flag: --user-data-dir=/work/chromeClientProfile. Open http://localhost:9222. Among the thumbnails you will see the sample page from the other browser instance. Click on it to start remote debugging your sample page.
The DevTools web page that opens is served from the remote-debugging-frontend in the first browser instance, which serves from the git repo your local filesystem. Debug this Devtools Web page and edit its source like any other web app.
I hope this is what you need.
There's no way to control the web developer tool from an in-page script, other than through the Console API which provides mostly logging facilities. Letting scripts control more than that would be a serious security issue, since it would allow a web page to control parts of the browser.
The only API remotely related to what you're trying to do is the debugger command, which switches to the script pane only if the developer tools were already open.
But who are you trying to develop this feature for?
If it's for developers working on the site, then it's better to just use the existing developer tools manually, by setting breakpoints, or the pause on exceptions toggle.
If it's for end users, don't. Unless your site is supposed to be used by highly technical web developers, you're only going to scare away users if the developer tools suddenly pop up with errors.
If you really want to show errors you can implement your own logging framework and the UI for error reporting, which works with basic JS and doesn't depend on a specific browser environment.
here's another answer that proposes a solution to your mentioned use case/objective (detecting errors, getting & displaying console logs) and not the not possible objective in the title.
you can make and use a console wrapper and use it in your code
and/or you can monkey patch the console functions if you use/import external js, but you need to apply it before loading them.
No, Any secure Browser will not allow a script to open an extension, as it leads to insecurity.
But, You may design an Add-On/extension OR Console API's to do the same.. for specific site.
Create an Add-On like this to achieve that requirement.
You can try sending keys 'CTRL' + SHIFT' + 'I'
that may work for Chrome any FireFox (in I.E you need to use 'F12'
I am using it when required as few utils in this add-on use to work better then the built-in.
EDIT:
Now a days Chrome is advanced with many new advancements source.
I hope this helps!
Hate to answer such an old question, but was surprised to not see this as an answer, so I thought I'd add it in case it can help someone in the future.
Assuming you have access to the source code, you can place an alert("open devtools"); statement immediately before the first line you're interested in debugging. This alert will give you an opportunity to open DevTools and set a breakpoint on that first line before clearing the alert thus allowing the code to continue and hitting the breakpoint.
I have a chrome extension which I'd like to E2E test (simulate some basic user interactions).
Using Cypress, I was able to load my app but couldn't interact with it (i.e. go to the app url using the chrome-extension:// protocol).
Then I found out that Cypress (like many others testing frameworks) is not able to approach the chrome:// protcol, yet, as far as I get it, I need the chrome.runtime api to be included somehow for my app to behave as expected (e.g. interact with background page or use the local storage) and that can't be achived by simply clicking my popup.html file on the other hand.
I feel like I'm missing something here. How should I test my Chrome extension with ease? There must be some good practice for it, launching and treat it like a usual webpage.
Thanks
OK.
So after countless tryouts I've came to a conclusion that the best testing platform for browser extensions - offering a straight-forward way to load the extension (and also use the chrome:// protocol) is indeed - puppeteer (tried cypress and selenium as well)
I'm looking for a way to open the WebKit “developer tools” from a script attached to a web-page. I need solutions for both Google Chrome and Safari, that will open the developer-tools pane if it's not already open, and (hopefully, if you can figure out how) also switch to a particular tab/section of said pane upon opening.
(Use-case, if anyone's interested: I want to open the console.log output-window if there's been an error and a developer is looking at the page; this particular page will be the output of some JavaScript unit-tests.)
I'm setting a bounty on this question because it's obviously one that hasn't been answered to anyone's satisfaction before, and the answer is a hairy one. Please don't answer it unless you have a real answer that both: 1) works in both browsers, and 2) doesn't require private extension APIs that won't work from a static web-page.
See (related, but specific to Chrome, and extensions): Can I programmatically open the devtools from a Google Chrome extension?
Simply: You can't.
The Dev Tools are not sandboxed (unlike any web page), thus granting sandboxed environments the power to open and control an unsandboxed environment is a major security design flaw.
I hope this answers your question :-)
You cannot directly use the Chrome's Dev Tools from your web pages. It is bundled with the browser.
But you can use it like a regular web application. Go to Chrome Developer Tools, then go to Contributing. You will find help on using Dev Tools for your app.
Setting up
Install Chrome Canary on Mac OS / Windows or download the latest Chromium build from the Chromium continuous builds archive on Linux
Clone Blink git repo from https://chromium.googlesource.com/chromium/blink.git
Set up a local web server that would serve files from WebKit/Source/WebCore/inspector on some port (8090)
Running
Run one copy of Chrome Canary with the following command line flags: --remote-debugging-port=9222 --user-data-dir=blink/chromeServerProfile --remote-debugging-frontend="http://localhost:8090/front_end/inspector.html". These flags cause Chrome to allow websocket connections into localhost:9222 and to serve the front-end UI from your local git repo. (Adjust the path to chromeServerProfile to be some writable directory in your system).
Open a sample page (eg www.chromium.org).
Run a second copy of Chrome Canary with the command line flag: --user-data-dir=/work/chromeClientProfile. Open http://localhost:9222. Among the thumbnails you will see the sample page from the other browser instance. Click on it to start remote debugging your sample page.
The DevTools web page that opens is served from the remote-debugging-frontend in the first browser instance, which serves from the git repo your local filesystem. Debug this Devtools Web page and edit its source like any other web app.
I hope this is what you need.
There's no way to control the web developer tool from an in-page script, other than through the Console API which provides mostly logging facilities. Letting scripts control more than that would be a serious security issue, since it would allow a web page to control parts of the browser.
The only API remotely related to what you're trying to do is the debugger command, which switches to the script pane only if the developer tools were already open.
But who are you trying to develop this feature for?
If it's for developers working on the site, then it's better to just use the existing developer tools manually, by setting breakpoints, or the pause on exceptions toggle.
If it's for end users, don't. Unless your site is supposed to be used by highly technical web developers, you're only going to scare away users if the developer tools suddenly pop up with errors.
If you really want to show errors you can implement your own logging framework and the UI for error reporting, which works with basic JS and doesn't depend on a specific browser environment.
here's another answer that proposes a solution to your mentioned use case/objective (detecting errors, getting & displaying console logs) and not the not possible objective in the title.
you can make and use a console wrapper and use it in your code
and/or you can monkey patch the console functions if you use/import external js, but you need to apply it before loading them.
No, Any secure Browser will not allow a script to open an extension, as it leads to insecurity.
But, You may design an Add-On/extension OR Console API's to do the same.. for specific site.
Create an Add-On like this to achieve that requirement.
You can try sending keys 'CTRL' + SHIFT' + 'I'
that may work for Chrome any FireFox (in I.E you need to use 'F12'
I am using it when required as few utils in this add-on use to work better then the built-in.
EDIT:
Now a days Chrome is advanced with many new advancements source.
I hope this helps!
Hate to answer such an old question, but was surprised to not see this as an answer, so I thought I'd add it in case it can help someone in the future.
Assuming you have access to the source code, you can place an alert("open devtools"); statement immediately before the first line you're interested in debugging. This alert will give you an opportunity to open DevTools and set a breakpoint on that first line before clearing the alert thus allowing the code to continue and hitting the breakpoint.
I'm looking for a way to open the WebKit “developer tools” from a script attached to a web-page. I need solutions for both Google Chrome and Safari, that will open the developer-tools pane if it's not already open, and (hopefully, if you can figure out how) also switch to a particular tab/section of said pane upon opening.
(Use-case, if anyone's interested: I want to open the console.log output-window if there's been an error and a developer is looking at the page; this particular page will be the output of some JavaScript unit-tests.)
I'm setting a bounty on this question because it's obviously one that hasn't been answered to anyone's satisfaction before, and the answer is a hairy one. Please don't answer it unless you have a real answer that both: 1) works in both browsers, and 2) doesn't require private extension APIs that won't work from a static web-page.
See (related, but specific to Chrome, and extensions): Can I programmatically open the devtools from a Google Chrome extension?
Simply: You can't.
The Dev Tools are not sandboxed (unlike any web page), thus granting sandboxed environments the power to open and control an unsandboxed environment is a major security design flaw.
I hope this answers your question :-)
You cannot directly use the Chrome's Dev Tools from your web pages. It is bundled with the browser.
But you can use it like a regular web application. Go to Chrome Developer Tools, then go to Contributing. You will find help on using Dev Tools for your app.
Setting up
Install Chrome Canary on Mac OS / Windows or download the latest Chromium build from the Chromium continuous builds archive on Linux
Clone Blink git repo from https://chromium.googlesource.com/chromium/blink.git
Set up a local web server that would serve files from WebKit/Source/WebCore/inspector on some port (8090)
Running
Run one copy of Chrome Canary with the following command line flags: --remote-debugging-port=9222 --user-data-dir=blink/chromeServerProfile --remote-debugging-frontend="http://localhost:8090/front_end/inspector.html". These flags cause Chrome to allow websocket connections into localhost:9222 and to serve the front-end UI from your local git repo. (Adjust the path to chromeServerProfile to be some writable directory in your system).
Open a sample page (eg www.chromium.org).
Run a second copy of Chrome Canary with the command line flag: --user-data-dir=/work/chromeClientProfile. Open http://localhost:9222. Among the thumbnails you will see the sample page from the other browser instance. Click on it to start remote debugging your sample page.
The DevTools web page that opens is served from the remote-debugging-frontend in the first browser instance, which serves from the git repo your local filesystem. Debug this Devtools Web page and edit its source like any other web app.
I hope this is what you need.
There's no way to control the web developer tool from an in-page script, other than through the Console API which provides mostly logging facilities. Letting scripts control more than that would be a serious security issue, since it would allow a web page to control parts of the browser.
The only API remotely related to what you're trying to do is the debugger command, which switches to the script pane only if the developer tools were already open.
But who are you trying to develop this feature for?
If it's for developers working on the site, then it's better to just use the existing developer tools manually, by setting breakpoints, or the pause on exceptions toggle.
If it's for end users, don't. Unless your site is supposed to be used by highly technical web developers, you're only going to scare away users if the developer tools suddenly pop up with errors.
If you really want to show errors you can implement your own logging framework and the UI for error reporting, which works with basic JS and doesn't depend on a specific browser environment.
here's another answer that proposes a solution to your mentioned use case/objective (detecting errors, getting & displaying console logs) and not the not possible objective in the title.
you can make and use a console wrapper and use it in your code
and/or you can monkey patch the console functions if you use/import external js, but you need to apply it before loading them.
No, Any secure Browser will not allow a script to open an extension, as it leads to insecurity.
But, You may design an Add-On/extension OR Console API's to do the same.. for specific site.
Create an Add-On like this to achieve that requirement.
You can try sending keys 'CTRL' + SHIFT' + 'I'
that may work for Chrome any FireFox (in I.E you need to use 'F12'
I am using it when required as few utils in this add-on use to work better then the built-in.
EDIT:
Now a days Chrome is advanced with many new advancements source.
I hope this helps!
Hate to answer such an old question, but was surprised to not see this as an answer, so I thought I'd add it in case it can help someone in the future.
Assuming you have access to the source code, you can place an alert("open devtools"); statement immediately before the first line you're interested in debugging. This alert will give you an opportunity to open DevTools and set a breakpoint on that first line before clearing the alert thus allowing the code to continue and hitting the breakpoint.
Suppose there is an extension for Google+, so when I'm visiting plus.google.com, it's running, but what happens if I close Google+ tab? Is it still running and consume my computer resource?
PS: I ask this because I'm wondering that if this is the truth, I can write an extension that enable or disable other extensions according to the website that I'm visiting, so maybe my Chrome would be faster
It depends.
The author of a Chrome extension can tell Chrome that the extension should only be active on particular websites. However, no matter the website you are visiting, the extension will always be running. To observe this phenomenon for yourself, hit Shift+Esc to display the task manager. Note the extension processes. You can see by trial and error that if Chrome is running, all of your enabled [background] extensions are also running.
The benefit of the Chrome extension developer specifying particular websites is that, even though the extension is always running, it will not receive event notifications for websites that don't apply to it - basically, it will be sleeping. So the effect is appreciable.
For more information about Chrome extension configuration options, see the Chrome extension manifest documentation here.
Edit: Please see Serg's answer re: modifying other extensions.
There are two types of extensions from resource consumption point of view - those that have a background page and those that don't. Permission warnings you see in the gallery don't give you any indication what kind of extension it is.
Extensions without a background page are consuming resources only (well, probably mostly) when used. Those with - consume memory always, plus might consume CPU depending on what they are doing there.
You can very easily write extension that disables all others with management api and the benefit from it will be noticeable on performance (I wrote one for myself actually).