Chrome extension programmatic CSS injection error into active tab

Question

I want to inject a CSS file into the active tab when a certain condition is met. I managed to get it working only by adding "<all_urls>" permission to the manifest although in the docs it's written that "activeTab" should suffice: https://developer.chrome.com/extensions/activeTab#what-activeTab-allows

With the code below I'm getting

Cannot access contents of the page. Extension manifest must request permission to access the respective host.

while it works fine by replacing "activeTab" with "<all_urls>". Why is that?

manifest.json

...
"permissions": [
    "activeTab"
],

"content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["contentScript.js"]
    }
]

contentScript.js

...
chrome.runtime.sendMessage({injectCSS: true});

background.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.injectCSS) {
        chrome.tabs.insertCSS(null, {
            file: 'syle.css'
        });
    }
});

Answer 1

The activeTab permission gives an extension temporary access to the currently active tab when the user invokes the extension - for example by clicking its browser action. Access to the tab lasts while the user is on that page, and is revoked when the user navigates away or closes the tab.

This serves as an alternative for many uses of , but displays no warning message during installation

You have to invoke the extension for it to gain access to the tab when using activeTab.

https://developer.chrome.com/extensions/activeTab