Three Important Contexts in Web Extension

In this article, we will see the 3 important contexts in web extensions. The Web Extension is an interface and a function for a browser. It is made using web technologies like HTML, CSS, Javascript, and web extension APIs. Web extension can be made with three important contexts, which are:

Background Scripts
Content Script
Popup Scripts

We will understand each of the concepts sequentially, along with their basic implementation.

Background Scripts: Background Scripts allow you to do something more than manipulate a web page. It is of 2 types:

Persistent: This loads when the extension starts and gets unloaded when the extension is disabled or uninstalled.
Non-Persistent: This loads only when it is needed to respond to an event and gets unloaded when gets free.

Background Scripts can be loaded using the background field in the manifest file which loads this script to the browser. For eg:

"background": {
    "scripts": ["background-script.js",...],
}

where scripts is the Array of javascript files.

Content Script: The content script is similar to the script running under the hood of the web page. It runs in the context of a web page and unlike background script it can access the DOM API. It also has access to some extension API and can communicate the background script. Content Scripts can be loaded using the content_scripts field in the manifest file which loads this script to the particular URL. For eg:

"content_scripts": [{
    "matches": ["url",...],
    "js": ["sontent-script.js",...]
}]

where.

matches: The path to which the script should be loaded.
js: An array of javascript files

Popup Scripts: This is a different context which is the combination of HTML, CSS, and JS that can access web extension API and also can communicate with another context through the messaging systems. The popup is displayed when the user presses on the icon over the top portion of the browser. Popup Scripts can be loaded using the browser_action field in the manifest file. For eg:

"browser_action": {
    "default_icon": "icons path",
    "default_title": "title",
    "default_popup": "path to html file"
 }

We need to provide the path to the HTML file which needs to be loaded as a popup and within this file, we design the looks of the popup.

Example 1: In this example, we will create a simple popup that displays “Hello World” on the click of the extension icon. The default popup is named app.htm.

Approach: The following steps will help to execute the example in the system:

Create a manifest.json file and paste the below code
Create an app.html file in the same folder as that of manifest and paste the below HTML code into the same folder
Load the manifest using the browser extension tools following the browser extension.
Click on the extension icon to see the output

Please refer to the Building a Basic Chrome Extension article for a detailed description.

Here, we will be using Mozilla firefox to load the extension. The following steps will need to perform in order to load the extension:

Open Mozilla Firefox.
Type about: debugging on the address bar.
Click on This Firefox on the left sidebar.
Click on load temporary extension.
Select the manifest file that you created.
Click on the extension icon as shown below.

We can perform similar tasks in another browser as well.

manifest.json:

{
   "name":"Hello World",
   "version":"1.0.0",
   "browser_action":{
       "browser_style": true,
       "default_title": "Hello World",
       "default_popup":"app.htm"
   },
   "manifest_version": 2,  
}

app.html:

HTML

<!DOCTYPE html> 

<html lang="en"> 

<head> 

    <meta charset="UTF-8"> 

    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 

    <meta name="viewport" content= 

        "width=device-width, initial-scale=1.0"> 

    <title>Web Extension</title> 

</head> 

<body> 

    <h1 style="color:green; padding:10px;"> 

        GeekForGeeks 

    </h1> 

    <h3 style="color:green; padding:10px;"> 

        Three important contexts in web extension 

    </h3> 

    <h1 style="padding:10px; color:blue"> 

        HELLO WORLD 

    </h1> 

</body> 

</html>

Output:

Example 2: In this example, we will color the background of all the web pages we search with our browser yellow using the content script in the extension so that when we open any web page, we will find the background appearing YELLOW in color.

Approach: The following steps will help to execute the example in the system:

Create a manifest.json file and paste the below code
Create an app.js file in the same folder as that of manifest and paste the below JS code into the same folder
Load the manifest using the browser extension tools following the browser extension.
Search the browser for some web page to see it appearing yellow in color

Here, we will be using Mozilla firefox to load the extension. The following steps will need to perform in order to load the extension:

Open Mozilla Firefox
Type about: debugging on the address bar
Click on This Firefox on the left sidebar
Click on load temporary extension
Select the manifest file that you created
Search the browser, as shown below

manifest.json:

{
   "name":"Yellow-Color",
   "version":"1.0.0",
   "manifest_version": 2,
     "content_scripts": [
       {
         "matches": ["<all_urls>","*://*/*"],
         "js": ["app.js"]
       }
     ]
}

app.js:

document.body.style.background = "yellow";

where, the app.js is the content script & it contains only a single line of code coloring the background of the page yellow.

Output: From the output, we can observe that the background of the web page is yellow in color due to the extension.

Article Tags :

JavaScript

Web Technologies

JavaScript-Questions