As we could see the heart of a web extension is the manifest.json file which contains every configuration including the permissions that the user needs to give to our web extension in order for it to function properly
Checking the generated manifest
So if I scroll down in the generated manifest.json in the wxt output I see that it asks for two permissions tabs and scripting
These permissions give your extension access to browser features
If I open the developer reference for Chrome extensions I can see the list of all available permissions which there are plenty
Of course we will not go through each and every one of them but I think it’s very important to mention a couple which are most frequently used when developing your very own web extension
Common permissions
The storage permission is used to save or retrieve data locally or if the user is signed into their Chrome profile it also syncs across devices
The tabs queries and manipulates browser tabs while there is another one called activeTab which accesses the current tab when the user invokes the extension
This is by far the safest
However the activeTab is not enough in most cases because the user would need to initiate an interaction such as clicking on the popup
And in our extension we want to change the icon on tab changes
The next one is contextMenus which enables the extension to add items to the right-click menu
Bookmarks which gives access to read and modify bookmarks
Notifications which I’m sure you have seen before when websites ask you to allow notifications
Cookies which might be useful if you want to read or write cookies globally
History which gives you access to the browser history
Or webRequest which is useful if you want to intercept network requests
However there is a bunch of other permissions so I’m not going through each and every one of them
As I showed you you can read the reference online at Chrome’s permission reference
Host permissions
If I come back to our manifest file I see another permission section which is called host permissions
This basically tells our extension that which pages can it access with the permissions
The other part with permissions is the host permissions which basically lists the URLs with which our extension can interact with
Not every permission requires this additional setting but I believe scripting does
You can read more about it in the declare permission section of the documentation
But basically it says that host permissions allow extensions to interact with the URLs matching patterns
Some Chrome APIs require host permissions in addition to their own API permissions
For example to make fetch requests the chrome.tabs API which we already used so because of that we need to include the host permissions
Or chrome.webRequest chrome.cookies
As you can see this is an array so I can actually add multiple items such as this
"host_permissions": [
"https://github.com/*",
"https://stackoverflow.com/*"
]Or I can use wildcard characters which is the asterisk for example which will allow everything with HTTPS
"host_permissions": [
"https://*/*"
]This wildcard one is the most recommended
However there is a last option called all URLs
"host_permissions": [
"<all_urls>"
]And what’s the difference between this and the previous is that there are some specific pages such as Chrome’s settings pages which if you remember chrome://extensions or files for example they do not follow the HTTPS protocol
So if you use all URLs then your extension will be able to run on these pages as well and interact with them
WXT handles this automatically
We do not have to specify the host permissions here because when we’re working with WXT framework it will automatically inject them into the manifest.json file
When you create a content script that targets certain URLs WXT updates the manifest automatically
Keep permissions minimal
And before we wrap up this chapter I just have one last advice
Keep the permissions to the minimum
It has two reasons
One it will make your approval process so much faster when you’re submitting your extension to the Chrome web store
And two if you’re only asking for permissions that are truly needed for your functionality it will make your app look more trustworthy and your end users will be more likely to download it
Chrome translates permissions into plain language
Users don’t see “tabs permission”
They see “Read your browsing history”
Keep this in mind when choosing permissions
What’s next
You understand permissions and the manifest file
Now let’s build the actual interface for our extension
We’ll create a note-taking popup that users can interact with