当前位置：极客教程 > JavaScript > JavaScript 精品文章 > Web扩展中的三个重要上下文

Web扩展中的三个重要上下文

Web扩展中的三个重要上下文

在本文中，我们将了解Web扩展中的三个重要上下文。Web扩展是浏览器的接口和功能。它使用诸如HTML、CSS、Javascript和Web扩展API的Web技术制作而成。Web扩展可以有三个重要的上下文：

  • 背景脚本
  • 内容脚本
  • 弹出脚本

我们将顺序了解每个概念，以及它们的基本实现。

背景脚本： 背景脚本允许你做一些超出操纵网页的事情。它有两种类型：

  • 持久型： 在扩展启动时加载，并在扩展被禁用或卸载时卸载。
  • 非持久型： 只在需要响应事件时加载，并在空闲时卸载。

可以使用清单文件中的 background 字段来加载背景脚本到浏览器。例如：

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

在这里， scripts 是javascript文件的数组。

内容脚本： 内容脚本类似于运行在网络页面底层的脚本。它运行在网络页面的上下文中，与后台脚本不同，它可以访问DOM API。它还可以访问某些扩展API并与后台脚本进行通信。内容脚本可以使用清单文件中的 content_scripts 字段加载，并将此脚本加载到特定URL中。例如：

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

在哪？

  • matches： 应加载脚本的路径。
  • js： 一组JavaScript文件

    弹出脚本： 这是一个不同的上下文，它是HTML、CSS和JS的组合，可以访问web扩展API，并且还可以通过消息系统与另一个上下文进行通信。当用户在浏览器顶部的图标上按下时，弹出窗口会显示出来。可以使用清单文件中的 browser_action 字段加载弹出脚本。例如：

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

我们需要提供要加载为弹出窗口的HTML文件的路径，在这个文件中，我们设计弹出窗口的外观。

示例 1： 在这个示例中，我们将创建一个简单的弹出窗口，点击扩展图标时显示 “Hello World” 。默认弹出窗口的文件名为 app.htm 。

步骤： 以下步骤将帮助在系统中执行这个示例：

  • 创建一个 manifest.json 文件并粘贴下面的代码
  • 在与manifest文件相同的文件夹中创建一个 app.html 文件，并将下面的HTML代码粘贴到同一个文件夹中
  • 使用浏览器扩展工具加载manifest
  • 点击扩展图标查看输出

请参考 构建基本的Chrome扩展 文章中的详细描述。

在这里，我们将使用 Mozilla Firefox 加载扩展。为了加载扩展，需要执行以下步骤：

  • 打开Mozilla Firefox
  • 在地址栏中输入 about:debugging
  • 点击左边栏的 This Firefox
  • 点击加载临时扩展
  • 选择您创建的manifest文件
  • 点击如下图所示的扩展图标

我们也可以在其他浏览器中执行类似的任务。

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,  
}
JavaScript

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>
JavaScript

输出:

Web扩展中的三个重要上下文

示例 2： 在这个示例中，我们将使用浏览器的内容脚本将我们搜索的所有网页的背景色设置为黄色，以便当我们打开任何网页时，我们会发现背景色是黄色的。

方法： 下面的步骤将帮助在系统中执行示例：

  • 创建一个 manifest.json 文件，并将下面的代码粘贴进去
  • 在与manifest相同的文件夹中创建一个 app.js 文件，并将下面的JS代码粘贴进去
  • 使用浏览器扩展工具加载manifest文件
  • 在浏览器中搜索某个网页，以看到它呈现为黄色

这里，我们将使用 Mozilla firefox 来加载扩展程序。为了加载扩展程序，您需要执行以下步骤：

  • 打开Mozilla Firefox
  • 在地址栏中输入 about: debugging
  • 点击左侧边栏的 This Firefox
  • 点击加载临时扩展程序
  • 选择您创建的manifest文件
  • 搜索浏览器，如下所示

manifest.json：

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

app.js：

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

在这里， app.js 是内容脚本，它只包含一行代码，将页面的背景颜色设为黄色。

输出： 从输出结果中，我们可以观察到由于扩展程序的存在，网页的背景颜色是黄色的。

Web扩展中的三个重要上下文

Python教程

Python 教程

Python 教程
Tkinter 教程

Tkinter 教程
Pandas 教程

Pandas 教程
NumPy 教程

NumPy 教程
Flask 教程

Flask 教程
Django 教程

Django 教程
PySpark 教程

PySpark 教程
wxPython 教程

wxPython 教程
SymPy 教程

SymPy 教程
Seaborn 教程

Seaborn 教程
SciPy 教程

SciPy 教程
RxPY 教程

RxPY 教程
Pycharm 教程

Pycharm 教程
Pygame 教程

Pygame 教程
PyGTK 教程

PyGTK 教程
PyQt 教程

PyQt 教程
PyQt5 教程

PyQt5 教程
PyTorch 教程

PyTorch 教程
Matplotlib 教程

Matplotlib 教程
Web2py 教程

Web2py 教程
BeautifulSoup 教程

BeautifulSoup 教程

Java教程

Java 教程

Java 教程

Web教程

HTML 教程

HTML 教程
CSS 教程

CSS 教程
CSS3 教程

CSS3 教程
jQuery 教程

jQuery 教程
Ajax 教程

Ajax 教程
AngularJS 教程

AngularJS 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程
Laravel 教程

Laravel 教程
Next.js 教程

Next.js 教程
PhantomJS 教程

PhantomJS 教程
Three.js 教程

Three.js 教程
Underscore.JS 教程

Underscore.JS 教程
WebGL 教程

WebGL 教程
WebRTC 教程

WebRTC 教程
VueJS 教程

VueJS 教程

数据库教程

SQL 教程

SQL 教程
MySQL 教程

MySQL 教程
MongoDB 教程

MongoDB 教程
PostgreSQL 教程

PostgreSQL 教程
SQLite 教程

SQLite 教程
Redis 教程

Redis 教程
MariaDB 教程

MariaDB 教程

图形图像教程

Vulkan 教程

Vulkan 教程
OpenCV 教程

OpenCV 教程

大数据教程

R语言 教程

R语言 教程

开发工具教程

Git 教程

Git 教程
VSCode 教程

VSCode 教程
Docker 教程

Docker 教程
Gerrit 教程

Gerrit 教程
Excel 教程

Excel 教程

计算机教程

Go语言 教程

Go语言 教程
C++ 教程

C++ 教程

JavaScript 精品教程

登录

找回密码？

注册