Most of the API is generally available, and doesn't require a "tabs" permission. Most of this API is generally available as well.Ĭhrome.tabs which is described here, opens many options like creating a new tab, updating an existing tab, or reacting to various events about tabs. The more interesting, is the use of chrome.tabs. What we do here, we simply check if blocked and enabled are of a correct format, and if not, we reset them. Some APIs are generally available in extensions, like ntime.Ĭ calls a given callback any time the extension is installed or updated. And list of all possible permissions here.Īs we can see, not every API requires a permission. Now when we have the Options page ready, which can set blocked (array of websites to block) and enabled (boolean if blocking should be applied or not), it is time to work with these in the background.Ĭreate background.js and give it this content:Īt the top we can see ntime being used. The most common methods across these storages are get, set, and remove. The most commonly used storage out of these three is. which is like read-only area for administrator purposes only.that supports to store and synchronize (although very limited in size) the data across other computers where the extension is installed and same Google Account is used.that is best for storing the data locally.The main benefit comes from it being asynchronous and having an onChanged listener that can be used to synchronize the UI or otherwise react to changes in data. It turns out, "storage" gives us access one step further, to chrome.storage which is documented here.Ĭhrome.storage is similar to localStorage, in terms of its API and storage limitations. Using "storage" made available, but what is it actually? And is that all? When the page is loaded, we read blocked and enabled, and set the UI accordingly. When we click on #checkbox, we save the boolean under the key enabled, to tell if the blocking should be enabled or not. More about background scripts here.Ĭreate options.html and give it a simple markup like this: That means, when not needed, the script is unloaded from memory. As you can see, the background is set to be no persistent. It's also a good place to put any heavy calculation that could slow down the UI. Because Chrome extensions are event-based, background script is a good place to put event-based scripts, especially if they don't require an UI (like blocking the websites). In our case, it will be a place where we put the main logic to stop the blocked websites from opening. "background" sets the script to be run in the background. Based on the requested permissions, Chrome may display a warning as explained here.
Permissions are requested by the extension when installing. It can be requesting API access as in our case, or also a match pattern. "permissions" lists permissions needed by the extension. In our case, we will use this page to set a list of websites to block, and also to easily enable/disable the blocking.
"options_page" is a page to open when you right-click the extension in the toolbar, and select Options from the menu.
Any other fields besides "manifest_version", "name" and "version", are optional and we add them as needed. The structure of this file is explained here. Let's now create the extension Block Site.Įnter fullscreen mode Exit fullscreen mode "tabs" API will be needed to get the tab url we are trying to open, and based on whether the domain is on the blocked list or not, we close the tab instantly, or let it proceed. "storage" API will be needed to store the websites user wants to block the access to, to boost his productivity, and it will also be used to store an option to quickly disable or enable the blocking at any given moment. To open Options, generally you right-click on the extension icon in the toolbar and choose Options from the menu. Options refers to "options_page" which the extension can have. Block Site is by default disabled and doesn't block any website until you say so in Options.
JS BLOCKER FULL
the full list of APIs available to Chrome extensions is here.the APIs you will learn in this tutorial are called "storage" and "tabs".
JS BLOCKER HOW TO
This article will explain you how to use the most useful Chrome APIs by creating a simple Chrome extension called Block Site.
0 kommentar(er)
