I am trying to write to the console of the background page (from popup)
chrome.extension.getBackgroundPage().console.log('hello');
this code seems not to work...
Related
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 trying to write a Chrome devtools extension for a JS SDK we have developed. This SDK has an API addEventListener (the events are not DOM events) that I would like to use to be able to display all the events that are being published in the devtools panel I made.
Basically I would like to be able to have the following code in my devtools page script :
chrome.devtools.inspectedWindow.eval(
"mySDKonTheContentPage", function(result, isException){
mySDK =result;
mySDK.addEventListener("myEvent", function(){
doSomethingInDevtoolsUI();
});
});
Since content scripts don't have access (do they?) to the page's JS objects, I don't really know where to start.
In the script on your page, you can use window.postMessage to send your data to the content script. From there you can set up communication between the content script and the DevTools panel via a background page.
See: Messaging from Injected Scripts to the DevTools Page and Messaging from Content Scripts to the DevTools Page for examples of this in the documentation.
In a Google Chrome extension I want to pass messages between a content script and a popup page. I also want a function in the content script to be fired when a signal to do this is sent by the popup page to the content script.
The section in Google Chrome Extensions developer docs for messages, states that messages can be passed "from your content script to an extension page, or vice versa" (quoted from http://code.google.com/chrome/extensions/messaging.html )
Does this mean that I can send/receive messages between the content script and the popup page? Because the usage I have seen is for communication between background page and content script.
Or do I have to set up a 3 - way message passing route-- viz.
content script <--> background page <--> popup page. And if this is the case, how do I set up messaging between background page <--> popup page?
And how do I fire a function in the content script, after sending signal to content script from the popup page? Does this also require background script to be present?
Content scripts can only send a message to the background page. If you want to send a message from a content script to a popup, you have to:
Send the message from the Content script to the background page.
chrome.runtime.sendMessage( ...message... , function() { /*response*/ });
Receive the message at the background.
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) { ... });
Pass the message to the popup. To get a reference to the global window object of the popup, use chrome.extension.getViews. Note: Unlike most of the other chrome APIs, this method is synchronous:
var popupWindows = chrome.extension.getViews({type:'popup'});
if (popupWindows.length) { // A popup has been found
// details is the object from the onMessage event (see 2)
popupWindows[0].whatever(message, sendResponse);
}
In the popup, define the whatever method.
function whatever(message, sendResponse) {
// Do something, for example, sending the message back
sendResponse(message);
}
When sendResponse (4) is called, details.sendResponse (see 3) is called. This, in turn, calls function() { /*response*/ } from 1.
Note: chrome.runtime.sendMessage/onMessage is only supported in Chrome 26+. Use chrome.extension.sendMessage if you want to support older browsers as well.
I am developing Google Chrome extension. Each time my JavaScript source changes, I find myself having to click "load unpacked extension" again to have the changes take effect.
Reloading the extension at each iteration is very tedious. Can it be avoided?
Depends on the asset, lets review:
Asset ----------------------------------------- Action needed
popup.html HTML -------------------------- Refresh browser page
popup.html JS ------------------------------- Refresh browser page
contentscript via manifest ----------------- Reload extension
contentscript via executeScript (code) - location.reload(true) on background page
contentscript via executeScript (file) ---- Refresh browser page
background.html HTML ------------------- location.reload(true) on background page
background.html JS ------------------------ location.reload(true) on background page
For more information on how to do the location.reload(true) see the page on debugging
The content script requiring a plugin reload has been brought up recently and acknowledged by the chromium team:
http://code.google.com/p/chromium/issues/detail?id=104610
Consider using programmatic injection (contentscript via executeScript (file)) to avoid having to reload the plugin for content script updates.