I am new to writing extensions for Chrome. I am trying to write a simple extension that will open a new tab with the specified url, on a click of the extension icon and need to pass a value to it so that this value is filled in the input area (ex: input for search) of the specified url.
I am successful in opening the new tab with the given url on clicking the icon. I used background script to listen for the event on the icon and open a tab, the script is as follows:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.create({'url': 'www.google.com'}, function(tab1) {
// Tab opened.
});
});
Now I am confused about what method will allow me to send some values to the new tab and use the value and perform some operation there like, if I pass "java api" I have to put this in the search area of the google page. I tried looking the Chrome extension docs but it is confusing as to what to use?
You should use chrome.tabs.executeScript() to run a content script in this tab:
chrome.tabs.create(..., function(tab1) {
chrome.tabs.executeScript(tab1.id, {file: ...});
});
This content script will then be able to do something with the tab contents. If it needs some data from your extension it will have to send a message.
Related
My manifest.json matches every URL. So, whenever, a URL is opened in Chrome, the content script is activated.
Current procedure:
(1) My background script updates the current empty URL to something.
(2) My content script is activated, because it's a match in the manifest.json. My content script needs to visit multiple URLs on the same website. It clicks on a link and navigates back (= everything in one tab) -> The content script calls itself again, because another URL is opened.
Problem:
I don't want content script to call itself multiple times. It should for example only activate, when it gets a message from the background script that a new URL was opened.
Thoughts:
chrome.windows.onCreated.addListener(function()) is around all my code in the background script. Is there something similar for the content script that i'm looking for?
Maybe something like:
window.addEventListener
browser.runtime.onMessage.addListener
browser.runtime.sendMessage
browser.runtime.onMessage
browser.tabs.sendMessage()
But i don't understand how to use them properly.
In your background script, do this:
chrome.windows.onCreated.addListener(function(tab) {
let msg = {txt: "execute"};
chrome.tabs.sendMessage(tab.id, msg);
};
And then in your content script, you can intercept this message via:
chrome.runtime.onMessage.addListener(function(msg){
if(msg.txt == "execute") {
doSomething();
}
});
Docs here.
https://developer.chrome.com/extensions/runtime#method-sendMessage
https://developer.chrome.com/extensions/runtime#event-onMessage
I've written the following simple code in my background script:
chrome.tabs.onActivated.addListener(function (info) {
console.log(info.tabId);
});
Then I go and open new tab. Console logs 73. Then I update the url of the opened tab, nothing is logged into the console. However, if I then type anything into the address bar on the same tab and google results page is open, the new id 77 is logged into the console.
What's happening here?
Chrome prerenders omnibar search results while you type there. It uses a hidden internal tab with a tabId of -1 while it's hidden, then a new tabId is assigned if the user confirms the search via Enter/mouseclick. And this new tab with a new tabId entirely replaces the current tab.
Prerendered tab replacement event: chrome.tabs.onReplaced.
Prerendering may be disabled with a command line switch.
I'm writing a chrome extension which will open new tab. My question is how can I get the newly opened tab? When I reach that new tab, I want to make some changes in the source code.
This; https://developer.chrome.com/extensions/tabs#method-create creates new tab. But I want to make some changes before user click the tab. (Change the selected value and run inside function)
How can I do this with method create?
There is a callback parameter for chrome.tabs.create, you could call chrome.tabs.executeScript inside it and inject some code into the created tab.
chrome.tabs.create({url: 'http://www.google.com'}, function(tab) {
chrome.tabs.executeScript(tab.id, {code: 'document.body.style.backgroundColor = 'green;'});
});
In my extension I want to open a new tab when a toolbar button is clicked (works), display a static HTML page with JavaScript on the tab (works) and pass data (URL from the originating page) to the new tab (does not work). I tried:
Using query parameters like myTab.url = safari.extension.baseURI + 'page.html?' + params, but the target page does not seem to have a location assigned (location.search giving no result).
myTab.page.dispatchMessage("url", "someUrl"); after opening the tab, but the message never arrives in the new tab (I suspect, it's already "through", when the tab has opened).
Any suggestions?
I parsed document.URL in opened page for specific parameter and it worked for me. E.g.
function __onLoad()
{
var p = $.url(document.URL);
alert(p.param("url"));
}
And two possible reasons for missed message:
You did not add message event listener on your page
You called dispatchMessage before event listener was added
Check Safari development doc at https://developer.apple.com/library/archive/documentation/Tools/Conceptual/SafariExtensionGuide/MessagesandProxies/MessagesandProxies.html
I am writing my first chrome extension, and I want to pass a variable to the currently opened tab and manipulate the DOM with it.
My extension has a button, and when clicked, is executing this code:
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.executeScript(tab.id, {
file: 'tabscript.js'
});
});
This works fine, but I see no way to pass a variable to tabscript.js so it can be used on the opened tab.
What do you need to pass a variable in to? Do you have a function you are calling in your script?
It must be noted that you don't have access to the pages Javascript, just the DOM.
If you have a particular function that you have to call with specific parameters then you should investigate content scripts and message passing.
Content scripts can get run on every page load (or a selection of pages), and you would use message passing to send a message from your extension button to the function in the content script.
Alternativly, and closer to your original idea you can construct the function you want to call at run time using the following:
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.executeScript(tab.id, {
code: 'function(){ ...... your code built dynamically ......}'
});
});