I have a devtools.html file that has a script.js which contains:
console.log('started...')
In manifest.json, I have:
"devtools_page": "devtools.html"
However, when I run my extension and open a DevTools window, I don't see the log. If I throw an error in script.js, I can see that the error occurred in the chrome://extensions page, so I know that this script is loaded. However, that log doesn't appear anywhere. Aren't a devtools page's logs supposed to appear in the DevTools window?
View console.log() messages
Undock devtools into a separate window (in devtools toolbar, the three-dot menu)
Focus devtools window
Press CtrlShifti or CmdShifti to open devtools-on-devtools where you'll see the output
Output in the web page console using chrome.devtools.inspectedWindow.eval:
const foo = {bar: 123};
chrome.devtools.inspectedWindow.eval(`console.log(${JSON.stringify(foo)})`);
Related
I have a MV2 Chrome extension that on the popup page I added a "Shortcut" link so that user can access chrome://extensions/shortcuts by clicking it.
However, after upgrading to MV3, the link doesn't work.
Should I simply remove this feature?
You can resolve this issue by opening the page programmatically.
add some suitable selector to the link (popup html):
Configure Commands
add an event listener to open the shortcuts page (in popup script):
// get the DOM node
const link = document.getElementById("commands-link");
// add click event handler that opens the shortcuts page
link.addEventListener('click', () => chrome.tabs.create({
url: "chrome://extensions/configureCommands"
}));
I'm using the Debut theme on my Shopify site and have an issue with the hamburger menu button not working. It will work once but when I navigate to a new page nothing happens when I press the button again. When the page loads the following message is shown on the console for theme.js:
TypeError: $.debounce is not a function. (In '$.debounce(50, function() {
styleDropdowns($(selectors.siteNavHasDropdown));
positionFullWidthDropdowns();
})', '$.debounce' is undefined)
If I manually empty caches through the browser and reload the page the error no longer appears in the console and the button works again. However, once I navigate away from the page the issue returns.
Any help would be greatly appreciated.
Check to see if you have your JS files included on all pages
Is there any way to debug chrome extension using debugger ( break points and step in/out)
beside console.log ?
Chrome 70.x debugging of chrome background scripts is broken, especially when you dynamically load them and they are not in the manifest. Have a ticket open to get it fixed; however they have not been very helpful; however found a work around...
Put a console.log("yourvariablenamehere") in your background.js script.
Hit F12 to open the dev tools, anchored to the bottom of the web page.
Load the background script via a button in your popup.html. Something like this from a button event...
var guid = CreateGuid();
chrome.tabs.executeScript(null, { file: "script/jquery-3.3.1.js" }, function () {
$.get("script/scrollPage.js?ver=" + guid, function (sScriptBody, textStatus, jsXHR) {
chrome.tabs.executeScript(null, { code: sScriptBody });
}, "text");
});
In the dev tools console you should see your logged variable. On the same line as the logged message is a VM with a number tacked onto it, a virtual script page. Select that VM page and then you get to the background script! Now put a breakpoint in the virtual script page, click the same button in your popup.html and it gets hit. And when you reload the popup and execute the background script that breakpoint is hit!
Hope this helps.
If you want to inspecting content scripts, a great method I found is using Console by selecting your extension in javascript context:
By selecting the extension you will have access to the global objects within that extension.
Reference:
Using the Developer tools to debug your extension
I am devlopping a google chrome extension
I have a background process and a popup window.
I want to not use the popup window any more, but instead open a web browser window when chrome extension button is clicked:
How do I do that : How do I detect the click inside background.js ?
This is quite easy
chrome.browserAction.onClicked.addListener(function(tab) {
// The action icon has been clicked
});
You'll have to declare the extension as a browser action in your manifest and remove the popup option
I have the following in my background.js file which is referenced in manifest.json:
chrome.browserAction.onClicked.addListener(function (tab) {
console.log('browserAction clicked');
});
When I click on the browser action icon, I never see browserAction clicked printed to the console.
Am I misunderstanding how this is supposed to work?
Console.log doesn't work in background.js. Use
chrome.browserAction.onClicked.addListener(function (tab) {
alert('browserAction clicked');
});
instead of that.
To see the console messages that comes from the background.js
display the extension;
chrome://extensions/.
Make sure that developer mode is enabled
Click on the "Inspect Views"
of your background page
You should see console messages under the
console tab.
Does the browser action have a popup? If so, the event won't fire.