I tried the following code. It basically takes a screenshot from all tabs open in the current window:
function captureWindowTabs(windowId, callbackWithDataUrlArray) {
var dataUrlArray = [];
// get all tabs in the window
chrome.windows.get(windowId, { populate: true }, function(windowObj) {
var tabArray = windowObj.tabs;
// find the tab selected at first
for(var i = 0; i < tabArray.length; ++i) {
if(tabArray[i].active) {
var currentTab = tabArray[i];
break;
}
}
// recursive function that captures the tab and switches to the next
var photoTab = function(i) {
chrome.tabs.update(tabArray[i].id, { active: true }, function() {
chrome.tabs.captureVisibleTab(windowId, { format: "png" }, function(dataUrl) {
// add data URL to array
dataUrlArray.push({ tabId:tabArray[i].id, dataUrl: dataUrl });
// switch to the next tab if there is one
if(tabArray[i+1]) {
photoTab(i+1);
}
else {
// if no more tabs, return to the original tab and fire callback
chrome.tabs.update(currentTab.id, { active: true }, function() {
callbackWithDataUrlArray(dataUrlArray);
});
}
});
});
};
photoTab(0);
});
}
When I call this code from popup.html opened as a webpage, it works as expected (I trigger this from a button click in the popup.html). When I call it from the browser extension, it just gets interrupted from the first tab it selects. Any idea why that is? I can't share errors, since the debugger gets closed when called from the extension.
Supplementary, is there a way to achieve desired result without needing the visual tab switching?
While updating the next tab as active tab. make sure current tab is no more active tab by doing
chrome.tabs.update(tabArray[i-1].id, { active: false }, ()=>{});
Moving the extension to a background script fixed the problem.
Reasoning is that the popup will close once the tab switches. Hence it is required to run in the background where it is not interrupted when the popup closes.
Related
I have created a Chrome extension which upon selecting text, offers a context menu link to Salesforce using the selected text:
function doSearch (search_target, tab)
{
chrome.tabs.create( {
url : "https://my.salesforce.com/apex/BR_caseRedirectDependingLicense?number="+search_target.replace(/\D/g,''),
selected : true,
index : tab.index + 1
} );
}
function selectionHandler (info, tab)
{
doSearch( info.selectionText, tab );
}
function resetContextMenus ()
{
chrome.contextMenus.removeAll(
function()
{
var id = chrome.contextMenus.create( {
title: "Open in Salesforce",
contexts: [ "selection" ],
onclick: selectionHandler
} );
}
);
}
resetContextMenus();
The intention here is to mark ticket numbers and open them in SF quickly, and it works perfectly.
However, I was wondering if it's possible to update an open salesforce tab instead of launching a new one every time.
I have tried looking around and encountered the following sample extension:
https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/docs/examples/api/tabs/inspector/
But it doesn't seem to work at all (perhaps because it's outdated).
I would much appreciate any help/guidance on how to approach this.
Yes, you can do that, you can do it using the chrome.tabs.update(..) function, here is an example, this will update the tab in which your context menu item was clicked:
function selectionHandler (info, tab) {
chrome.tabs.update(tab.id, {
url : "https://my.salesforce.com/apex/BR_caseRedirectDependingLicense?number="+info.selectionText.replace(/\D/g,''),
active : true
});
}
If you want to first create a new tab and then keep updating it, you can use something like this:
let tabId = -1;
function doSearch (search_target, tab)
{
const tabDetails = {
url : "https://my.salesforce.com/apex/BR_caseRedirectDependingLicense?number="+search_target.replace(/\D/g,''),
active : true,
index : tab.index + 1
};
if (tabId == -1) {
chrome.tabs.create(tabDetails, tab => {
tabId = tab.id;
});
} else {
// check if tab is still around
chrome.tabs.get(tabId, (tab) => {
if (tab) {
chrome.tabs.update(tab.id, tabDetails);
} else {
chrome.tabs.create(tabDetails, tab => {
tabId = tab.id;
});
}
});
}
}
Here is the chrome.tabs API documentation beside this two examples, you may also want to look into chrome.tabs.query(..), you can use that to find a specific tab.`
Also, in all these examples I've used active instead of selected because selected is deprecated.
I have code so far that will save a bookmark of the current tab then close it when i push my WebExtension button. I want the code to save and then close all of the tabs.
var currentTab;
var currentBookmark;
// gets active tabe
function callOnActiveTab(callback) {
chrome.tabs.query({currentWindow: true}, function(tabs) {
for (var tab of tabs) {
if (tab.active) {
callback(tab, tabs);
}
}
});
}
/*
* Add the bookmark on the current page.
*/
function Bookmark() {
chrome.bookmarks.create({title: currentTab.title, url: currentTab.url}, function(bookmark) {
currentBookmark = bookmark;
});
callOnActiveTab((tab) => {
chrome.tabs.remove(tab.id);
});
}
/*
* Switches currentTab and currentBookmark to reflect the currently active tab
*/
function updateTab() {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
if (tabs[0]) {
currentTab = tabs[0];
chrome.bookmarks.search({url: currentTab.url}, (bookmarks) => {
currentBookmark = bookmarks[0];
});
}
});
}
function listTabs() {
Bookmark();
}
chrome.browserAction.onClicked.addListener(listTabs);
chrome.tabs.onUpdated.addListener(updateTab);
// listen to tab switching
chrome.tabs.onActivated.addListener(updateTab);
If I add the Bookmark() function to the end of updateTab() function, the button no longer works and when I change tabs it saves that one and exits all tabs.
Quite a bit of your code appears overly complicated for what you appear to be attempting to do. A significant part of your problem with not being able to use the Bookmark function to bookmark and remove multiple tabs is that it is relying on a global variable that is changed by an asynchronous event handler which is tracking the active tab. That function can be re-coded to use an argument that is passed in to the function. In that way it can be generally re-used.
Note: I moved the removal of the tab out of the bookmarkTab function (what is Bookmark in your code). Having it in there, while only calling the function Bookmark, is a bad idea. I added a bookmarkAndRemoveTab() function which is clearly named for both things that it is doing.
Just the sections associated with your browserAction could be:
var currentBookmark;
/* Add a bookmark for a tab
* tabsTab - The tabs.Tab object for the tab containing the page to bookmark
* callback - Called with the tabs.Tab object when the bookmark is complete
*/
function bookmarkTab(tabsTab, callback) {
chrome.bookmarks.create({title: tabsTab.title, url: tabsTab.url}, function(bookmark) {
currentBookmark = bookmark;
if(typeof callback === 'function'){
callback(tabsTab);
}
});
}
/* Remove a Tab
* tabsTab - The tabs.Tab object for the tab to remove
* callback - Called with the, now invalid, tab ID of the removed tab
*/
function removeTab(tabsTab, callback){
let rememberedId = tabsTab.id; //Unknown if object changes upon removal
chrome.tabs.remove(rememberedId,function(){
if(typeof callback === 'function'){
callback(rememberedId);
}
});
}
/* Bookmark and remove a tab once the bookmark has been made
* tabsTab - The tabs.Tab object for the tab to remove
*/
function bookmarkAndRemoveTab(tabsTab) {
//When we get here from the browserAction click, tabsTab is the active tab
// in the window where the button was clicked. But, this function can be used
// anytime you have a tabs.Tab object for the tab you want to bookmark and delete.
bookmarkTab(tabsTab,removeTab);
}
chrome.browserAction.onClicked.addListener(bookmarkAndRemoveTab);
Then you could have a function that did bookmarkAndRemoveTab() on every tab:
/* Bookmark and remove all tabs
*/
function bookmarkAndRemoveAllTabs() {
//Get all tabs in 'normal' windows:
// May want to test. Could want to get all tabs in all windows
// Of windowTypes:["normal","popup","panel","devtools", probably only
// want "normal" and "popup" tabs to be bookmarked and closed.
let queryInfos = [{windowType: 'normal'},{windowType: 'popup'}];
queryInfos.forEach(function(queryInfo){
chrome.tabs.query(queryInfo, function(tabs) {
for (let tab of tabs) {
bookmarkAndRemoveTab(tab);
}
});
});
}
For example if someone is on google.com I need to popup a different page and if someone is on xyz.com I need to pop a different page. Is that possible?
As suggested by wOxxOm, it may be a better solution to have a single popup page with several sections, and hide/show them as appropriate.
Start with all hidden, and at runtime make a decision:
document.addEventListener("DOMContentLoaded", function() {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
// Note: this requires "activeTab" permission to access the URL
if(/* condition on tabs[0].url */) {
/* Adapt UI for condition 1 */
} else if (/* ... */) {
/* Adapt UI for condition 2 */
}
});
});
Do note that it's recommended to use Page Actions instead of Browser Actions for things that make sense only on certain pages.
In your background page you can change the page to display in popup.
Use tabs events to get selected tab and current tab url.
Use :
// Update popup url method
var updatePopupURLForSelectedTab = function (selectedTab) {
var popUpURL = DEFAULT_URL_OF_YOUR_HTML_FILE;
var selectedTabURL = selectedTab.url;
if (selectedTabURL.match(/.*\.?google\.com.*/) != null ) {
popUpURL = GOOGLE_URL_OF_YOUR_HTML_FILE;
}
else if (selectedTabURL.match(/.*\.?xyz\.com.*/) != null) {
popUpURL = XYZ_URL_OF_YOUR_HTML_FILE;
}
// Set Popup URL
chrome.browserAction.setPopup({
popup :popUpURL
});
};
// Get current selected Tab
chrome.tabs.getSelected(null, function (tab) {
updatePopupURLForSelectedTab(tab);
});
// Listen for selected tab
chrome.tabs.onActiveChanged.addListener(function(tabId, selectInfo) {
// Get selected tab
chrome.tabs.get(tabId, function (tab) {
updatePopupURLForSelectedTab(tab);
});
});
// Listen navigation update
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
updatePopupURLForSelectedTab(tab);
});
// Listen for window change
chrome.windows.onFocusChanged.addListener(function (windowId) {
chrome.tabs.getSelected(windowId, function (tab) {
updatePopupURLForSelectedTab(tab);
});
});
Would like to capture image of possibly inactive tab.
Problem is that when using the approach displayed here the tab often does not get time to load before capture is done, resulting in failure.
The chrome.tabs.update() call-back is executed before the tab can be captured.
I have also tried to add listeners to events like tabs.onActivated and tabs.onHighlighted and doing the capture when those are fired, but the result is the same. And, as a given by that, I have also tried highlighted instead of active on chrome.tabs.update() – and combination of both; with listeners and call-backs.
The only way to make it work partially better is by using setTimeout() , but that is very hackish, not reliable and ugly. The fact one have to activate a tab before capture is somewhat noisy – but if one have to add delays the issue becomes somewhat worse.
This is more like a convenience feature for my extension, but would be nice to make it work.
/* Not the real code, but the same logic. */
var request_tab = 25,
request_win = 123
old_tab;
/* Check which tab is active in requested window. */
chrome.tabs.query({
active : true,
windowId : request_win
}, function (re) {
old_tab = re[0].id;
if (old_tab !== request_tab) {
/* Requested tab is inactive. */
/* Activate requested tab. */
chrome.tabs.update(request_tab, {
active: true
}, function () {
/* Request capture */ /* CB TOO SOON! */
chrome.tabs.captureVisibleTab(request_window, {
format : 'png'
}, function (data) {
/* ... data ... */
/* Put back old tab */
chrome.tabs.update(old_tab, {
active: true
});
})
});
} else {
/* Requested tab is active. */
/* Request capture. */
chrome.tabs.captureVisibleTab(request_window, {
format : 'png'
}, function (data) {
/* ... data ... */
})
}
});
Since that you are updating the tab using the chrome.tabs.update() method, the callback will be called as soon as the tab properties are changed, but, obviously, before the page is loaded. To work around this you should remember that the tab isn't yet ready and, using the chrome.tabs.onUpdated event, check when it's ready and you can use chrome.tabs.captureVisibleTab().
Here is the solution:
var request_tab = 25,
request_win = 123,
waiting = false,
// ^^^ Variable used to check if tab has loaded
old_tab;
// Check which tab is active in requested window.
chrome.tabs.query({
active : true,
windowId : request_win
}, function (re) {
old_tab = re[0].id;
if (old_tab !== request_tab) {
// Requested tab is inactive
// Activate requested tab
chrome.tabs.update(request_tab, { active: true });
// Tab isn't ready, you can't capture yet
// Set waiting = true and wait...
waiting = true;
} else {
// Requested tab is active
// Request capture
chrome.tabs.captureVisibleTab(request_window, {
format : 'png'
}, function (data) {
// Elaborate data...
})
}
});
chrome.tabs.onUpdated.addListener(function(tabID, info, tab) {
// If the tab wasn't ready (waiting is true)
// Then check if it's now ready and, if so, capture
if (waiting && tab.status == "complete" && tab.id == request_tab) {
// Now you can capture the tab
chrome.tabs.captureVisibleTab(request_window, {
format : 'png'
}, function (data) {
// Elaborate data...
// Put back old tab
// And set waiting back to false
chrome.tabs.update(old_tab, { active: true });
waiting = false;
});
}
});
I am working on a chrome extension ,this extension have 2 icons in the browser action (On & Off) ;
basically when it is On the background execute the script.js (Inject the file:script.js)
using the chrome.tabs.executeScript(tab.id,{file:"script.js",function(){});
I had problems to turn it off !
I have tried to use messages communication between the background.js and the script.js but this does not work neither .
If I understand correctly, your extension should have two states, On and Off. Clicking the extension icon toggles it on/off.
In this case you should use storage so the extension knows what state it is in. So on a click event, use something like:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.storage.sync.get('state', function(data) {
if (data.state === 'on') {
chrome.storage.sync.set({state: 'off'});
//do something, removing the script or whatever
} else {
chrome.storage.sync.set({state: 'on'});
//inject your script
}
});
});
Note though that this is happening at the extension/browser level and will apply to all tabs, so you may need something more complex that records both the tab ID and the state.
You then have the choice to either always run a content script and check the on/off state before performing some action, or inject and remove the script. I'm not sure if you remove a script though. Depending on what the script does, you may just want to refresh the page (i.e. if your script messes with the DOM and you want to undo that when turning the extension off).
background.js
var enable=false;
chrome.browserAction.onClicked.addListener(function (tab) {
enable = enable ? false : true;
if(enable){
//turn on...
chrome.browserAction.setIcon({ path: 'icon.png' });
chrome.browserAction.setBadgeText({ text: 'ON' });
chrome.tabs.executeScript(null, { file: 'content.js' });
}else{
//turn off...
chrome.browserAction.setIcon({ path: 'disable.png'});
chrome.browserAction.setBadgeText({ text: '' });
}
});
To add onto what #david-gilbertson stated for making it active and inactive for certain tabs, I have created that functionality here. I also took added some functions for removing and adding tabs to the array. Enjoy!
function addTab(array, new_tab_id)
{
array.push(new_tab_id);
//then call the set to update with modified value
chrome.storage.sync.set({
active_tabs:array
}, function() {
console.log("added tab");
});
}
function removeTab(array, rem_tab_id)
{
const index = array.indexOf(rem_tab_id);
if (index > -1) {
array.splice(index, 1);
}
//then call the set to update with modified value
chrome.storage.sync.set({
active_tabs:array
}, function() {
console.log("removed tab");
});
}
chrome.browserAction.onClicked.addListener(function (tab) {`enter code here`
chrome.storage.sync.get({active_tabs : []}, function(data) {
if (data.active_tabs.includes(request.tab_id)) {
removeTab(data.active_tabs, request.tab_id)
console.log("Turned Off ".concat(request.tab_id))
document.removeEventListener("mousemove", highlightCurrentHover, false);
} else {
addTab(data.active_tabs, request.tab_id)
console.log("Turned On ".concat(request.tab_id))
document.addEventListener('mousemove', highlightCurrentHover, false);
}
});
);