用于显示目前在 Linux 系统上的文件系统磁盘使用情况统计

Linux命令df


在这篇文章中将学习给浏览器添加通知推送事件，如下视频：

<video
  src="https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/notification_qlwotx.webm"
  autoPlay
/>

## 添加通知推送

[Browser notifications](https://web.dev/push-notifications-overview/)类似于手机上的消息通知。

添加权限

```json
{
  "permissions": ["notifications"]
}
```

修改`src/App.jsx`

```jsx
export function App() {
  const createNotification = () => {
    chrome.notifications.create({
      type: 'basic',
      iconUrl: 'icons/icon-48.png',
      title: 'Hi there 👋',
      message: 'Just a reminder that you rock!',
      buttons: [{title: 'I know ☺️'}],
      priority: 0
    })
  }

  return (
    <div className="flex flex-col items-center justify-center w-screen h-auto bg-indigo-400 p-4">
      <button
        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 text-2xl px-4 rounded"
        onClick={createNotification}
      >
        Surprise me 🎉
      </button>
    </div>
  )
}
```

`chrome.notifications`创建浏览器通知

![ACK4uA](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/ACK4uA.jpg)

## Source Code

[【Source Code】](https://github.com/rebelchris/popup-extension/tree/weather)


基于react、tailwindcss开发自己的chrome插件

Chrome插件开发 - Adding browser notifications


PostgreSQL 中的自连接是一种连接方式，可以让您将表连接到自身。当您有一个包含层次数据的表时，这很有用，比如员工表包含一个参考员工经理的 manager_id 列。

要执行自连接，首先在 SELECT 语句的 FROM 子句中指定要连接到自身的表。然后，您可以给表分配两个不同的别名，比如 a 和 b，以区分连接条件中的两个表实例。

例如，假设您有一个 employee 表，具有以下列： id、name 和 manager_id。要获取所有员工及其经理的列表，可以使用以下自连接查询：

```sql
SELECT a.name AS employee_name, b.name AS manager_name
FROM employee a
JOIN employee b ON a.manager_id = b.id
```

该查询将返回两列的结果集：employee_name 和 manager_name。结果集中的每一行都包含一个员工的姓名和他们的经理的姓名。

自连接可以非常强大，因为它可以轻松地在数据库中处理层次数据。但是，它们也可能很难编写和理解，因此在使用自连接查询前，要仔细考虑是否自连接是问题的最佳解决方案。


PostgreSQL 中的自连接是一种连接方式，可以让您将表连接到自身

Postgresql - SELF JOIN


在前一篇文章介绍了[Adding browser notification](/blog/translate/build-chrome-extenstions/adding-browser-notification)，这篇将学习如何创建重复的通知。

## 创建重复通知

为了实现重复通知，我们必须利用[alarm api](https://developer.chrome.com/docs/extensions/reference/alarms/)。这允许我们创建可以在指定时间发起通知。

首先更新`manifest.json`，以便获取使用`alarm`权限

```json
{
  "permissions": ["alarm", "notifications"]
}
```

定时发起通知需要后台运行的服务，在 v3 manifest，可以注册一个后台服务

```json
{
  "background": {
    "service_worker": "background.js"
  }
}
```

然后修改`App.jsx`

```jsx
export function App() {
  const createNotification = () => {
    chrome.alarms.create({
      periodInMinutes: 1
    })
    window.close()
  }

  const stopNotification = () => {
    chrome.alarms.clearAll()
    window.close()
  }
  return (
    <div className="flex flex-col items-center justify-center w-screen h-auto bg-indigo-400 p-4">
      <button
        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 text-2xl px-4 rounded"
        onClick={createNotification}
      >
        Motivate me 🎉
      </button>
      <br />
      <button
        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 text-2xl px-4 rounded"
        onClick={stopNotification}
      >
        Stop motivating me 😅
      </button>
    </div>
  )
}
```

修改`background.js`

```js
chrome.alarms.onAlarm.addListener(() => {
  chrome.notifications.create({
    type: 'basic',
    iconUrl: 'icons/icon-48.png',
    title: 'Hi there 👋',
    message: 'Just a reminder that you rock!',
    buttons: [{title: 'I know ☺️'}],
    priority: 0
  })
})
```

## Source Code

[【Source Code】](https://github.com/rebelchris/popup-extension/tree/weather)


Chrome插件开发 - Repeating notifications


Background（背景）在 CSS 中是指应用于元素的背景图像、颜色、位置和重复方式。在 CSS 中，可以使用 background 属性设置元素的背景。

以下是一些 background 属性的详细解释：

- background-color：设置元素的背景颜色。可以使用颜色名称、十六进制、RGB 或 HSL 值来设置。
- background-image：设置元素的背景图像。可以使用 URL 或者 CSS 渐变来设置。
- background-repeat：设置元素背景图像的重复方式。有四种选项：repeat（水平和垂直方向都重复）、repeat-x（水平方向重复）、repeat-y（垂直方向重复）和 no-repeat（不重复）。
- background-position：设置元素背景图像的位置。可以使用像素、百分比、关键字（如 top、bottom、left、right、center）或者两个值（第一个值为水平位置，第二个值为垂直位置）来设置。
- background-attachment：设置元素背景图像的滚动方式。有两种选项：scroll（背景图像会随着元素滚动）和 fixed（背景图像固定在视口中，不随元素滚动）。
- background-size：设置元素背景图像的大小。可以使用像素、百分比或关键字（如 cover 或 contain）来设置。
- background-origin：指定背景图像的原点位置。有三种选项：padding-box（背景图像从内边距区域开始），border-box（背景图像从边框区域开始）和 content-box（背景图像从内容区域开始）。
- background-clip：指定背景图像的剪裁方式。有三种选项：padding-box（背景图像从内边距区域开始），border-box（背景图像从边框区域开始）和 content-box（背景图像从内容区域开始）。

通过灵活使用这些 background 属性，可以轻松地设置元素的背景，并创建出各种不同的视觉效果。


css - Backgrounds


- [插件介绍](/blog/translate/build-chrome-extensions/intro)
- [第一个插件](/blog/translate/build-chrome-extensions/first-extension)
- [第一个主题](/blog/translate/build-chrome-extensions/first-theme)
- [新标签](/blog/translate/build-chrome-extensions/new-tab)
- [使用 React 开发扩展](/blog/translate/build-chrome-extensions/spicing-with-react)
- [Switch to vite](/blog/translate/build-chrome-extensions/parcel-to-vite)
- [Popup extension](/blog/translate/build-chrome-extensions/popup-extension)
- [集成 tailwind](/blog/translate/build-chrome-extensions/add-tailwind)
- [External request](/blog/translate/build-chrome-extensions/external-requests-new-tab)
- [Popup weather extension](/blog/translate/build-chrome-extensions/popup-weather-extension)
- [Adding browser notifications](/blog/translate/build-chrome-extensions/adding-browser-notification)
- [Repeating notifications](/blog/translate/build-chrome-extensions/repeating-notifications)
- [Using storage](/blog/translate/build-chrome-extensions/using-storage)
- [Hooking into installs](/blog/translate/build-chrome-extensions/hooking-into-installs)
- [Custom options page](/blog/translate/build-chrome-extensions/custom-options-page)
- [Icon action](/blog/translate/build-chrome-extensions/icon-action)
- [Popup page modifications](/blog/translate/build-chrome-extensions/Popup-page-modifications)
- [Messaging](/blog/translate/build-chrome-extensions/messaging)
- [Modify images on the page](/blog/translate/build-chrome-extensions/modify-images-on-the-page)
- [Creating the turboreader extension](/blog/translate/build-chrome-extensions/creating-the-turboreader-extension)
- [Publishing a chrome browser extension](/blog/translate/build-chrome-extensions/publishing-a-chrome-browser-extension)


Chrome插件开发 - Series


所有的代码都是在执行上下文中执行的，执行上下文是一个抽象的概念，它是一种规范，用来定义变量或函数有权访问的其他数据，决定它们的各自行为。

在深入研究前，需要了解一些概念：

- 编译器：负责语法分析和代码生成
- JavaScript 引擎：负责执行代码
- 函数声明：指的是使用 function 关键字声明的函数
- 函数表达式：指的是使用 var 关键字声明的函数

## JavaScript 是如何被执行的

JavaScript 代码在执行之前，会经历三个阶段：

- 词法分析（Lexical Analysis）
- 语法分析（Syntactic Analysis）
- 代码生成（Code Generation）

词法分析阶段，会将代码分解成一个个词法单元，比如 var、function、if、else、for、while 等等。

语法分析阶段，会将词法单元转换成一个个语法单元，比如 var a = 1，会被转换成一个个词法单元，然后再转换成一个个语法单元，比如 var、a、=、1。

代码生成阶段，会将语法单元转换成可执行的代码，比如 var a = 1，会被转换成一个个语法单元，然后再转换成可执行的代码，比如 var a = 1。

## JavaScript 中的执行上下文

JavaScript 中的执行上下文是一个抽象的概念，它是一种规范，用来定义变量或函数有权访问的其他数据，决定它们的各自行为。

执行上下文分为三种：

- 全局执行上下文
- 函数执行上下文
- eval 函数执行上下文

### 全局执行上下文

全局执行上下文是默认的执行上下文，它会在 JavaScript 代码执行之前被创建，它会被放到执行上下文栈中，当 JavaScript 代码执行完毕后，它会被从执行上下文栈中移除。

全局执行上下文包含三个部分：

- 变量对象（Variable Object，VO）
- 作用域链（Scope Chain）
- this

#### 变量对象

变量对象是与执行上下文相关的数据作用域，存储了在上下文中定义的变量和函数声明。

变量对象包含两个部分：

- 函数的所有形参（如果是函数上下文）
- 函数声明
- 变量声明

变量对象的创建过程：

- 创建一个 VO
- 将所有形参，变量和函数声明添加到 VO 中
- 将 VO 赋值给活动对象（AO）

#### 作用域链

作用域链是一个指向变量对象的指针列表，它只引用但不实际包含变量对象。

作用域链的创建过程：

- 创建一个作用域链
- 将当前执行上下文的变量对象添加到作用域链中
- 将父级执行上下文的变量对象添加到作用域链中
- 将父级的父级执行上下文的变量对象添加到作用域链中
- 依次类推，直到全局执行上下文的变量对象添加到作用域链中

#### this

this 是一个指针，指向函数执行时所在的作用域。

[this 的指向](/blog/javascript/advance/this指向)

### 函数执行上下文

函数执行上下文是在函数被调用时被创建，它会被放到执行上下文栈中，当函数执行完毕后，它会被从执行上下文栈中移除。

## JavaScript 中的提升

JavaScript 中的提升是指变量和函数的声明会被提升到当前作用域的顶部。

### 变量提升

变量提升是指变量的声明会被提升到当前作用域的顶部，但是变量的赋值不会被提升。

```js
console.log(a) // undefined
var a = 1
```

### 函数提升

函数提升是指函数的声明会被提升到当前作用域的顶部，但是函数的赋值不会被提升。

```js
console.log(a) // function a() {}
function a() {}
```

## JavaScript 执行栈

JavaScript 执行栈是一个用于存储函数调用的栈结构，它遵循先进后出的原则。

当浏览器加载脚本，JS 引擎从全局上下文也就是默认上下文开始执行代码，所以全局上下文被放在执行栈的最底部。

然后 JS 引擎再搜索代码中被调用的函数。每一次函数被调用，一个新的 FEC 就会被创建，并被放置在当前执行上下文的上方。

执行栈最顶部的执行上下文会成为活跃执行上下文，并且始终是 JS 引擎优先执行。

一旦活跃执行上下文中的代码被执行完毕，JS 引擎就会从执行栈中弹出这个执行上下文，紧接着执行下一个执行上下文，以此类推。

为了了解执行栈的工作流，请考虑下面的代码：

```js
var name = 'Victor'

function first() {
  var a = 'Hi!'
  second()
  console.log(`${a} ${name}`)
}

function second() {
  var b = 'Hey!'
  third()
  console.log(`${b} ${name}`)
}

function third() {
  var c = 'Hello!'
  console.log(`${c} ${name}`)
}

first()
```

解释以上代码的执行过程：

1. 全局上下文被创建，全局上下文被压入执行栈中。
2. 全局上下文初始化，创建变量对象、作用域链、this。
3. 全局上下文代码被执行，遇到 first() 函数调用，创建 first() 函数执行上下文，first() 函数执行上下文被压入执行栈中。
4. first() 函数执行上下文初始化，创建变量对象、作用域链、this。
5. first() 函数执行上下文代码被执行，遇到 second() 函数调用，创建 second() 函数执行上下文，second() 函数执行上下文被压入执行栈中。
6. second() 函数执行上下文初始化，创建变量对象、作用域链、this。
7. second() 函数执行上下文代码被执行，遇到 third() 函数调用，创建 third() 函数执行上下文，third() 函数执行上下文被压入执行栈中。
8. third() 函数执行上下文初始化，创建变量对象、作用域链、this。
9. third() 函数执行上下文代码被执行，打印 `Hello Victor`。
10. third() 函数执行上下文被弹出执行栈。
11. second() 函数执行上下文代码被执行，打印 `Hey Victor`。
12. second() 函数执行上下文被弹出执行栈。
13. first() 函数执行上下文代码被执行，打印 `Hi Victor`。
14. first() 函数执行上下文被弹出执行栈。
15. 全局上下文代码被执行，打印 `Victor`。
16. 全局上下文被弹出执行栈。

![AsLji6](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/AsLji6.jpg)

## 全局执行上下文对比函数执行上下文

全局执行上下文和函数执行上下文的区别在于：

1. 全局执行上下文只有一个，但是函数执行上下文可以有很多个。
2. 全局执行上下文在浏览器关闭时被销毁，但是函数执行上下文在函数执行完毕后被销毁。

## 参考

1. [https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/Call](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/Call)
2. [JavaScript 执行上下文——JS 的幕后工作原理](https://www.freecodecamp.org/chinese/news/execution-context-how-javascript-works-behind-the-scenes/)
