I am using BroadcastChannel to remotely control the contents shown in another browser window (on the same PC) displayed on a projector. (Basically, the projected window is an extended desktop display.) It has worked nicely so far on both Chrome and Edge, with a short JS script each in the remote controlling page and the controlled page.
However, the projected browser contents are in three different tabs. Currently, I have to switch focus to that projected window and deftly use Ctrl-Tab to get the tab I want to control to become the active tab.
How do I programmatically select which tab to become active? If there's no generic method, I am happy to have a solution just for Chrome or Edge.
If the tabs are opened with window.open, you can switch between them using focus(). The sample code is like below:
<input type="button" onclick="window1.focus()" value="switch to window1" />
<input type="button" onclick="window2.focus()" value="switch to window2" />
<script>
var window1 = window.open("https://samplesite.com/window1");
var window2 = window.open("https://samplesite.com/window2");
</script>
If not, it's impossible to switch between the tabs due to security reasons. If it were possible, it would be a risk that attackers would find a way to gain access to information about the other tabs a user has opened.
Besides, if you're making a browser extension, you can switch between tabs using chrome.tabs API. For more information and sample code, you can refer to this answer.
Related
I am here asking how is it possible for my chrome extension to be able to "survive" throughout the user refreshing the page and changing page after selecting a feature.
For an example let's use a rather generic background color changing setting which changes the background color of a desired site. Once ticking the enable box and having the background changed to the option selected, it does not stay persistent after changing page or refreshing. I am here asking if someone could possibly help me with some sort of helpful resources which are more helpful than the developer.chrome site.
EDIT: for much better example of my question which is my bad. If anyone of you are aware of such extensions like "BetterTTV" for Twitch, it has a menu of options. One of these options is the "night" option which mentioned prior turns the entire site to "night colors" such as whites to black and black text to light. This option once enabled is seen through the entire site and even once Chrome is closed is still enabled to be producing changes next time opened. If i am correct in understanding what has been said, using Chrome storage will preserve such actions enabled by the user to be produced on the page till disabled.
Thank you.
A content script can survive for the same time that a webpage remains in the tab (i.e. not through refresh, or navigating to a new page). You can not make this longer. A background script can exist for the time that Chrome is running from starting Chrome through exiting. If you want to save settings, you can use chrome.storage, or store the setting in the background page. You can then read the settings, or get them from the background page, when your content script starts again when the page is refreshed, or the user navigates to a new page. Using chrome.storage will allow you to persist the option until turned off. Using chrome.storage, even if Chrome is exited and restarted later, the option information will still be available. If you just store the data in a variable in the background page, it will not persist through exiting and restarting Chrome.
If you are changing a setting in a content script it will live only as long as the content script unless you get the information somewhere will it will persist longer. That means chrome.storage or messaging the information to a background script. Either way, if you want to have the setting active when the content script next runs (refresh, navigating) you will have to get the setting back (e.g. reading from chrome.storage or receiving a message from a background script).
In general, changing options in the content script is, probably, not a good idea. It is uncommon for such to be done in the content script. On the other hand, depending on what you are doing, changing some of your extension's options in a content script may be the most appropriate.
How best to organize this depends on what you are doing. To go further really requires more information from you (e.g. code that shows what you are doing). There are many examples around of having settings persist, although usually not changed from a content script. Settings are mostly changed from options pages, popups, etc.
If your function is as simple as "ticking the enable box and having the background changed to the option selected", having the selection take place in the content script is not a good idea. In that case, you should have a browser_action button which is either a toggle, or that brings up a popup where a checkbox could be ticked (if you have multiple options). The background script would then inject the content script using chrome.tabs.executeScript() only when the feature was enabled.
Update:
Based on the new information you have added to your question, it sounds like you should use a popup which will allow you to have multiple options, or a list of sites on which your add-on is enabled. If you are looking for an example, you can take a look at the Chrome developer options page example. You can have that as a popup with a `browser_action button in addition to being an options page by adding the following to your manifest.json
"browser_action": {
"default_icon": {
"48": "myIcon.png"
},
"default_title": "Show panel",
"default_popup": "options.html"
},
If interested, my answer to this question shows using a single page as both an options page and popup. It shows how to get the data from the options page into chrome.storage and read it back. It is a bit more complicated than potentially desired as it shows four slightly different methods of communicating the information from the popup to a background page. It is tested and working in both Chrome and Firefox.
Here is an example of reading data (useDirect and emailAddress) from chrome.storage and placing the information in the DOM (to show the current value on an options page/popup):
// Restores select box and input using the preferences
// stored in chrome.storage.
function useStoredOptionsForDisplayInDOM() {
chrome.storage.local.get({
useDirect: 0,
emailAddress: '',
enabled: false
}, function(items) {
//Store retrieved options as the selected values in the DOM
document.getElementById('useDirect').value = items.useDirect;
document.getElementById('email').value = items.emailAddress;
document.getElementById('enabled').checked = items.enabled;
});
}
This is how those same values are stored in chrome.storage:
function saveOptions() {
let useDirectValue = document.getElementById('useDirect').value;
useDirectValue = +useDirectValue; //Force to number, not a string
let email = document.getElementById('email').value;
let functionEnabled = document.getElementById('enabled').checked;
chrome.storage.local.set({
useDirect: useDirectValue,
emailAddress: email,
enabled: functionEnabled
});
}
And the <body> of the HTML:
<body>
<div id="optionsArea">
Use direct method:
<select id="useDirect">
<option value="0">Option 0</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">option 3</option>
</select>
<div>Email:
<input id="email"></input>
</div>
<label>
<input type="checkbox" id="enabled">
Enable functionality.
</label>
</div>
<script src="options.js"></script>
</body>
My web application is mimicing the UI of my desktop application, flow is as follows
Select Task in browser window
Change any Options and then start
Show Progress in same browser window, the progress bar goess back to server every 5 seconds checking progress.
When task has completed we show report in new tab
and go back to Select task Window,
this is done by running following Javascript in progress page
window.open('/start','_self'); window.open('/reporturl','_blank');
This works fine on my PC but when trying on Safari on OSX and on Android phone and iPad one of two things happen
The progress page becomes the start page but the report page is not opened in tab
The Progress page becomes the report page
My question is does opening window in new tab with _blank have all the problems of using popup windows. If so should I modify my prcoess so that at stage 3 it just displays report page, and then add a back button or navigable footer to the report to allow user to get back to start page ?
I can think of some options you could use instead of new tab.
Modal with Ajax
-- With jQuery it is posible to open modal
dialogs they can be populated with html (or other data) fetched with ajax (async). I am a big fan of these and use them all over my projects. Users will not be annoyed with pop-up warning messages, etc. Once the content is read (or whatever) the user can simply close the dialog. (If I had to make your app I would certainly implement this).
Besides the jQuery dialogs, other modal/dialog scripts are out there. Check out Bootstrap Modal if you like it modern.
Serve report as download
-- Depending on what the user can/will do with the report, it might be interesting to write the report page in a way that it sends back a .pdf file, or another type of file, as download. Loading the URL in a new tab will now always start a download. Triggering this from JS without user interaction might be a problem though (same as with pop-up / new tab). Adding a button to trigger the download on complete will solve this.
I know the question was about the use of tabs.. But try to avoid it. Browsers handle it all in their own way. And many users get confused when suddenly stuff is opening in tabs when they did not ask for it. In case of pop-ups, it is possible for users to turn them of or convert into opening a new tab from within the browser settings. If they have been fiddling with browser defaults, you'll have troubles of keeping the 'flow' of the app the same for all users (and cross browser).
I have a html page with several links to files with various file types, such as pdf, csv, and zip. Depending on the available browser plugins, some of these files can be opened inline by the browser, whereas others will be downloaded.
I don't want such links to open in the current tab, so each one has the attribute target="blank".
This works fine in most browsers:
When the user clicks on a link to a file that can be displayed inline, the file is shown in a new tab.
Otherwise, a new tab is opened and immediately closed as soon as the file starts to download. The user stays in the current window.
In Microsoft Edge, however, the second case does not work: the new tab remains open. This is annoying, because the user is now looking at a useless empty tab.
Is there any way to prevent this from happening?
I don't think there is anything you can prevent Edge's this behaviour. What you can do is to change the HTML tag.
Use download attribute in <a> element without target attribute. This way, the browser will prompt save dialog instead of opening a new tab.
<a href="myfile" download>Download</a>
http://www.w3schools.com/tags/att_a_download.asp
In this case, the browser will not display the file inline.
If you still want your clients be able to see the files inline you can detect the client's browser; if it is Edge then use the download attribute, if not use target attribute. In addition, you can use something like navigator.mimetypes to detect which file types can be displayed inline (see https://developer.mozilla.org/en-US/docs/Web/API/NavigatorPlugins/mimeTypes).
Here is the detect function which I took from another post (How can I detect Internet Explorer (IE) and Microsoft Edge using JavaScript?)
function isEDGE(){
return /Edge\/\d./i.test(navigator.userAgent)
}
Leave your <a> tags with no target and download attributes. Use detect function and decide on the right attribute.
Like this:
$(document).ready(function(){
if(isEDGE()) {
$('a').attr('download','download');
} else {
$('a').attr('target','_blank');
}
})
Note:
I am not sure about Edge detecting function.
Method 1:
I suggest you clear the Clear browsing data option of Microsoft Edge and check if you face the issue. To do so perform the steps below.
Click on the More actions icon next to the feedback icon present on top right corner of the Edge.
Select Settings and click on Choose what to clear.
Check the boxes Browsing history, Cookies and saved website data and Cached data and files and click on Clear.
Method 2:
If you are using any Proxy connection, then try disabling the proxy connection and check.
Follow the steps to disable proxy:
Click the Settings icon at the top right corner in internet explorer.
Click the Tools button, and then click Internet Options.
Click the Connections tab, and then click LAN settings.
Uncheck the box next to “proxy server for your LAN”.
Click on OK to save the setting and close window.
Now check the issue by opening Edge.
I'm looking to build a chrome extension that allows the user to have an independent subwindow that is the same in each tab (for example you are taking notes and the notes are synchronized among each tab). Also, clicking a link should not destroy this subwindow.
One solution is to inject an iframe in each tab, and try to synchronize this data serverside and send back to each client tab, as it is updated.
This seems very tedious, plus the iframe would be provided by a third party, and I want to make it the easiest for them.
Is there a way I can have a shared dom piece and display it in its current state across several tabs?
There's an API (still experimental as of Chrome 17) that does more or less exactly what you want. If you visit about:flags, and enable "Panels" (they're enabled by default in Dev and on Canary (and on ChromeOS)), you'll be able to use chrome.windows.create with a type of panel to create a floating pane that exists independently from the browser window. That would likely meet your need.
Take a look at the Google Talk extension for an example of how it might work.
Every solution I've seen so far for opening a new browser window uses the target property in to set it to "_blank". This is frustrating because in some browsers it only opens a new tab AND combine that with the auto-resizing behvaiour at http://www.facebook.com/connect/prompt_feed.php?&message=test, it basically mangles my browser whenever I try updating my status from my site.
How can I be sure to open a new window when a user clicks on a link?
Thanks!
Trindaz on Fedang
Popups are windows, they just have some features disables. You can make a popup act like a regular window by enabling these features. For example, if you open a popup with
window.open('url', 'name', 'width=500, height=500, status=1, toolbar=1, location=1, menubar=1, resizable=1');
the window will have a toolbar, a URL bar, a status bar, menus, and it will be resizable. It will the same as any other window.
Keep in mind, however, that many browsers block window.open() under some conditions, and some of them will open new tabs if you specify a lot of features. Some are weird about it too; Chrome, for example, uses scroll bars on popups by default, but if you specifically tell it to use scroll bars in a popup (using scrollbars=1), it will open in a tab instead.
So basically there is no way to be completely sure that your page will always open in a new window, because browsers all handle this stuff differently, users can change settings too. The code above is probably your best bet if you have to have a new window, but you might want to look into other options.
window.open(URL,name,specs,replace)
function newwindow()
{
myWindow=window.open('','','width=300,height=300');
myWindow.document.write("<p>This should open in a popup</p>");
myWindow.focus();
}
There is a legitimate reason for using Target=_blank that everybody has completely overlooked, and that is when a website is written as a BOOK with chapters/pages and the Table of Contents must remain intact without using the BACK button to reload the previous page (Table of Contents). This way all a surfer needs to do is close the Target Page when finished reading and they will be back to the Table of Contents.
Lucky for us that HTML5 has reinstated the Target="_blank" code, but unfortunately the "Block Popups" must be unchecked for it to work.