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.
Related
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)})`);
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 would like to use pageAction.onClicked, The document says the event will not fire if there is a popup:
Fired when a page action icon is clicked. This event will not fire if the page action has a popup.
So I am looking for a way to disable the popup. Right now I tried something like this:
chrome.tabs.query({active: true}, function(tabs){
chrome.pageAction.setPopup({
tabId: tabs[0].id, popup: ''
});
});
I didn't specify default_pop in manifest.json.
But this doesn't disable the popup, any advice?
Related: Chrome extension button popup stuck open
It appears that a message from content to background only begins firing after backgroundAction has been run at least once.
In the below code example, a click on browserAction turns the page red, and a click on the page body turns the page blue (via a message sent by the content script).
If I click the page body first, nothing happens. It only begins working after I've clicked browserAction once.
Why is this happening and how can I make it so the message listener fires without having browserAction run first?
Any help would be greatly appreciated!
content.js
$(function(){
$('body').on('click', function() {
// Send a message to background.js
chrome.runtime.sendMessage(true, function(response){
console.log(response);
});
});
});
background.js
// Make background red when browserAction is cliked
chrome.browserAction.onClicked.addListener(function(){
chrome.tabs.executeScript( {
code: 'document.body.style.backgroundColor="red"'
});
});
// Make background blue when any message is received
chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse){
chrome.tabs.executeScript( {
code: 'document.body.style.backgroundColor="blue"'
});
return true;
})
As always in such cases use the debugger. The error I'm seeing here in the extension's background page console which can be opened on chrome://extensions page:
Unchecked runtime.lastError while running tabs.executeScript: Cannot access contents of url "...". Extension manifest must request permission to access this host.
When runtime.onMessage is executed after a message from the content script Chrome doesn't know that executeScript was initiated by a user action so the code is blocked.
As for browserAction.onClicked, it is always invoked on user's interaction so "permissions": ["activeTab"] is sufficient for the code executed in the eventjob context of the issued click. And it creates temporary permission to modify the active tab, see the documentation:
The following user gestures enable activeTab:
Executing a browser action
Executing a page action
Executing a context menu item
Executing a keyboard shortcut from the commands API
Accepting a suggestion from the omnibox API
Solution #1 (the best) would be to avoid injecting any code from the background script and do everything in the content script based on messages from the background script.
Solution #2 would be to add the required permission to manifest.json:
"permissions": ["activeTab", "<all_urls>"]
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