I need to call some method on opening browser from background page in my chrome extension. It works for me on my pc and chrome, but on some other pc's and same version chrome not working. Working only if second browser is opened. Somehow that chrome's api dont see first browser is opened.
Chrome version latest (75.0.3770.90)
chrome.windows.onCreated.addListener((window) => {
this.doSomething(window);
});
function doSomething(window) {
console.log('Window with id: ', window.id, 'opened');
}
I expect to console log every windowId which is opened, but i get only from second opened window.
Related
I'm getting the following error when trying to open the Web Bluetooth device selector dialog from a Google Chrome extension popup:
DOMException: User cancelled the requestDevice() chooser.
I'm using TypeScript and browserify with ES2020 target, module and lib. Here is the code that runs from my popup.html
document.getElementById("test-button")?.addEventListener("click", async () => {
await navigator.bluetooth
.requestDevice({ acceptAllDevices: true })
.then((device) => {
alert(device.name);
})
.catch((error) => {
console.error(error); // <- Getting the error here!
});
});
I'm assuming there's some Chrome extension magic that tricks the web-bluetooth into thinking that I clicked away from the dialog, but have no idea how to get around this. Any idea?
As discussed in https://bugs.chromium.org/p/chromium/issues/detail?id=994185, Web Bluetooth is NOT supported in Chrome Extensions popup windows.
It is supported however in a Chrome Extension "tab/options" page as it acts as a regular tab.
I haven't tried to reproduce this yet but I believe the issue is that Web Bluetooth doesn't have code to handle creating a permission prompt as a child of an extension popup window. It works for the options page because it is a normal Chrome tab and would also work for a standalone app window.
My suggestion would be to open a Chrome Extension regular page that contains some code to interact with nearby Bluetooth devices.
// popup.js
button.addEventListener("click", function() {
// Open a page that contains Javascript to handle Bluetooth devices.
chrome.tabs.create({ url: "page.html" });
});
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 have a Chrome Extension Page Action that I wish that users can run both in incognito mode and in regular mode.
The page action open new tabs with:
window.open(url);
I need that the Page Icon opens a new incognito tab if in incognito mode and a regular tab in regular mode. Therefore, I added the following sentence in the manifest:
"incognito": "split",
In the background.js file of the extension, the following code enables the page action:
chrome.runtime.onInstalled.addListener(function() {
// Replace all rules ...
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
// With a new rule ...
chrome.declarativeContent.onPageChanged.addRules([
{
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { urlMatches: '<a_url_pattern>' },
})
],
// And shows the extension's page action.
actions: [ new chrome.declarativeContent.ShowPageAction() ]
}
]);
});
});
The page action works fine (the page icon is enabled both in incognito and in non-incognito mode) if I load the extension locally. However, after publishing the extension in the Web Store, the page icon only is enabled in non-incognito mode.
Why do I have this difference in behavior in incognito mode between loading locally or loading the published version from the web store?
BTW, before adding "incognito", "split" in the manifest file, the page icon was enabled both in incognito mode and in normal node in the previous published extension, so it seems that "incognito", "split", which was the only line changed in the extension update has something to do with it.
UPDATE: After further investigation, the mismatch in behavior was not caused by the origin of the extension (i.e. load unpacked vs. web source), but depends on if there is an incognito window open when you click Allow in incognito in chrome://extensions.
It seems that, in split mode, if there is an incognito window open when you click Allow in incognito, the onInstalled listener will be fired both for incognito and non-incognito contexts. However, if there is no incognito window open when you click Allow in incognito, then the onInstalled listener will be only fired in the non-incognito context, so the page action icon will not be enabled in incognito context.
This seems to be a Chrome bug. A workaround for this bug is described in the answer to this SO question.
I'm developing a chrome extension and I want to automatically refresh the active tab after a code change
I got gulp-open to work so I don't need to navigate to chrome://extensions anymore and manually click "reload"
now only the active tab refresh remains
I've tried gulp-livereload but couldn't get it to work for developing a chrome extension
any ideas how to approach this?
Could you post the code of your chrome extension? Without much info, I hope this is helpful. You can inject the code below to refresh the page after the chrome extension is reloaded:
chrome.tabs.query({
active: true, // Select active tabs
lastFocusedWindow: true // In the current window
}, function(tabs) {
// Since there can only be one active tab in one active window,
// the array has only one element
var tab = tabs[0];
// Javascript to reload the page
var code = 'window.location.reload();';
// Execute the code for the current tab
chrome.tabs.executeScript(tab.id, {code: code});
});
I have a website that will be displayed in all browser but I need it to display an alert box on load only in Firefox.
How can I detect the browser and specify that if it is mozilla the alert should pop up?
You could include jQuery in your website and try the following code:
if ($.browser.mozilla) {
alert( "this is mozilla!" ); // popup if the browser is mozilla
}
PS: Bear in mind that all Mozilla derivates are recognised here.