I included this in my chrome extension manifest
"devtools_page": "devtools.html"
And in devtools.html I include a devtools.js file which creates a panel
chrome.devtools.panels.create("Panel", "icon.png", "panel.html", function(panel){});
The panel is indeed created. And in panel.html I include a panel.js file in which I added a listener
chrome.devtools.network.onRequestFinished.addListener(function(details){
console.log(details);
});
But where can I see the console output of the panel? Or how can I redirect it to the devtools console?
This message will be logged in the console of the developer tools. To view this console, detach the developer tools from the window, and press Ctrl + Shift + J.
Here's an picture:
1. Page (http://host/)
2. + Devtools instance for http://host
3. + Devtools instance for chrome-devtools://devtools/devtools.html?... )
Your message is currently logged to 3 (the console of the devtools instance) instead of 2 (the console of the page). To log the string to the page, use the chrome.experimental.devtools.console API.
An alternative is to JSON-serialize your object, and use chrome.devtools.inspectedWindow.eval to log the result:
var obj = ...;
var str = JSON.stringify( obj );
chrome.devtools.inspectedWindow.eval('console.log(' + str + ');');
Another way to do it is to open the chrome devtools in a separate window (not on the side of the browser) and then press CMD + Option + i (for Mac) and then you get another devtools for that devtools. There you can debug and see console logs easier :)
Related
I am using manifest version 3 for chrome extension this error I face in background js :
Error in event handler: ReferenceError: window is not defined chrome extension with manifest v3
"manifest_version":3,
"permissions":["contextMenus","storage", "activeTab","tabs","scripting","webRequest"],
var posLeft = ( window.width - winWidth ) / 2 ;
ManifestV3 extension uses a service worker so it doesn't have DOM or window.
Use chrome.windows.getCurrent to get the size/position of the current browser window.
Use chrome.system.display.getInfo (since Chrome 94) to get the display's size/metrics.
Well for others who may look here for that error message in a similar context, I got the same error when neglecting to make the window object accessible at runtime rather than at the time that the injected function is dynamically being readied for injection into a particular tab by the v3 background script.
In order to get dynamically injected from a v3 background script, the tab specific object (in this case window) needs to be included inside the function being passed, as in the following anonymous function case:
chrome.scripting.executeScript({
target: { tabId: currentTab.id },
func: () => window.history.back()
});
if window.history.back is provided as the value for func then obviously it will not be known or available to the background script and the same error message will ensue.
This is already described indeed in the docs.
If you are trying to access window object in background.js as it is a service worker you won't have access to window object , but you may try self as it will have all the properties of window object
in background.js try
console.log(self,"self")
var window = window ?? self;
Note: if you are using Vite or Webpack this might work
I added the following code to my otherwise-working Google Chrome Extension…
var storage = chrome.storage ;
console.log("storage is " + storage) ;
var bookmarks = chrome.bookmarks ;
console.log("bookmarks is " + bookmarks) ;
Upon running, the console says
storage is undefined
bookmarks is [object Object]
In other words, bookmarks works OK but storage is missing in action. My manifest has requested both…
{
...
"permissions": [ "bookmarks", "tabs", "storage" ],
}
In case it matters, this extension is installed as an External Extension on Mac OS X. To make sure it was updated correctly, I copied the code above from the files installed into ~/Library/Application Support/Google/Chrome/Default/Extensions. And, of course, I've relaunched Chrome.
Why might chrome.storage be undefined?
Edit: the answer below was written in 2013. Now in 2021, as
Irfan wrote in comment:
chrome.storage is available from content script too. Your extension's
content scripts can directly access user data without the need for a
background page. https://developer.chrome.com/docs/extensions/reference/storage/
Original answer:
LocalStorage is only available in background pages and popup. If you need to acces to some data you will need to pass a message from your current page to a background page. Here is the code :
In your current page:
chrome.extension.sendMessage({action:"getstorage"}, function(response){
console.log("storage is " + response.myVar);
});
In the background page:
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
if (request.action == "focusWindow"){
sendResponse({myVar: localStorage.myStorage});
}
});
You can find more examples in the chrome documentation on Message Passing
There is "Reload (Ctrl+R)" link inside extension on "Extensions" tab, clicking on it fixes the problem (I spent few hours). Nor disabling/enabling extension neither restarting Chrome browser will fix the problem. I hope it will save someone's time ;)
How can I detect if the browser is an internet explorer or firefox or chrome? Is there an easy way like just using jquery. Because I want to limit the jquery calls if my user agent is internet explorer.
Please advise.
Many thanks.
jQuery.browser is deprecated in jQuery since 1.9.
There is a plugin for jQuery that adds this "back" to jquery. You will fid it (and documentation) at https://github.com/gabceb/jquery-browser-plugin
Install it by adding <script src="/path/to/jquery.browser.js"></script> after where you are adding jQuery.
then you can use the following.
$.browser.msie; //returns true if ie
$.browser.webkit; //returns true if webkit-browser (Safari, Chrome)
$.browser.mozilla; //returns true if firefox
Try jQuery.browser
Check if IE
$.browser.msie ? alert('Internet Explorer') : alert('Not Internet Explorer');
Or info for the browser that is accessing page
$.each($.browser, function(i, val) {
$("<div>" + i + " : <span>" + val + "</span>").appendTo(document.body);
});
Working example here
I'm in the process of making a Google Chrome extension, and encountered a problem.
I'm trying to upload and search through the DOM inside the popup.html.
Here is how I get the current tab (I found the script somewhere, credit doesn't belong to me):
chrome.windows.getCurrent(function(w) {
chrome.tabs.getSelected(w.id,function (response){
)};
My problem is this: I need to traverse through the DOM of the response. When trying to do so manually, I couldn't, as the response variable was now undefined for some reason, so using the Console isn't an option.
When trying to alert the response in the html file, it came as a object. Then, I tried to navigate through the response as if it has been the 'document' object, but no luck either.
Any help will be appreciated greatly.
You can get the selected tab for your popup by passing null as the window id to getSelected. () In your popup you can listen for extension events and execute a script to push the content to your popup:
chrome.extension.onRequest.addListener(
function(request, sender, sendResponse) {
if (request.action == "content")
{
console.log('content is ' + request.content.length + ' bytes');
}
});
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.executeScript(tab.id, { file: 'scripts/SendContent.js' } );
});
And finally the content script... I have it as "scripts/SendContent.js" in my extension folder, but the script is simple enough you could execute it by putting the code in the code property instead of the name in the file property of the object you pass to executeScript:
console.log('SendContent.js');
chrome.extension.sendRequest( {
action: "content",
host: document.location.hostname,
content: document.body.innerHTML
}, function(response) { }
);
Result:
POPUP: content is 67533 bytes
If you're having trouble, use console.log() and right-click on your page or browser action to inspect it and read your messages on the console (or debug your script from there).
I believe popups are sandboxed the same way that background pages are, so you'll need to use a content script to access the page DOM.
You can inject a content script with chrome.tabs.executeScript, handle your DOM traversal in the content script, then pass back the information you need from the content script to the popup using the message passing API.
I can try to elaborate on this if you give more information about the problem you're trying to solve.
I asked this question before but didn't make it clear that I meant in user script, not in JavaScript from a webpage.So I'll be more clear now.
Is it possible to determine if Google Chrome is in incognito mode via a user-script (basically a script run as an extension in the browser, not a script being run on a webpage)?
To detect whether a window is in
incognito mode, check the incognito
property of the relevant Tab or
Window object. For example:
var bgPage = chrome.extension.getBackgroundPage();
function saveTabData(tab, data) {
if (tab.incognito) {
bgPage[tab.url] = data; // Persist data ONLY in memory
} else {
localStorage[tab.url] = data; // OK to store data
}
http://code.google.com/chrome/extensions/overview.html
If you are developing an Extension then you can use the tabs API to determine if a window/tab incognito.
More information can be found on code.google.com.
If you are just working with a webpage or a userscript, it is not easy, and it is designed to be that way. However, I have noticed that all attempts to open a database (window.database) fail when in incongnito, this is because when in incognito no trace of data is allowed to be left on the users machine.
I haven't tested it but I suspect all calls to localStorage fail too.
Nowadays it's quite easy to do this from a content script. Just use
if(chrome.extension.inIncognitoContext) {
//you're incognito
} else {
//you're not
}