JavaScript handling and event listeners - javascript

This is within the context of an edge extension but it will work with Standard JavaScript.
The extension must;
1 Be able to recognise when a new tab is opened.
2 Replace the new tab with a designated URL rather than about:blank etc.
3 Have links that appear in popups open within the active tab, not a new one.
I have this JavaScript;
function handleCreated(tab) {
var newTabURL = {url: ''};
browser.tabs.update(newTabURL);
}
browser.tabs.onCreated.addListener(handleCreated);
as an example. It does replace the current tab with google but only when a link in the popup is clicked. The link from the popup should be what replaces the active tab OR if the user creates a new tab it should be replaced with mycompany.com/newtab.html, for example.
I've got an unpackaged example with everything so you can see all of the code. To use this you must first enable developer options in MS Edge (Here's how), then you can load the extension.
The extension in its current state has code notes and explains within the UI. You can grab the extension in its current form from this link. You'll just need to download and unzip then load folder within edge. I figured this is easier than me posting all of the code as you can better see how elements interact with each other.
So in summary;
1 The New Tab should open with the custom URL https://mycompany.com/newtab.html.
2 Typing Google should redirect to https://gooogle.co.uk. (Adding word shortcuts with JS in the address bar)
3 Links opened from the popup should replace the active tab that the popup is available over and not open in new tabs.
It works a little bit, I'm just struggling to get the new tab function to work. This isn't intended for the MS store so the policies aren't relevant.
Download the zipped extension folder here.

MS Edge opens links from a popup in a new tab by default, and this tab isn't active.
If for example you had;
<p>Visit Google</p>
the URL would open in a new tab. To open the URL in the tab that is active within the Edge browser you can instead do the following, so it is actually possible.
1 Place the element in a DIV, for example linked content and use <div id="linkedcontent> within your HTML.
2 Place the content that should trigger the new tab within the DIV.
3 Use the following JavaScript to getElementByID and then use .onclick to replace the current browser window.
document.getElementById("linkedcontent").onclick = function() {
var LinkedContent = {url: 'https://google.com'};
browser.tabs.update(LinkedContent);
};
This will then result in the browser window being replaced by the URL specified. In my example it's https://google.com. If you need to do this multiple times just duplicate the code and change the DIV id to something unique for each and reflect this in the JavaScript too.

Related

Reloading a tab with a target attribute (instead of creating a new tab)

Consider the following links:
One
Two
if I correctly understood various online tutorials, clicking the first link should create a tab/window of ID "other," and then clicking the second link should put new content in the same tab.
In Safari, we get two tabs—in fact, clicking the first link twice makes two tabs with identical contents.
In Firefox, clicking either link wipes out the tab holding the link and puts the new content in it, not creating a new tab.
Which is correct, my reading, Safari, Firefox, or something else?
What I wanted to do is what I expected from my reading.  How do I accomplish that? Use Javascript?

Opening popup in new tab

So I recently implemented a chrome extension to grab images in an active tab and extract them to a popup for downloading. I would like to give users the option to view the popup window (including the extracted images) in a new Chrome tab.
However, since the popup is created dynamically by appending children to the body of my popup.html, I'm not sure how to pass the HTML for my popup to the new chrome tab.
I tried using chrome.tabs.create({url: chrome.extension.getURL('popup.html#window')});
as found at Open chrome extension in a new tab
but this doesn't seem to be working. Any suggestions?
I'm also developing a Chrome Extension that involves saving down a user's browser data.
Since each time an Extension opens a page (such as popup.html in your case) it opens a new instance of it, the pages and their relevant activity will be independent from each other.
In short you will have to implement some storage. The silver lining is it's pretty simple. Everything you need from manifest to example functions is here:
https://developer.chrome.com/extensions/storage
In your case what I'd imagine you'd want to do is this:
When you pass image urls to your popup page you also save them as items in an array in storage.
Then your pop up page can load in the array as the list to set downloading (or preview depending on use case).
Then either users can delete items from the array, or they are deleted programatically once downloaded.
I can't really be more specific without knowing exactly what your extension is trying to do or how it works, but hopefully that's enough to set you in the right direction.

How to build a Firefox addon to always show bookmark-stored-details (e.g. tags) for current tab

Problem
In Firefox, when the current tab contains a bookmarked page, I need to always see details stored in the corresponding bookmark (Name, Folder, Tags, etc.), without a single additional click.
I need help on how to solve this (seemingly solvable) problem.
Possible solutions:
Show bookmark details as text appended to the title bar
Show bookmark details through controls dynamically built on a dedicated toolbar
Technical questions
Is there an event fired when a bookmark [for the current tab] is changed? Can an addon respond to such an event?
Can an addon modify the text shown in the title bar for the current tab?
Can someone provide a link to the source code for a simple, ~modern, addon which adds a toolbar? I know / use S3 Download Statusbar but this one is quite advanced for my Firefox development skills.
Nice idea.
This is how to get the tags for a url.
var navBookmarksService = Components.classes["#mozilla.org/browser/nav-bookmarks-service;1"].getService(Components.interfaces.nsINavBookmarksService);
var urlToCheckIfBookmarked = 'https://www.bing.com/';
var uri = Services.io.newURI(urlToCheckIfBookmarked, null, null);
console.log(navBookmarksService.isBookmarked(uri)) //this line tells you if the url is bookmarked
var taggingSvc = Components.classes["#mozilla.org/browser/tagging-service;1"].getService(Components.interfaces.nsITaggingService);
var tags = taggingSvc.getTagsForURI(uri)
console.log(tags)
See the tagging service: https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsITaggingService
Is there an event fired when a bookmark [for the current tab] is changed? Can an addon respond to such an event?
yes you have to use bookmark observer service:
https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsINavBookmarksService#beginUpdateBatch%28%29
https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Bookmarks#Observing_changes_to_bookmarks_and_tags
Can an addon modify the text shown in the title bar for the current tab?
Yes. You can either change the title of the document loaded. Or get the DOMWindow and modify it's title attribute. IE: document.querySelector('#main-window').setAttribute('title','rawr')

Programatically open the URL in new tab in chromium browser using javascript

I have a web application where I have four/five icons in the default page. On click of these icons i am redirecting to some URL in new tab of already opened chromium browser instance using javascript. Below is the javascript code snippet that I am using to launch the URL in new tab of already opened chromium browser instance. Here I am manually clicking the icon
window.open(myURL, '_blank');
But the issue is when I am trying to open the same URL using the same code and programatically triggering the same code to open the URL in new tab, it opes up as a Pop Up but not in a tab. Below is how I am trying to pragmatically open the URL. I am calling the click event of the Icon in the default page using some script rather than manually clicking the icon.
$('#myIconId').click();
If somebody could please help me out. TIA
give a try to use
content of the anchor
Although You shouldn't force user to open new pages or new tab without showing them a hint on what is going to happen before they click on the link.
Above code may or may not work on all browser, please test before making live.
UPDATE
Ref : Programmatically open new pages on Tabs

Tabbed browsing, programmatically navigating to another open tab

I'm in a discussion with my co-worker. We have a web application in a tabbed browsing environment, say with 2 tabs open. Tab2 has a link to tab1, when I click the link, it opens tab1 in a new tab. We want to detect if tab 1 is already open, if so then set focus to tab1 (and not open a new window).
He has gotten this working in a broswer window environment, but says it is not possible in a tabbed environment.
Is it possible to for javascript to determine if tab1 is already open and then just set focus to that tab?
It is only possible if the webbrowser is already preconfigured to open links with a target in a new tab instead of new window and sets focus to it itself when you have given the links the same target name.
E.g.
link1
link2
link3
In other words: you're dependent on the client/webbrowser used. You have no control over it from the server side on.
In Firefox for example, the client should have checked both the Open new windows in new tab instead and When I open a link in a new tab, switch to it immediately options to get your requirement to work.
(as you see, the last one is disabled in mine)
You should instead create a separate document with a DOM-based tab, and iframes pointing to the real pages. Then you could easily set 'focus' to the correct tab when needed.

Categories

Resources