闭包(Closures)是自包含的功能代码块，可以在代码中使用或者用来作为参数传值。

Closures - 闭包


在 Swift 中，Opaque types（不透明类型）是一种声明方式，它可以隐藏类型的实现细节，同时提供一个公共接口供外部使用，这样可以使代码更加模块化和安全。

在 Swift 中，我们可以使用 protocol 关键字来声明一个协议，然后使用 associatedtype 关键字来声明一个不透明类型。例如：

```swift
protocol Container {
  associatedtype Item
  var count: Int { get }
  subscript(i: Int) -> Item { get }
}
```

在上面的代码中，我们定义了一个 Container 协议，它包含一个不透明类型 Item，以及一个 count 属性和一个下标操作符。这个协议的具体实现可以是任何符合该协议的类型，只要它们实现了 count 和下标操作符即可。

在使用该协议时，我们可以使用一种特殊的语法来创建一个不透明类型。例如：

```swift
struct Stack<Element>: Container {
// original Stack<Element> implementation
...

    // Opaque type
    typealias Item = Element
}
```

在上面的代码中，我们定义了一个 Stack 结构体，它实现了 Container 协议，并声明了一个不透明类型 Item，它的实际类型是 Element。这样，外部代码可以使用 Item 类型来访问 Stack 结构体的元素，但是无法直接访问 Element 类型。

例如，我们可以使用下面的代码来创建一个 Stack 实例，并向其中添加一些元素：

```swift
var stack = Stack<Int>()
stack.push(1)
stack.push(2)
stack.push(3)
```

然后，我们可以使用下面的代码来遍历 Stack 实例中的元素：

```swift
for i in 0..<stack.count {
  print(stack[i])
}
```

在上面的代码中，我们使用 count 属性和下标操作符来遍历 Stack 实例中的元素，而不需要直接访问 Element 类型。

通过使用不透明类型，我们可以隐藏底层类型的实现细节，同时提供一个公共接口供外部使用，这样可以使代码更加模块化和安全。同时，不透明类型还可以提高代码的灵活性和可维护性，因为它可以让我们在不影响外部代码的情况下修改底层类型的实现细节。


Opaque types（不透明类型）是一种声明方式，它可以隐藏类型的实现细节，同时提供一个公共接口供外部使用，这样可以使代码更加模块化和安全。

Swift - 模糊类型


在上一篇文章[【New Tab】](/blog/translate/build-chrome-extensions/new-tab)学习了创建第一个标签。

这篇文章学习集成[tailwind](https://tailwindcss.com/docs/installation)

## 安装依赖

```bash
#初始化node项目
npm init -y

#安装parcel和tailwind
npm i parcel tailwindcss

#安装Parcel静态资源复制和postcss
npm i -D parcel-reporter-static-files-copy postcss-cli
```

## 迁移静态资源

在根目录创建`static`文件夹，移动`manifest.json`和`icons`文件到`static`

创建`.parcelrc`

```json
{
  "extends": ["@parcel/config-default"],
  "reporters": ["parcel-reporter-static-files-copy"]
}
```

## 集成 tailwind

在根目录创建`.postcssrc.json`

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

执行`npx tailwind init`，tailwind 将会自动创建`taiwind.config.js`

```js
module.exports = {
  content: ['*.html'],
  theme: {
    extend: {}
  },
  variants: {
    extend: {}
  },
  plugins: []
}
```

打开`css/style.css`替换所有

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

## 修改 package.json

```json
{
  "scripts": {
    "prebuild": "rm -rf dist .parcel-cache",
    "watch": "parcel watch new-tab.html",
    "build": "parcel build new-tab.html"
  }
}
```

执行`npm run build`，与之前不同的是，chrome 插件加载已解压文件的时候选择`dist`

[【Source Code】](https://github.com/rebelchris/new-tab-extension/tree/tailwind)


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

Chrome插件开发 - 集成tailwind


在 JavaScript 中，Symbol 是一种原始数据类型，表示唯一、不可变的值。Symbols 用于创建唯一的对象键，并提供创建私有对象成员的方法。

你可以使用 Symbol() 函数创建一个 symbol：

```js
let sym = Symbol()
```

在创建 symbol 时，你还可以为它提供一个描述，这对调试很有帮助：

```js
let sym = Symbol('debug symbol')
```

Symbols 是唯一的，不能使用 == 或 === 运算符进行比较。你可以使用 Object.is() 方法来比较 symbols：

```js
let sym1 = Symbol('debug symbol')
let sym2 = Symbol('debug symbol')
console.log(sym1 === sym2) // false
console.log(Object.is(sym1, sym2)) // false
```

要将 symbol 用作对象键，需要将它放在方括号中：

```js
let sym = Symbol('debug symbol')
let obj = {
  [sym]: 'value'
}
console.log(obj[sym]) // "value"
```

Symbols 不可枚举，这意味着它们不包含在 Object.keys() 或 Object.getOwnPropertyNames() 返回的对象键列表中。你可以使用 Object.getOwnPropertySymbols() 方法获取对象中的 symbol 列表：

```js
let sym = Symbol('debug symbol')
let obj = {
  [sym]: 'value'
}
console.log(Object.keys(obj)) // []
console.log(Object.getOwnPropertyNames(obj)) // []
console.log(Object.getOwnPropertySymbols(obj)) // [Symbol(debug symbol)]
```

Symbols 可用于创建私有对象成员。由于 symbols 是唯一的且不可枚举的，所以可以将它们用作对象属性的键


Symbol


## 水平居中

### Text

```css
p {
  text-align: center;
}
```

### Blocks

![image](https://cdn.jsdelivr.net/gh/manonicu/pics@master/images/20190125091332.png)

```css
/*flexbox*/
#mysection {
  display: flex;
  justify-content: center;
}

/*margin*/
#mysection {
  margin: 0 auto;
  width: 50%;
}
```

## 垂直居中

### Text

![image](https://cdn.jsdelivr.net/gh/manonicu/pics@master/images/20190125092037.png)

```css
#mysection {
  display: flex;
  align-items: center;
}
```

## 水平垂直居中

![image](https://cdn.jsdelivr.net/gh/manonicu/pics@master/images/20190125091735.png)

```css
/*flex*/
#mysection {
  display: flex;
  align-items: center;
  justify-content: center;
}
/*grid*/
body {
  display: grid;
  place-items: center;
  height: 100vh;
}
```


老生常谈-居中


Next.js 是基于 React 的框架，它提供了一个简单的构建工具，可以让你快速构建一个网站。

## 安装

> 前置条件：安装 Node.js、npm

```bash
npm init -y
npm install next react react-dom

# + "next": "^12.1.6",
# + "react": "^18.1.0",
# + "react-dom": "^18.1.0"
```

```json
{
  "dependencies": {
    "next": "^12.1.6",
    "react": "^18.1.0",
    "react-dom": "^18.1.0"
  },
  "name": "demo",
  "version": "1.0.0",
  "main": "index.js",
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "pfan",
  "license": "ISC",
  "description": ""
}
```

添加`build`和`start`命令

```bash
{
  "dependencies": {
    "next": "^12.1.6",
    "react": "^18.1.0",
    "react-dom": "^18.1.0"
  },
  "name": "demo",
  "version": "1.0.0",
  "main": "index.js",
  "devDependencies": {},
  "scripts": {
    "build": "next build",
    "start": "next start"
  },
  "author": "pfan",
  "license": "ISC",
  "description": ""
}
```

## 创建`pages`目录

```bash
mkdir pages && cd pages && touch index.js
```

```js
function HomePage() {
  return <div>Welcome to Next.js!</div>
}

export default HomePage
```

## 启动服务

```bash
npm run dev

#npm run dev --port=8888
#
#> demo@1.0.0 dev
#> next dev
#
#ready - started server on 0.0.0.0:3000, url: http://localhost:3000
```

![2mCs2M](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/2mCs2M.png)


Next.js是基于React的框架，它提供了一个简单的构建工具，可以让你快速构建一个网站。

Next.js - Environment Setup


- [插件介绍](/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)
