Basically I just want to check links across different environments and thats just a different domain name. So basically I have my extension so far with buttons for each one but am having trouble getting anything to happen. Tried in b ackground.js as I thought that was the only place to access tab?
Tried this and some other variations but yeah this is very new to me so forgive my ignorance. I know javascript well enough but this is taking a bit to adjust.
let dev = document.getElementByID("dev");
console.log(dev);
dev.onclick = function(element) {
chrome.tabs.query({currentWindow: true, active: true}, function (tab) {
chrome.tabs.update(tab.id, {url: "www.google.com"});
});
1) An URL must start with a scheme: https://www.google.com. 2) Make sure to read about the extensions overview::architecture - the popup is a separate page with its own window, URL, and devtools which you can access by rightclicking the popup, then clicking Inspect. 3) Hint: no need to use tabs.query to change the active tab - simply omit tab.id, from tabs.update as it's an optional parameter. – wOxxOm
Thanks that helped a lot!
Related
on Clicking of a button, I want to perform an async operation and after that navigate user to an external website as shown below:
navigate("https://wwww.google.com?q=ABC")
But here's the problem:
while using navigate, my url changes like this, because for some reason it's assuming relative path:
http://localhost:3000/https://wwww.google.com?q=ABC
Can someone help me understand what is going wrong? I also tried setting replace to true but no luck there as well.
window.location.href = "https://wwww.google.com?q=ABC";
New to Chrome programming, but am more or less familiar with Javascript.
Goal:
A Chrome add-on that will allow me to:
1) Right-click on an link
2) then add a some more characters to that link
3) then reload the page with the new constructed URL.
EX:
A. Object has a link : www.address.com/34922
B. User righ-clicks on that object (Chrome's menu appears [which I know how to mod]), a menu option appears 'reconstruct rul.'
C. The add-on adds '/subfolderA' to the above mentioned url.
D. Page reloads with the following URL: www.address.com/34922/subfolderA
Thanks,
Steve
Use the chrome.contextMenus API, more specifically the create method.
// Add this to the background page
chrome.contextMenus.create({
title: 'Open this link plus /subfolderA',
contexts: ['link'],
onclick: function(info, tab) {
var linkUrl = info.linkUrl;
// Some logic, eg adding a fragment:
linkUrl += '/subfolderA';
// Replace URL on current tab
chrome.tabs.update(tab.id, {url: linkUrl});
},
// The following array should consist of valid match patterns
// This context menu item will only be visible on matching links
targetUrlPatterns: ['http://adress.com/*']
});
Relevant documentation
Used methods:
chrome.contextMenus API
chrome.tabs.create(<object createProperties>)
The onClickData type. This is just a plain JavaScript object. However, Chrome will validate this object, and throw an error when an unknown format (e.g. wrong property) is used.
chrome.tabs API
chrome.tabs.update(<integer tabId>, <object updateProperties>)
Further reading:
Background pages
Manifest file
Match patterns
I have a simple chrome extension where I'd like to click an image and copy the href of the link next to it. I have everything in place, but the copy will not work for the life of me. I have the following premissions in my manifest:
"permissions": [
"clipboardRead",
"clipboardWrite"
]
I then create an input with id "copyInp" and use the following function to copy to clipboard (tried to be as deliberate as possible here, so it's not the most compact):
function copyLinkToClipboard( link ) {
$("#copyInp").val(link);
var inp = document.getElementById("copyInp");
inp.focus();
inp.select();
document.execCommand('copy');
};
After this runs, I get nothing new in my clipboard when I ctrl+v. Any ideas as to what's going wrong here? The input definitely has the text I want in it, and I have the permission in the manifest. Any help would be greatly appreciated...
After a bit more digging I discovered I needed to use a background page. Apparently this is the only thing you can call document.execCommand on. So the fix is to create a background.html with the copy function and the input in it, add a listener like so:
chrome.extension.onRequest.addListener(function(obj) {
copyLinkToClipboard( obj.link );
});
and then use sendRequest to pass the text you want copied to the background page:
chrome.extension.sendRequest({link: linkText});
and don't forget to add the background page in the manifest
"background_page": "background.html",
voila. text copied to clipboard. would LOVE an easier way to do this (if security is the issue then why not make an api for extensions? or rather, why scrap the experimental api only to force us to do this stupid workaround?) but oh well, this will suffice for the time being
I have a question about writing Google Chrome Extension. My goal now is to detect that if a tab is created or a URL of a tab has been changed.
Practically, I want to insert a dictionary .js from a link online to any webpage on Chrome, and the script will run as background.html. For example, if you open the browser and go to your homepage, it will run the script to insert dictionary.js into that page. When a new tab is created or a new page is open, it will run the script too. And when people change tab's url, it will run the script too. How do I detect if the tab changes in such situations? Ok, here is my ... code, i guess, to explain that.
chrome.someFunctionThatDetectTheSituationsAbove(function() {
insertDictionaryScript();//I'd love to have the script of detection, not the insertDictionaryScript();
}
I would appreciate for any idea. Thank you. :P.
[x]
Just add this on your background.js :
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
insertDictionaryScript();
});
chrome.tabs.onCreated.addListener(function(tab) {
insertDictionaryScript();
});
There's also onActivated event:
chrome.tabs.onActivated.addListener(function(tabId, changeInfo, tab) {
insertDictionaryScript();
});
What you are describing is called a content script. You don't need any coding for that, just make a declaration in the manifest file. More about content scripts here.
You can detect new tab creation by adding a listener to the onCreated event.
You can detect the url change of the tab by adding a listener to the onUpdated event.
To detect the tab change in google chrome extensions:
In your background script.js add the below code:
chrome.tabs.onActivated.addListener(function() {
chrome.tabs.query({currentWindow: true, active: true}, function(tabs){
var currentURL = tabs[0].url;
console.log(currentURL);
})
});
I'm writing a Chrome extension. As part of the extension, I want to get the URL of the tab that the extension was called from. What's the difference between using:
chrome.tabs.getSelected(null, function(tab) { var myTabUrl = tab.url; });
and
chrome.tabs.getCurrent(function(tab) { var myTabUrl = tab.url; });
?
Method chrome.tabs.getSelected has been deprecated. You should use chrome.tabs.query instead now.
You can't find the official doc for obsolete method chrome.tabs.getSelected. Here is the doc for method chrome.tabs.query.
getCurrent should be what you need, getSelected is a tab that is currently selected in a browser. When they could be different - maybe your extension runs some background cronjob in tabs, so that tab could be not currently selected by a user.
Ok I got it all wrong apparently. getCurrent should be used only inside extension's own pages that have a tab associated with them (options.html for example), you can't use it from a background or popup page. getSelected is a tab that is currently selected in a browser.
As to your original question - you probably need neither of those two. If you are sending a request from a content script to a background page, then the tab this request is being made from is passed as a sender parameter.
For those who is looking for working example of chrome.tabs.query instead of deprecated chrome.tabs.getSelected:
chrome.tabs.query({
active: true,
lastFocusedWindow: true
}, function (tabs) {
var myTabUrl = tabs[0].url;
});