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

Chrome插件开发 - Creating the TurboReader browser extension


## 关于 404

[http status](https://manon.icu/http-status)
[404](https://www.abstractapi.com/http-status-codes/404)

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

## 自定义 404 页面

创建`404.js`文件，并在其中定义自定义 404 页面。

```js
import Link from 'next/link'

const MyCustom404Page = (props) => {
  return (
    <div
      style={{
        marginTop: 100,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center'
      }}
    >
      <h1>404</h1>
      <h2>
        <Link href="/" style={{color: 'blue', textDecoration: 'underline'}}>
          Go To Home Page
        </Link>
      </h2>
      <p>Sorry, the content you are looking for cuould not be found.</p>
    </div>
  )
}

export default MyCustom404Page
```

检查结果

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

## 动态渲染 404 页面

next.js 允许通过`getStaticProps`或`getServerSideProps`请求数据并自定义 404 页面。

```js
import Link from 'next/link'

const MyCustom404Page = (props) => {
  return (
    <div
      style={{
        marginTop: 100,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center'
      }}
    >
      <h1>404 - Page Not Found</h1>
      <h2>
        <Link href="/" style={{color: 'blue', textDecoration: 'underline'}}>
          Go To Home Page
        </Link>
      </h2>
      <p>Or check out our latest news:</p>
      <hr />
      <ul>
        {posts.map((articles) => (
          <li>{/* article title and href here */}</li>
        ))}
      </ul>
    </div>
  )
}

export async function getStaticProps() {
  // Call an external API endpoint to get posts.
  const res = await fetch('YOUR_API_URL')
  const posts = await res.json()

  return {
    props: {
      posts
    },
    // Next.js will attempt to re-generate the page:
    // - When a request comes in
    // - At most once every second
    revalidate: 60
  }
}

export default MyCustom404Page
```


Next.js - Custom 404


CSS 动画（CSS Animations）是一种使用 CSS 属性来实现元素动态变化的技术。它允许您在不使用 JavaScript 或 Flash 等技术的情况下，通过使用 CSS 属性来创建动态效果。

CSS 动画由两个主要组成部分组成：关键帧（Keyframes）和动画属性（Animation Properties）。

关键帧是指定义了动画在不同时间点上应该显示的样式。例如，您可以定义一个在动画开始时显示元素，然后在 50% 处旋转元素，最后在动画结束时将其变形的关键帧。

动画属性用于指定动画如何进行，包括动画持续时间、延迟、动画速度和重复次数等。通过指定这些属性，您可以控制动画的时序和执行方式。

下面是一个简单的 CSS 动画示例，该示例将使元素在 2 秒内从左侧滑动到右侧：

```css
/* 定义动画关键帧 */
@keyframes slide {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 100px;
  }
}

/* 应用动画属性 */
.element {
  animation-name: slide;
  animation-duration: 2s;
}
```

在这个例子中，我们首先定义了一个名为 slide 的关键帧，该关键帧定义了元素的初始样式（from）和结束样式（to）。然后，我们将 slide 动画应用于一个类名为 .element 的元素，通过设置 animation-name 和 animation-duration 属性来指定动画名称和持续时间。

CSS 动画有许多属性可以用于自定义动画效果，包括动画延迟、动画速度、动画方向、动画填充模式等。通过熟练使用这些属性，您可以创建出非常丰富的动画效果，从简单的平移和旋转到复杂的路径动画和变形效果。


css - Animations


`crypto`模块提供了加密功能，其中包括了用于 OpenSSL 散列、HMAC、加密、解密、签名、以及验证的函数的一整套封装。

几种常见的加密、解密算法：

- hash HMAC
- cipher
- decipher
- sign
- verify

## 什么是 hash

hash 是一种散列函数，用于生成一个唯一的值，用于比较两个值是否相同。

## 什么是 HMAC

HMAC 是一种基于 hash 的密钥的认证算法，它可以用于验证数据的完整性，以及防止被篡改。

```js
const {createHmac} = require('crypto')

const secret = 'abcdefg'
const hash = createHmac('sha256', secret)
  .update('I love cupcakes')
  .digest('hex')
console.log(hash)
// c0fa1bc00531bd78ef38c628449c5102aeabd49b5dc3a2a516ea6ea959d6658e
```

使用`cipher`加密

```js
const crypto = require('crypto')
const cipher = crypto.createCipher('aes192', 'a password')

var encrypted = cipher.update('some clear text data', 'utf8', 'hex')
encrypted += cipher.final('hex')

console.log(encrypted)
```

使用`decipher`解密

```js
const crypto = require('crypto')
const decipher = crypto.createDecipher('aes192', 'a password')

var encrypted =
  'c0fa1bc00531bd78ef38c628449c5102aeabd49b5dc3a2a516ea6ea959d6658e'
var decrypted = decipher.update(encrypted, 'hex', 'utf8')
decrypted += decipher.final('utf8')
console.log(decipher)
```

使用`sign`签名

```js
const crypto = require('crypto')
const buffer = require('buffer')

const {privateKey, publicKey} = crypto.generateKeyPairSync('rsa', {
  modulusLength: 2048
})

const data = Buffer.from('I Love GeeksForGeeks')

const sign = crypto.sign('SHA256', data, privateKey)

const signature = sign.toString('base64')

console.log(`Signature:\n\n ${signature}`)
```

使用`verify`验证

```js
const crypto = require('crypto')
const buffer = require('buffer')

const {privateKey, publicKey} = crypto.generateKeyPairSync('rsa', {
  modulusLength: 2048
})
const algorithm = 'SHA256'

const data = Buffer.from('I Love GeeksForGeeks')

const signature = crypto.sign(algorithm, data, privateKey)

const isVerified = crypto.verify(algorithm, data, publicKey, signature)

console.log(`Is signature verified:${isVerified}`)
```


Node.js - Crypto


在此之前，我们学习了以下几个关于 chrome 插件开发的文章：

- [First extension](/blog/translate/build-chrome-extensions/first-extension)
- [New Tab](/blog/translate/build-chrome-extensions/new-tab)
- [Add Tailwind](/blog/translate/build-chrome-extensions/add-tailwind)
- [Add React](/blog/translate/build-chrome-extensions/spicing-with-react)

这篇文章学习创建弹窗插件（点击插件图标时出现）

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

## 结构

创建目录，然后初始化

```bash
mkdir popup-extension
cd popup-extension
npm init -y
```

安装依赖

```bash
npm i react react-dom tailwindcss vite

npm i -D @vitejs/plugin-react postcss-cli

npx tailwind init
```

- [React、React-dom](/blog/translate/build-chrome-extensions/spicing-with-react) for framework
- [Tailwind](/blog/translate/build-chrome-extensions/add-tailwind) for css
- [vite](/blog/translate/build-chrome-extensions/parcel-to-vite) for build

`npx tailwind init`将会创建`tailwind.config.js`，内容如下：

```js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['src/*.jsx'],
  theme: {
    extend: {}
  },
  variants: {
    extend: {}
  },
  plugins: []
}
```

创建`.postcssrc.json`

```json
{
  "plugins": {
    "tailwindcss": {}
  }
}
```

创建`css/style.css`

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

创建`vite.config.js`

```js
import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()]
})
```

修改`package.json`，添加如下`scripts`

```json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}
```

创建`public/manifest.json`

```json
{
  "manifest_version": 3,
  "version": "1.0",
  "name": "Popup Extension",
  "description": "A demo popup experience",
  "action": {
    "default_icon": "icons/icon-48.png",
    "default_popup": "index.html"
  },
  "icons": {
    "48": "icons/icon-48.png"
  }
}
```

创建`index.html`

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>DDT Popup</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
  </head>
  <body>
    Hello world 👋
  </body>
</html>
```

假如现在构建并加载插件，当前 Popup 插件将会展示如下：

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

添加`Tailwind`、`React`，修改`index.html`

```html
<body>
  <div id="app"></div>
  <script type="module" src="src/index.jsx"></script>
</body>
```

创建`src`，并在`src`下添加`index.jsx`

```jsx
import ReactDOM from 'react-dom'
import {App} from './App'

const app = document.getElementById('app')
ReactDOM.render(<App />, app)
```

创建`App.jsx`

```jsx
import Counter from './Counter'

export function App() {
  return (
    <div className="flex flex-col items-center justify-center w-screen h-screen bg-indigo-400 text-6xl font-bold text-white">
      <p>Welcome 👋</p>
      <br />
      <Counter />
    </div>
  )
}
```

创建`Counter.jsx`

```jsx
import {useState} from 'react'

export default function Counter() {
  const [counter, setCounter] = useState(0)
  const increase = () => setCounter((count) => count + 1)
  const decrease = () => setCounter((count) => count - 1)
  return (
    <div>
      <button onClick={decrease}>-</button>
      <span className="px-4">{counter}</span>
      <button onClick={increase}>+</button>
    </div>
  )
}
```

构建后，现在的 Popup 插件展示如下：

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

emm，宽度不够，修改`style.css`

```css
#app {
  width: 350px;
}
```

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

## Source Code

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


Chrome插件开发 - Popup extension


在关系数据库中，数据通常分布在多个表中，要选择完整的数据，通常需要从多个表中选择数据。

使用`INNER JOIN`组合来自多个表的数据。

## 语法

```sql
SELECT
	pka,
	c1,
	pkb,
	c2
FROM
	A
INNER JOIN B ON pka = fka;
```

- 首先指定要选择的列
- 指定要选择的表为主表
- 指定要选择的表为从表，然后使用`INNER JOIN`连接主表和从表

对于表中的每一行`A`，`INNER JOIN`将`pka`列中的值与表中每一行的`fka`列中的值进行比较`B`：

- 如果想到，则将两个表中的相同的值连接起来添加到结果集中
- 如果没有相同的值，则忽略

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

## 示例

示例数据库
![mC6IHk](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/mC6IHk.jpg)

### 使用`INNER JOIN`连接两个表

在这些表中，每当客户付款时，都会在表中插入一个新的`payment`，而客户可能有零次或多次付款。通过`customer_id`建立两个表关系。

```sql
SELECT
	customer.customer_id,
	first_name,
	last_name,
	amount,
	payment_date
FROM
	customer
INNER JOIN payment
    ON payment.customer_id = customer.customer_id
ORDER BY payment_date;
```

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

```sql
SELECT
	customer_id,
	first_name,
	last_name,
	amount,
	payment_date
FROM
	customer
INNER JOIN payment USING(customer_id)
ORDER BY payment_date;
```

### 使用`INNER JOIN`连接多个表

下图说明了三个表之间的关系：`staff`、`payment`和`customer`

- 每个员工处理 0 或多个付款，每个付款只能被一个员工处理
- 每个客户进行 0 或多次付款，每次付款只能被一个客户支付

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

```sql
SELECT
	c.customer_id,
	c.first_name customer_first_name,
	c.last_name customer_last_name,
	s.first_name staff_first_name,
	s.last_name staff_last_name,
	amount,
	payment_date
FROM
	customer c
INNER JOIN payment p
    ON p.customer_id = c.customer_id
INNER JOIN staff s
    ON p.staff_id = s.staff_id
ORDER BY payment_date;
```

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


Postgresql INNER JOIN从多个表中选择数据。

Postgresql - INNER JOIN



混合模式（Blend modes）是一种在图形设计和图像编辑中常用的技术，可以通过将两个或多个图层的像素颜色混合在一起来创建不同的视觉效果。

在混合模式中，每个像素都由两个或多个图层的对应像素的颜色值组成。通过将这些颜色值进行数学计算，可以创建出一系列不同的效果。混合模式的计算基于所选混合模式的算法，以及每个像素的透明度值。不同的混合模式可以产生不同的视觉效果，如颜色叠加、柔光、变暗等。

以下是一些常见的混合模式：

- 正常（Normal）：两个图层的像素颜色直接叠加。
- 变暗（Darken）：将两个图层的像素颜色的较暗的颜色作为输出结果。
- 变亮（Lighten）：将两个图层的像素颜色的较亮的颜色作为输出结果。
- 滤色（Screen）：将两个图层的像素颜色取反，并相乘再取反。
- 叠加（Overlay）：根据底层像素的颜色强度来调整顶层像素的颜色值，产生更加复杂的视觉效果。
- 柔光（Soft light）：根据底层像素的颜色值来调整顶层像素的亮度和饱和度，产生柔和的光照效果。
- 差值（Difference）：将两个图层的像素颜色的差值作为输出结果。

混合模式通常用于图像处理和图形设计中，例如调整图片的颜色和对比度、创建复杂的图形效果、以及制作特殊效果。在 CSS 中，混合模式也可以用于控制背景图像和元素之间的混合效果。
