override new tab url only when the new tab url button is clicked

[Tanzim mahtab]

Hello, 

I am trying to build an extension that can override the URL with a specific URL, when a new tab is created. So, there may be two ways to create a new tab.

1. clicking the new tab button ( plus icon at the end of the tabs)

2. clicking a link that opens a new tab with that link

But I want to override the URL only when the new tab button is clicked. I found only one difference between this two ways, that is "pendingUrl"  property "onCreated" event. So currently, I am using this one in background,js :

const overrideURL = "https://www.xyz.com/";

chrome.tabs.onCreated.addListener(function (t) {

  if (t.pendingUrl === "chrome://newtab/") {

        // if from another link click, then pendingUrl = 'the link'

    chrome.tabs.update(undefined, { url: overrideURL });

  }

});

sometimes it doesn't work. Can anyone give a solution to determine how the new tab was opened?

[wOxxOm]

Specify the tab's id explicitly and add a fallback for `url`:

chrome.tabs.onCreated.addListener(t => {
  if ((t.pendingUrl || t.url) === 'chrome://newtab/') {
    chrome.tabs.update(t.id, {url: 'https://example.com'});
  }
});

[Jackie Han]

Just a reminder: Developer Program Policies say:

Extensions must use existing Chrome APIs for their designated use case. Use of any other method, for which an API exists, would be considered a violation. For example, overriding the Chrome New Tab Page through any means other than the URL Overrides API is not permitted.

 

--
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/47b180de-4e95-4551-bd07-be73e4d102dbn%40chromium.org.

[Jackie Han]

From a purely technical point of view (it is a violation of the program policies), Tanzim and wOxxOm's code doesn't work sometimes on my browser. I made a little improvement and it is very stable now.

chrome.tabs.onCreated.addListener(t => {
  if ((t.pendingUrl || t.url) === 'chrome://newtab/') {

    setTimeout(()=>chrome.tabs.update(t.id, {url: 'https://www.google.com'}), 300);
  }
});

[wOxxOm]

The CWS-compatible solution would be to use chrome_url_overrides and then redirect from your html page to the external site. It's a slower solution so the end user will be more likely to see flicker of the [blank] extension page. Another restriction is that your extension can't provide any other meaningful feature to the user due to the policy of "single purpose".

FWIW, my code always works for me, just like the original one. If it still doesn't work in some cases, the only explanation I see is a bug in Chrome because there's just nothing else to check.

[Jackie Han]

It may be a bug about a new tab created or time race condition. My workaround is adding a little delay time to avoid the bug.

chrome.tabs.onCreated.addListener(t => {
  console.log("TabCreated: " + t.pendingUrl)

  if ((t.pendingUrl || t.url) === 'chrome://newtab/') {

    // method-A:

    // chrome.tabs.update(t.id, {url: 'https://www.google.com'});

    // method-B:

    // setTimeout(()=>chrome.tabs.update(t.id, {url: 'https://www.google.com'}), 300);
  }
});

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if(changeInfo.url) {
    console.log("TabUpdated: " + changeInfo.url);
  }
});

When method-A runs and doesn't work, the output is

When method-B runs, the output is

[wOxxOm]

Yeah, there's an internal race condition so Chrome ignores chrome.tabs.update and keeps using the original navigation.

BTW, 300ms is not a little delay though, it's a super long delay, UX-wise.

[Jackie Han]

BTW, 300ms is not a little delay though, it's a super long delay, UX-wise.

I just did a test. You can set it to a smaller value :)

[wOxxOm]

I would be reluctant to use values bigger than 1 paint frame (16.6ms) to avoid the possible flicker in case the original page initialized quickly...

[Jackie Han]

I would be reluctant to use values bigger than 1 paint frame (16.6ms) to avoid the possible flicker 

Thinking about it, it is almost impossible to avoid flickering. Because the browser opens a tab first, then load/parse/render a page. There is a very short time between them. (I know, in this case, you mean it will flicker two times.)

For example, below is an empty new tab page. When you open a new tab, you will see a very quick flicker.

// manifest.json

"chrome_url_overrides" : {
  "newtab": "newtab.html"
}

// newtab.html is empty page, just set a different background color for observation

<head><style>

  body {
    background-color: red;
  }
</style></head>

To avoid flickering when opening a new tab,

1. Mitigating effect: set the background color to the same as the browser's (consider light and dark theme).

2. browser render a page in background for a very short time, then create a tab with this rendered page.

[wOxxOm]

FWIW, the Humble New Tab Page extension I'm using doesn't have *any* flicker at all because it uses an empty background script to keep its process in memory. It will flicker in ManifestV3 and many such extensions will have either to use the "persistent" hack or add a CSS transition to hide the flicker.

[Jackie Han]

I just tested the Humble New Tab Page. It has a flicker. You can't see it under the light theme, but you can see it under the dark theme.

The attachment is a screen record. You can play this video at a low playback rate.

[wOxxOm]

FWIW, it really doesn't flicker here at all, I've verified it by changing the background color to a value that's different to the theme's color. I've used a red color and tried both the light and dark OS mode, both light and dark theme for Chrome.

[Jackie Han]

I believe you. However, in my video, if you play it frame by frame, you will find that one frame in the middle is black. It may be the difference between the OS, or it may be that my laptop is slow and has less memory.

By the way, only waited for a few hours for the review, I published a new extension today to prove the simplest page(empty page) will also have a frame of flicker.

[wOxxOm]

Well, even one fullscreen frame of a vastly different color would be painfully evident, but I did make several screen recordings at 60 fps to verify there's no flicker here. My PC is quite average: a very old i7 CPU and an old nVidia 750 GPU, Windows 10.

[Jackie Han]

My machine is macOS + Chrome 104

• MacBook Air (Retina, 13-inch, 2018)
• Processor 1.6 GHz Dual-Core Intel Core i5
• Memory 16 GB 2133 MHz LPDDR3
• Graphics Intel UHD Graphics 617 1536 MB

[هادی اباذری‎]

در تاریخ دوشنبه 22 اوت 2022،‏ 17:04 Jackie Han <han.g...@gmail.com> نوشت:

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/CAAgdh1JGmzwVz-LkYa0-uARBv6GwZdkWn9tiD25%2BO7xQo5wEvA%40mail.gmail.com.