Focus on override newtab's search

[Adeel Faridi]

I am building a chrome extension that overrides the default new tab. I have a search input field on this new tab page that I want to focus this field on when a user opens a new tab. I have seen many answers, but none of them is satisfactory since they all have some URLs on the address bar. This extension Ocean Hero has managed to achieve this neat and clean. One thing I notice with this extension is when we open a new tab, initially, the focus is on the address bar then after a blink, it goes to the below searchfield.

if you look into their background.js minified version. I found out that this piece of code is doing this thing.

self.addEventListener("fetch", function (t) {
    var e = t.request.url;
    e.startsWith(location.origin + "/index.html") &&
        !e.match("focus") &&
        ((O = !0),
        setTimeout(function () {
            O = !1;
        }, 50));
});

function l(t, e) {
    return new Promise(function (r) {
        return s("tabs")
            ? chrome.tabs.update(t, e, function () {
                    return r(null);
              })
            : r(null);
    });
}

function o(t, e) {
    (null == e || e > t.length) && (e = t.length);
    for (var r = 0, n = new Array(e); r < e; r++) n[r] = t[r];
    return n;
}

function d() {
    var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : null;
    if (s("storage"))
        return new Promise(function (e) {
            return chrome.storage.local.get(t, e);
        });
    var e = t || Object.keys(localStorage);
    return Promise.resolve(
        e.reduce(function (t, e) {
            return o(o({}, t), {}, i({}, e, u.a.getItem(e)));
        }, {}),
    );
}

function s(t) {
    return function () {
        var e = this,
            r = arguments;
        return new Promise(function (n, o) {
            function i(t) {
                c(a, n, o, i, u, "next", t);
            }
            function u(t) {
                c(a, n, o, i, u, "throw", t);
            }
            var a = t.apply(e, r);
            i(void 0);
        });
    };
}

function c(t, e, r, n, o, i, u) {
    try {
        var a = t[i](u),
            c = a.value;
    } catch (t) {
        return void r(t);
    }
    a.done ? e(c) : Promise.resolve(c).then(n, o);
}

chrome.tabs.onCreated.addListener(function (t) {
    O &&
        (console.log("onCreated"),
        (function (t) {
            if (P.includes(t.id)) return null;
            s(function* () {
                if (void 0 === l) {
                    var t,
                        e = yield Object(d.f)(["search"]);
                    l = null === (t = e.search) || void 0 === t ? void 0 : t.isAutofocus;
                }
            })(),
                l &&
                    chrome.tabs.create(
                        {
                            url: "".concat(
                                "chrome-extension://".concat(chrome.runtime.id, "/index.html"),
                                "?focus=true",
                            ),
                            active: !0,
                        },
                        function (e) {
                            P.unshift(e.id),
                                P.splice(100),
                                chrome.tabs.remove(t.id),
                                chrome.tabs.update(e.id, {
                                    url: "chrome://newtab/",
                                });
                        },
                    );
        })(t));
    O = !1
});

[Uladzimir Yankovich]

Yes, I've seen their solution, too.

Colleagues, any thoughts on legality?)

[wOxxOm]

It simply creates a new tab with index.html at the same index and then closes the start tab. The whole browser blinks though, which to me makes it completely unusable, but I don't think it's something forbidden for if the users don't think it ugly then let them be happy. Maybe you could add a fade-in CSS transition so hide the glitch, just like the built-in Chrome's start page does to hide its slowness.

[Mike-O]

Forgive my ignorance, but how is this any different than just doing the tab intercept to throw open your extension's tab instead (well-documented on the web), and then using the standard HTML autofocus attribute on the search field? https://www.w3schools.com/tags/att_input_autofocus.asp

[hrg...@gmail.com]

The New Tab Page doesn't have focus when it's opened (the focus is in the address bar). Therefore, trying to focus any element in the page has no visible effect until the user changes the focus to the page.

This is why you need that ugly trick, i.e. open a regular page instead in order to avoid the lack of focus of the New Tab Page.

[Adeel Faridi]

For me it's not working. It works for first time as O is true initially but when it gets false, it is not getting updated. On more thing, whenever Im opening a new link by clicking on link it almost every time open the new tab page with focused on search field. (I don't have tabs permission so I can not check url but ocean heroes doesn't have either but it works for them as well ).

One more thing,  for them self.addEventListener("fetch") triggers after onCreated event but it's not getting triggered in my background.js.

I really need this to be done. Anyone who would like to come over zoom or meet and help me out with this.  I respect people's time. So I'll pay for the time like $100.

[Adeel Faridi]

and if create a tab in chrome.tabs.onCreated, what is happening is it is getting triggered for every tab that is open. lets say 2 new tabs are open and I want to open a new one. it will create 2 tabs because that event will trigger the functionality in both tabs.

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/83a248fc-681c-4640-b5c9-047d4d88b7ban%40chromium.org.

[wOxxOm]

A slightly better workaround with less flicker is to redirect to self like this:

if (!location.search) {
  location.search = '?focus';
} else {

// your entire script here

// .............

}

[Jackie Han]

Great, it works and it is very simple.

@Adeel as you said, you should pay wOxxOm $100.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/73937775-759c-4af4-83c2-f53551bb27ean%40chromium.org.

[wOxxOm]

:-) it's an old trick from 2012

[Uladzimir Yankovich]

if (!location.search) {
  location.search = '?focus';
} else {

// your entire script here

// .............

}

wOxxOm, thank you for your solution! Unfortunately, this code results in a link to the extension page in the browser address bar, something like chrome-extension://extension-id/newtab.html?focus

Is there any way to avoid this?

[wOxxOm]

There's no way. The proper solution is to implement in an extension API or allow the user customize the focus somehow e.g. in the extension's options.

[wOxxOm]

I mean it'd be great if the browser implements it as an API or an option.

[Uladzimir Yankovich]

wOxxOm, thank you. Yes, I agree with you. But Google will never go for that. I'm already silent about the horrible warning window they show the user after installing extensions that change the new tab.

Ok, then we'll have to use the solution of the guys from OceanHero :) 

[wOxxOm]

They occasionally relent e.g. new Chrome doesn't show any warnings for a newtab replacement extension in case it doesn't define any extra keys in manifest.json. They also implemented an option to show full URLs in the address bar after a while.