极客教程Web扩展中的三个重要上下文
在本文中，我们将了解Web扩展中的三个重要上下文。Web扩展是浏览器的接口和功能。它使用诸如HTML、CSS、Javascript和Web扩展API的Web技术制作而成。Web扩展可以有三个重要的上下文：
- 背景脚本
- 内容脚本
- 弹出脚本
我们将顺序了解每个概念，以及它们的基本实现。
背景脚本： 背景脚本允许你做一些超出操纵网页的事情。它有两种类型：
- 持久型： 在扩展启动时加载，并在扩展被禁用或卸载时卸载。
- 非持久型： 只在需要响应事件时加载，并在空闲时卸载。
可以使用清单文件中的 background 字段来加载背景脚本到浏览器。例如：
"background": {
"scripts": ["background-script.js",...],
}
在这里， scripts 是javascript文件的数组。
内容脚本： 内容脚本类似于运行在网络页面底层的脚本。它运行在网络页面的上下文中，与后台脚本不同，它可以访问DOM API。它还可以访问某些扩展API并与后台脚本进行通信。内容脚本可以使用清单文件中的 content_scripts 字段加载，并将此脚本加载到特定URL中。例如：
"content_scripts": [{
"matches": ["url",...],
"js": ["sontent-script.js",...]
}]
在哪？
- 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"
}
我们需要提供要加载为弹出窗口的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,
}
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>
输出:
示例 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"]
}
]
}
app.js：
document.body.style.background = "yellow";
在这里， app.js 是内容脚本，它只包含一行代码，将页面的背景颜色设为黄色。
输出： 从输出结果中，我们可以观察到由于扩展程序的存在，网页的背景颜色是黄色的。
