For my Chrome extension, I need to open a new tab next to the active/current tab. But tab.create method always append the tab at the end of tab list.
Firefox has relatedToCurrent property to set tab position.
Is there any Chrome equivalent for opening tabs next to active tab?
You can use the "index" property to specify the position at calling chrome.tabs.create() function. If you want to open a new tab next to the current tab:
chrome.tabs.query({
active: true, currentWindow: true
}, tabs => {
let index = tabs[0].index;
chrome.tabs.create({
...,
index: index + 1,
...
}, tab => {
...
});
}
);
If you are trying to create new tab from injected content script in a tab next to it then below is the code for content script and background/servicer worker script.
//content script code
chrome.runtime.sendMessage({ open_new_tab: true, url: 'https://www.google.com' })
//background.js or service_worker.js
chrome.runtime.onMessage.addListener( (request, sender, sendResponse) => {
if (request.open_new_tab) {
//sender is the tab the above content script code is injected in
chrome.tabs.create({url: request.url, index: sender.tab.index + 1})
}
//if you are using Manifest V3 then always call sendResponse as below
sendResponse(true)
})
Related
Is there anyway to use chrome.browserAction.onClicked.addListener in background.js while using default pop.html?
It's like I'm trying to make a multipurpose extension where on clicking extension icon there comes up a popup with button nd then one of the button click should be responsible for fetching tab id.
Is it possible?
Popup.js:-
function sendId(){
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
let tabDefination={
tabDetail:tabs,
txt:"tabId",
purpose:"ScreenShot"
}
console.log(tabs)
//Use runtime for sending mssg to bg scripts and tab for content.js
chrome.runtime.sendMessage(tabDefination);
});
}
By this way we can pass the tab id freom popup.js to background script.
how can I make my chrome extension change icon (without clicking on it). I've got script that's checking if page has certain string and if it has I want my extension icon change from grey to colored one.
Updated Answer: For Manifest V3
Use chrome.action.setIcon({ path: "/example/path/image.png" }).
Source
Original Answer: For Manifest V2 and Under
The content script will need to send a message when it wants to set the icon e.g.
chrome.runtime.sendMessage({
action: 'updateIcon',
value: false
});
Then in the background script:
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
if (msg.action === "updateIcon") {
if (msg.value) {
chrome.browserAction.setIcon({path: "/assets/tick.png"});
} else {
chrome.browserAction.setIcon({path: "/assets/cross.png"});
}
}
});
In background you can do stuff like :
const updateIcon = tabId => {
const icon = isDisabled() ? icons.disabled : icons.enabled;
chrome.pageAction.setIcon({ tabId, path: icon });
};
chrome.tabs.onUpdated.addListener(updateIcon);
ref : https://github.com/gbleu/opteamissed/blob/master/background.js#L38
Here is my popup.html code:
Google
But when I click the Google link nothing happens. How do I make the link take me to google.com in the current tab?
You need to use chrome.tabs.query to find the selected tab and update it.
So I would do something like:
popup.html:
<div id='clickme'>Google</div>
<script src = 'popupjs.js'></script>
popupjs.js:
document.getElementById('clickme').onclick = function() {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
var tab = tabs[0];
chrome.tabs.update(tab.id, {url: 'http://www.google.com'});
});
};
This uses chrome.tabs.query and chrome.tabs.update to find the current tab id and update it with the url http://www.google.com.
Note: You will need the tabs permission in your manifest file!
You could then use some CSS to make the div look like a real link, or just change the cursor when hovering over it.
Is there any way to exexute a javascript, that navigates the browser to some url, when user clicks on extension icon?
You can use the following code:
chrome.tabs.update({
url: "http://www.example.com/"
});
You can also navigate active tab to required url ( without opening new tab )
chrome.tabs.query( { active: true, currentWindow: true }, function( tabs ) {
chrome.tabs.update( tabs[0].id, { url: "http://stackoverflow.com//" } );
});
Use chrome.tabs.update({ url: "http://www.example.com/" }) in the onClicked listener of your browser action. When you omit the tabId argument, the update applies to the currently selected tab.
Despite being part of the chrome.tabs API, this does not require the tabs permission.
I need a page action popup icon to appear when a tab has a specific URL in the address bar.
I have this in my background page
chrome.tabs.query({url:"MYURL.COM"} , function(tab)
{
for(i=0;i<tab.length;i++)
{
console.log(tab[i].id);
chrome.pageAction.show(tab[i].id);
}
});
The popup shows whenever I reload the extension but as soon as user refreshes, it goes away and doesn't come back.
The reason is that the background.js page is only loaded once, so you need to add a listener to every time the page tab is updated to check whether the page action should be shown, something like this:
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
if (tab.url.indexOf("MYURL.COM") > -1) {
chrome.pageAction.show(tabId);
}
});
There is no reason to iterate over each tab as you have done.
As Adam has already said, the tabs.onUpdated event is the way to do it.
Anyway, it [seems like I'm not the only one who experienced that the tabs.onUpdated event doesn't always fire when it should - even when waiting for complete status.
So if you're having the same issue, you might want to try my modified version that has proven reliable for me 100%.
chrome.tabs.onUpdated.addListener(function(tabId, change) {
if (change.status == "complete") {
chrome.tabs.query({active: true}, function(tabs) {
var tab = tabs[0];
// Now do stuff with tab .. Eg:
if (tab.url.indexOf("MYURL.COM") > -1) {
chrome.pageAction.show(tab.id); }
else {
chrome.pageAction.hide(tab.id); }
});
}
});
Use chrome.tabs.onUpdated to listen to new tabs and tab reloads of the domain you are interested in.