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.
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.
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)
})
google.com/webstore i have add my extension
i Have check "This item uses inline install."
Websites: chose Verify site
google.com/webmasters i have add site and Verifyed.
when i put this code on me site:
<link rel="chrome-webstore-item"href="https://chrome.google.com/webstore/detail/itemID">
<button onclick="chrome.webstore.install()" id="install-button">Add to Chrome</button>
<script>
if (document.getElementById('extension-is-installed')) {
document.getElementById('install-button').style.display = 'none';
}
</script>
i click on button "Add to Chrome" install app extension, but when i refresh site button "Add to Chrome" is display. why? i cant Understanding
You're obviously following the guide at https://developer.chrome.com/webstore/inline_installation
In that case, you missed a step.. Let's look at the code.
if (document.getElementById('extension-is-installed')) {
document.getElementById('install-button').style.display = 'none';
}
The condition here is whether an element with ID extension-is-installed is present on the page. But what adds it?
A step back:
For example, you could have a content script that targets the installation page:
var isInstalledNode = document.createElement('div');
isInstalledNode.id = 'extension-is-installed';
document.body.appendChild(isInstalledNode);
So, you need to add a Content Script that adds that element to the page.
However, I doubt that guide will work. By default, content scripts execute after DOM is loaded (and therefore, that hiding script has executed). You can make them run at document_start, but then body does not exist yet.
Let me make an alternative hiding script, based on communicating with the extension using "externally_connectable". Suppose your website is example.com, and your extension's ID is itemID
Add example.com to sites you want to be messaged from:
"externally_connectable" : {
"matches" : [
"*://*.example.com/*"
]
},
In your background page, prepare for the message from the webpage:
chrome.runtime.onMessageExternal.addListener(
function(message, sender, sendResponse) {
if(message.areYouThere) sendResponse(true);
}
);
In your page at example.com, add a button (hidden by default) and code to show it when appropriate:
<button onclick="chrome.webstore.install()"
id="install-button" style="display:none;">
Add to Chrome
</button>
<script>
if (chrome) {
// The browser is Chrome, so we may need to show the button
if(chrome.runtime && chrome.runtime.sendMessage) {
// Some extension is ready to receive messages from us
// Test it:
chrome.runtime.sendMessage(
"itemID",
{areYouThere: true},
function(response) {
if(response) {
// Extension is already installed, keep hidden
} else {
// No positive answer - it wasn't our extension
document.getElementById('install-button').style.display = 'block';
}
}
);
} else {
// Extension is not installed, show button
document.getElementById('install-button').style.display = 'block';
}
}
</script>
Was requested to add page reload after install. chrome.webstore.install has a callback parameter specifically for this.
Instead of using onclick attribute, assign a function:
document.getElementById('install-button').addEventListener("click", function(e) {
chrome.webstore.install(function() {
// Installation successful
location.reload();
});
});
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.
So by default, the new tab page is replaced with my Chrome extension (via the manifest). However, I'd like to give the option to disable it (programmatically).
How can I do this?
Google made a Star Wars new tab replacement which allows you to view the default new tab page. The url it uses is chrome-search://local-ntp/local-ntp.html. Example:
options.html:
<input type="checkbox"> Use default new tab page
options.js:
var checkbox = document.querySelector("input[type=checkbox]")
checkbox.addEventListener("click", function() {
chrome.storage.sync.set({ defaultnewtab: checkbox.checked })
})
newtab.js:
chrome.storage.sync.get("defaultnewtab", function(storage) {
if(storage.defaultnewtab) {
chrome.tabs.update({ url: "chrome-search://local-ntp/local-ntp.html" })
} })