I am working on a Chrome extension project and one of the button of the popup must open my TeamSpeak server on click.
The final HTML code of my button is :
Issue is my button open a new blank page with the address "ts3server://MYSERVER". If I manually copy and paste "ts3server://MYSERVER" in Chrome, it open TeamSpeak software as wished.
This can be achieved by adding (and removing) an invisible iframe.
function openExternalLink(uri) {
var iframe = document.createElement("iframe");
iframe.src = uri;
iframe.style.display = "none"; // Make sure it's hidden
document.body.appendChild(iframe); // This will trigger load => external request
iframe.remove(); // Cleanup
}
You need to create a button and add a click handler that calls this.
No need to disturb existing tabs for that.
Related
is it possible to add simple button with onclick event to a page with chrome extension?
for instance if I am looking at
google.com
var google = document.getElementById("main");
var button = document.createElement("button");
var text = document.createTextNode("test");
button.appendChild(text);
google.appendChild(button);
I see my button in it?
You can use that code in a content script set to run on specific webpages.
Content scripts are JavaScript files that run in the context of web
pages. By using the standard Document Object Model (DOM), they can
read details of the web pages the browser visits, or make changes to
them.
I am trying to write a JavaScript function that will open my extension like when the extension icon is clicked. I know how to open my extension in a new tab:
var url = "chrome-extension://kelodmiboakdjlbcdfoceeiafckgojel/login.html";
window.open(url);
But I want to open a pop-up in the upper right corner of the browser, like when the extension icon is clicked.
The Chromium dev team has explicitly said they will not enable this functionality. See Feature request: open extension popup bubble programmatically :
The philosophy for browser and page action popups is that they must be triggered by user action. Our suggestion is to use the new html notifications feature...
Desktop notifications can be used progammatically to present the user with a small HTML page much like your popup. It's not a perfect substitution, but it might provide the type of functionality you need.
Chrome team did create a method to open the popup programmatically, but it's only enabled as a private API, and plans to make it generally available have stalled due to security concerns.
So, as of March 2018 as of now, you still can't do it.
Short answer is that you cannot open browserAction programmatically. But you can create a dialog with your content script which emulates your browserAction and display that isntead (programmatically). However you won't be able to access your extension's background page from this popup directly as you can from your popup.html. You will have to pass message instead to your extension.
As mentioned there is no public API for this.
One workaround I have come up with is launching the extension as an iframe inside a content script with a button click. Whereby the background script emits the extension URL to the content script to be set as the iframe's src, something like below.
background.js
browser.runtime.onMessage.addListener((request) => {
if (request.open) {
return new Promise(resolve => {
chrome.browserAction.getPopup({}, (popup) => {
return resolve(popup)
})
})
}
})
content-scipt.js
const i = document.createElement('iframe')
const b = document.createElement('button')
const p = document.getElementById('some-id')
b.innerHTML = 'Open'
b.addEventListener('click', (evt) => {
evt.preventDefault()
chrome.runtime.sendMessage({ open: true }, (response) => {
i.src = response
p.appendChild(i)
})
})
p.appendChild(b)
This opens the extension in the DOM of the page the script is running on. You will also need to add the below to the manifest.
manifest.json
....
"web_accessible_resources": [
"popup.html"
]
....
You could emulate the popup by displaying a fixed html element on the page in the same location the popup would be and style it to look like the popup.
I had the same requirement: When the user clicks on the extension icon a small popup should open. In my case, I was writing an extension which will give updates on selective stocks whenever the icon is clicked. This is how my popup looked.
If you were having the same requirement then please read the answer below.
This is how my manifest.json file looked.
All the heavy lifting was handled by manifest.json file only. There is a section browser_action inside which there is a key called default_popup, just put the name of the HTML file that you want the popup to display.
I wanted my extension to work on all the pages that's why I added the attribute matches under content_scripts. I really didn't need to put the jquery file jquery-3.2.1.js inside the js array but the extension manager was not allowing me to keep that array empty.
Hope this helps, do comment if you have any doubt regarding the answer.
When a user clicks on the browser icon for the extension, it brings up the Popup that has been defined.
I need to create a toggle button to turn on/off a stylesheet for a specific page/domain when a user clicks a button that is within the popup.
For example, when a user uses the Adblock extension, when the user clicks the browser icon, it brings up the popup, which has a series of links. One such link is "don't run on this page", which then changes to "enable" which the user can click to turn it back on.
Another example (much better example): Classic Popup blocker has a button on the popup that says "add this page to blacklist" and once clicked changes to "remove from blacklist".
The classic popup blocker is generally the functionality I want for my extension (it's not doing anything with ads or popup blocking, that was just an example), so that when a user clicks the button on the popup it will turn a stylesheet on or off that I have written and saved as a .css file in the extension.
I hope I have made this clear enough to understand.
SCREENS
Here is a photoshopped picture that I made so that you can see exactly what I am trying to do:
and photoshopped again to see what should happen once you click the buttons:
You can use the chrome.tabs.executeScript method to dynamically inject/remove CSS (requires the tabs permission in manifest.json):
chrome.tabs.executeScript(null, {code:
'document.documentElement.setAttribute("RWchooseStyle", "style1.css");'
}, function() {
chrome.tabs.executeScript(null, {file: 'myscript.js'});
});
In myscript.js, detect whether you have already inserted CSS. If not, add a new <style> or link element, and assign an id to it. Otherwise, replace the style sheet.
Example of myscript.js:
var selectedStyle = document.documentElement.getAttribute('RWchooseStyle');
var id, link;
if (selectedStyle) {
id = 'RW_style_' + selectedStyle.replace(/\W/g,''); // Sanitize id
// Remove previous sheet, if available.
link = document.getElementById(id);
if (link) {
link.parentNode.removeChild(link);
}
}
if (id) {
// Insert new sheet
link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = chrome.extension.getURL(selectedStyle);
link.id = id;
(document.head||document.documentElement).appendChild(link);
}
// Remove temporary attribute
document.documentElement.removeAttribute('RWChooseStyle');
In this example, the CSS files have to be defined in your extensions directory. Of course, you can also use <style> instead if <link>, and dynamically set the style's content.
Note: Do not forget to add the style sheet to the web_accessible_resources section of the manifest file.
I would like my page action to be activated for all the outgoing links from a certain page. How might I go about doing that? I've gone over the docs to no avail. Any pointers would be appreciated!
Google Chrome API doesn't have such API, but functionality you want may be implemented using standard Google chrome Extensions API.
You need to implement content script
Your content script should modify DOM of the page you want to handle and override all outgoing links with your custom javascript which will do some stuff and open clicked link.
To modify link href you can do something like this:
function processLink(element, newHref) {
var a = document.createElement("a");
a.href = newHref;
a.textContent = element.textContent;
a.title = element.title;
element.parentNode.replaceChild(a, element);
}
UPDATE 1.
Instead of newHref you can generate something like
a.href = "javascript:processOutgoingLinkClick('" + element.href + "')"
Function processOutgoingLinkClick should contain actual processing of the click.
Just a curiosity, why wont you use the Chrome Extensions Tab Events you can listen for onUpdated onCreated. When a user clicks on a link on the page it will go and fire an event within onUpdated.
So within your background.html, you can do:
chrome.tabs.onUpdated.addListener(function(tabId, info) {
if (info.status === 'loading')
console.log('Loading url ... ' + info.url)
});
Same thing for onCreated. Then while its loading, you can decide what to do with your pageAction.
I'm trying to focus an existing tab when the content reloads. The usual window methods don't seem to work.
Here's whats happening: On page_1 I have a link like...
Go to my other page
If the tab doesn't exist, when the link is clicked it opens a new tab and takes focus. (Perfect)
If you then go back to page_1 and click the link again, it reloads the content in the existing tab (perfect) but doesn't focus (crap). I've tried the usual window.focus, $(window).focus methods on load with page_2 without luck.
Any recommendations?
It is impossible.
The following appears to work in IE8 and FF13:
<script type="text/javascript">
// Stupid script to force focus to an existing tab when the link is clicked.
// And yes, we do need to open it twice.
function openHelp(a) {
var tab = window.open(a.href, a.target);
tab.close();
tab = window.open(a.href, a.target);
return false;
}
</script>
Help
There is a workaround to this. Use javascript to open a window in a new tab, store a reference to that tab, and when you want to focus it; close it first and then re-open it.
if (window.existingWindow != null)
try { window.existingWindow.close(); } catch (e) { };
window.existingWindow = window.open("/your/url", "yourTabName");
We use a similar approach to opening the preview pane of the current page you're working on in our service called Handcraft where the above works as expected (we wanted the new window to always focus).
Without using a framework you can put a script block at the bottom of your page that will run once the page loads. Because it is after your HTML you can be assured that the HTML is refers to is actually available.
The script can set the focus to the element you want.