Chrome extension: How to inject HTML into any tab w/o using <all_urls>

Question

I am trying to inject a content script to the current tab of the user once the timer is done. Thus, my manifest is:

"content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["jquery-3.5.1.min.js", "flipclock-min.js", "content.js"],
    "css": ["normalize.min.css", "styles2.css", "flipclock.css", "css.css"]
}]

According to web store publishing process:

• Broad Host Permissions

Instead of requesting broad host permissions, consider using the activeTab permission, or specify the sites that your extension needs access to. Both options are more secure than allowing full access to an indeterminate number of sites, and they may help to minimise review times.

The activeTab permission allows access to a tab in response to an explicit user gesture.

{
...
"permissions": ["activeTab"]
}

It makes sense for me to use activeTab instead. However, as they mentioned, I can use it in permission not content_scripts or else I would get:

Invalid value for 'content_scripts[0].matches[1]': Missing scheme separator.

How should I go about this?

Answer 1

activeTab won't work on timer fully automatically because it needs an explicit user action: the user must click your extension icon (or interact via a commands API hotkey, a contextMenus API menu, or an omnibox API keyword, more info in the documentation) to start or set the timer.

Through such user action activeTab will grant access to the current tab so your background script can use chrome.tabs.executeScript to inject the scripts (use one call per each script).

And, remove content_scripts in manifest.json.