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});
});
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"
}));
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 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 a working Chrome Extension that opens a new tab and navigates to the specified URL. I'm looking to see if I can somehow have that new tab be opened with developer tools open as well. Is this possible?
chrome.tabs.create({
active: true,
url: "http://www.google.com"
}, createTabListener);
Unfortunately, it is not possible at the moment. You can vote for this issue to support the feature request: https://code.google.com/p/chromium/issues/detail?id=410958