本文基于 manifest v3
插件使用 Web 技术开发
浏览器提供额外的插件 API
插件与网页分离，运行在一个独立的环境中
插件 API 功能
管理 Tabs、窗口、历史记录、书签、Cookies、下载、浏览数据、通知、网站权限
管理浏览器的外观和感觉 - 背景、主题、右键菜单、新标签页、启动页面
定制 DevTools
向网页注入脚本，与网页通信，与系统中的 Native 应用程序通信
修改/监听发送的 HTTP 请求/接收的回复
插件构成
| 结构 | 功能 | 调用 API | 操作 Dom | 进程 |
| manifest | 配置文件 | - | ||
| popup | 弹出对话框 | 所有 | Extension process | |
| option page | 用户使用的设置页面 | 所有 | ||
| background script | 后台脚本 | 所有 | 禁止？ | Extension process |
| content script | 内容脚本（注入到网页中） | 有限 | 允许 | Renderer process |
* 即便 content script 是注入到网页中的，而且是运行在 Renderer 进程（与主网页相同的进程），但是它们仍运行在不同的世界（world）。主网页运行在 main world，插件的 content script 运行在 isolated world。比如说 main world 中有一个变量，它在 isolated world 中是访问不到的，但是如果修改了 dom，对其它世界是有影响的。
将 Chrome 插件迁移到 Edge
移除 Chrome 独有的 API（如调用 Google 账户）
移动 update_URL 字段（如果是从 Chrome 商店直接下载的包会有这个字段）
改名 Chrome 相关的文字（插件名称、描述文字）
参考文献
SignalR 是一个开源的实时通信库，用于构建实时 Web 应用程序。它提供了一个简单的 API，可以在客户端和服务器之间建立持久连接，以便实时地推送数据。
与传统的 WebSocket 相比，SignalR 提供了更高级的功能和更简单的开发体验。下面是一些主要区别：
支持多种传输方式：SignalR 可以使用多种传输方式，包括 WebSocket、Server-Sent Events（SSE）、长轮询和 Forever Frame。这使得 SignalR 在不同的环境中都能提供实时通信的能力，即使某些浏览器不支持 WebSocket，也可以使用其他传输方式。
自动处理连接管理：SignalR 管理连接的生命周期，包括连接的建立、断开和重新连接。它会自动处理连接的失败和重新连接的逻辑，简化了开发人员的工作。
服务器端推送：SignalR 允许服务器端主动推送消息给客户端，而不需要客户端发起请求。这使得实时通信变得更加高效和实时，适用于聊天应用、实时监控等场景。
跨平台支持：SignalR 可以在多个平台上使用，包括 .NET、Java、JavaScript 等。这使得开发人员可以使用自己熟悉的语言和框架来构建实时应用程序。
微软官方提供了针对 ASP.NET Core Web 应用（Razor 页面）的详细教程，这里给出 MVC 版本入门教程。
最终将创建一个正常运行的聊天应用：
创建 Web 应用项目
添加 SignalR 客户端库
在“解决方案资源管理器”>中，右键单击项目，然后选择“添加”“客户端库”。
在“添加客户端库”对话框中：
“提供程序”选择“unpkg”
“库”，请输入 @microsoft/signalr@latest。
选择“选择特定文件”，展开“dist/browser”文件夹，然后选择 signalr.js 和 signalr.min.js。
点击“安装” 。
创建 SignalR Hubs 类
using Microsoft.AspNetCore.SignalR;
/// <summary>
/// Hub 类管理连接、组和消息
/// </summary>
public class ChatHub : Hub
{
/// <summary>
/// 可通过已连接客户端调用 SendMessage，以向所有客户端发送消息
/// </summary>
public async Task SendMessage(string user, string message)
{
// Clients.All 向所有的客户端发送消息
// ReceiveMessage 是客户端监听的方法
await Clients.All.SendAsync("ReceiveMessage", user, message);
}
}其父类 Hub 可管理连接、组和消息。这里演示的是向所有客户端发送消息。
配置 SignalR
打开 Program.cs，添加注入：
builder.Services.AddSignalR();添加路由：
app.MapHub<ChatHub>("/chatHub");添加 SignalR 客户端代码
视图页面：
<div class="container">
<div class="row p-1">
<div class="col-1">用户</div>
<div class="col-5"><input type="text" id="userInput" /></div>
</div>
<div class="row p-1">
<div class="col-1">消息</div>
<div class="col-5"><input type="text" class="w-100" id="messageInput" /></div>
</div>
<div class="row p-1">
<div class="col-6 text-end">
<input type="button" id="sendButton" value="发送消息" />
</div>
</div>
<div class="row p-1">
<div class="col-6">
<hr />
</div>
</div>
<div class="row p-1">
<div class="col-6">
<ul id="messagesList"></ul>
</div>
</div>
</div>
<script src="~/lib/microsoft/signalr/dist/browser/signalr.min.js"></script>
<script src="~/js/chat.js"></script>chat.js 文件：
"use strict";
var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
// 在连接建立之前禁用发送按钮
document.getElementById("sendButton").disabled = true;
connection.on("ReceiveMessage", function (user, message) {
var li = document.createElement("li");
document.getElementById("messagesList").appendChild(li);
// 修改此处时应注意脚本注入问题
li.textContent = `${user} says ${message}`;
});
connection.start().then(function () {
document.getElementById("sendButton").disabled = false;
}).catch(function (err) {
return console.error(err.toString());
});
document.getElementById("sendButton").addEventListener("click", function (event) {
var user = document.getElementById("userInput").value;
var message = document.getElementById("messageInput").value;
connection.invoke("SendMessage", user, message).catch(function (err) {
return console.error(err.toString());
});
event.preventDefault();
});完成。在线示例：https://xoyozo.net/Demo/SignalRDemo
如果手机开启了自动横屏，那么网页就会跟着旋转，导致网页宽度变大，高度变小，页面布局不友好，我们可以通过判断屏幕方向 api，用 css 设置旋转。
HTML：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<title>保持竖屏示例</title>
</head>
<body>
<div id="app">
<div class="page">
<div>把手机横过来试试</div>
<div>页面永远保持竖屏方向</div>
</div>
</div>
</body>
</html>CSS：
body { margin: 0; }
.page { text-align: center; padding-top: 100px; }
@media screen and (orientation: landscape) {
body { width: 100vh; height: 100vw; overflow: hidden; }
.page.landscape-primary { transform: rotate(-90deg); transform-origin: top left; width: 100vh; height: 100vw; position: absolute; top: 100%; left: 0; }
.page.landscape-secondary { transform: rotate(90deg); transform-origin: top left; width: 100vh; height: 100vw; position: absolute; top: 0; left: 100%; }
}JS:
function fn_set_orientation() {
var orientation = window.screen.orientation || window.screen.mozOrientation || window.screen.msOrientation;
const div = document.querySelector('.page');
console.log(orientation.type)
switch (orientation.type) {
case 'landscape-primary': {
div.classList.remove('landscape-secondary');
div.classList.add('landscape-primary');
break;
}
case 'landscape-secondary': {
div.classList.remove('landscape-primary');
div.classList.add('landscape-secondary');
break;
}
default: {
div.classList.remove('landscape-primary');
div.classList.remove('landscape-secondary');
break;
}
}
}
window.addEventListener("orientationchange", function () {
fn_set_orientation();
});
fn_set_orientation();示例：
https://xoyozo.net/Demo/Orientation
防抖条件：
高频
耗时
以最后一次调用为准
适合用在改变窗口大小、滚动等事件中。
示例：改变窗口大小时重新布局页面
let timerId;
window.onresize = () => {
// 清除之前可能存在的定时器，以防止重复执行操作
clearTimeout(timerId);
// 创建一个新的定时器，500毫秒后执行回调函数
timerId = setTimeout(() => {
console.log('layout');
layout();
}, 500);
};本文由 ChatGTP 3.5 提供
在 .NET C# 桌面应用程序中，你可以使用委托和事件来实现在窗体页面处理事务过程中实时更新界面。下面是一个示例，展示了在不同情况下如何更新主界面：
首先，在窗体页面中定义一个委托和一个事件，用于更新界面：
public delegate void UpdateUIHandler(string msg);
public event UpdateUIHandler UpdateUIEvent;然后，在窗体的构造函数中订阅事件，并在事件处理程序中更新界面：
public Form1()
{
InitializeComponent();
UpdateUIEvent += UpdateUI;
}
private void UpdateUI(string msg)
{
if (InvokeRequired)
{
Invoke(new UpdateUIHandler(UpdateUI), msg);
}
else
{
// 在这里更新界面
label1.Text = msg;
}
}现在，你可以在窗体页面的任何地方调用 UpdateUIEvent 来触发更新界面的事件。例如，在按钮点击事件中：
private void button1_Click(object sender, EventArgs e)
{
// 处理事务过程中实时更新界面
string msg = "处理事务中...";
UpdateUIEvent?.Invoke(msg);
// 异步调用一个类方法中的方法，并在方法内部实时更新主界面
Task.Run(() =>
{
MyClass myClass = new MyClass();
myClass.LongRunningMethod(UpdateUIEvent);
});
}在上面的示例中，MyClass 是一个自定义的类，其中的 LongRunningMethod 是一个耗时的方法。在这个方法内部，你可以通过传递 UpdateUIEvent 来实时更新主界面：
public class MyClass
{
public void LongRunningMethod(UpdateUIHandler updateUI)
{
// 处理事务过程中实时更新界面
string msg = "处理事务中...";
updateUI?.Invoke(msg);
// 其他耗时操作...
}
}通过以上示例，你可以在窗体页面处理事务过程中实时更新界面，并且在异步调用的方法内部也能实时更新主界面。记得在更新界面时使用 Invoke 方法，以确保在主线程上更新界面，避免跨线程访问 UI 的问题。
解析域名（非网站域名）、挂载磁盘（若有另购）、修改实例名称、主机名
设置阿里云（重要）
远程连接进入 ECS（若解析未生效可以先用 IP）（若新服默认使用 3389 端口，可先在安全组临时放行 3389 端口）
开启 Windows 防火墙（使用推荐设置）
Windows 更新、并在高级选项中开启（更新 Windows 时接收其它 Microsoft 产品的更新）
安装 IIS：服务器管理器-添加角色和功能-勾选“Web 服务器(IIS)”包括管理工具
建议勾选：
默认已勾选项
按需安装 IP 和域限制
跟踪（即“失败请求跟踪”）
请求监视器、日志记录工具、
按需安装 ASP
按需安装 ASP.NET 4.8（会同时勾选 .NET Extensibility 4.8、ISAPI 扩展、ISAPI 筛选器）
按需安装 WebSocket 协议
应用程序初始化（建议安装）
管理服务（用于 Web 部署）
细节：设置任务栏；设置桌面图标；个性化-颜色-勾选“标题栏和窗口边框”；设置输入法；
下载 URL 重写（文件名：rewrite_amd64_zh-CN.msi）
下载 MySQL Connector/NET（文件名：mysql-connector-net-8.0.19.msi）
下载 ASP.NET Core 运行时 Hosting Bundle（文件名：dotnet-hosting-*.*.*-win.exe）
下载 .NET 桌面运行时 Windows x64（文件名：windowsdesktop-runtime-*.*.*-win-x64.exe）
下载 Web Deploy（文件名：WebDeploy_amd64_zh-CN.msi）
服务：设置“ASP.NET State Service”自动启动
IIS 日志：路径（如 D:\wwwlogs），每小时（统一设置一个全局的就行了，不需要设置每个网站），按需勾选“使用本地时间进行文件命名和滚动更新”
IIS 导入证书：个人、允许导出证书。参
设置权限：设置网站所在分区（如 D 盘），安全，添加 IIS_IUSRS，全部拒绝（防止跨站）
添加用户：为每个网站创建用户（既能防止跨站，又能跟踪进程），密码不能改、不过期，仅隶属于 IIS_IUSRS，并添加到每个网站的根目录，若用户创建失败看这里。
创建网站：设置访问物理路径的用户；设置应用程序池的“标识”用户；编辑绑定：勾选需要服务器名称指示；检查域名是否绑全；设置写入目录；
重复上面两步
检查所有网站用户是否仅隶属于 IIS_IUSRS（在“组”页面双击 Users 和 IIS_IUSRS 查看成员）
在应用程序池列表页面检查 CLR 版本、管托管道模式和标识；在网站列表页面检查绑定和路径
设置“IP 地址和域限制”
废弃旧服时再次检查：IIS 中各功能设置、hosts、安装的应用程序、启动项、服务、防火墙等
解析各网站域名
其它：资源管理器-查看-选项-查看-去掉“始终显示图标，从不显示缩略图”前的勾
再次检查阿里云设置
在备份工具中添加该服务器的所有备份项
其它：到期日期提醒、
>> 关于域名解析
因各地域名解析生效时间不可控，一般国内域名 1 天内，国际域名 2 天内。
若网站数据库在 RDS、上传文件在 OSS，则解析 48 小时后直接停止原网站即可；（比较理想的）
文件上传到 ECS 的可使用 FTP 等工具定时同步文件，或直接停止原网站。（网友会遇到新文章中图片无法显示等问题）
还有一种方法是新网站提前解析一个备用域名，确保完全生效后再修改正式域名的解析，原网站无条件跳转到备用域名，如果数据库中有保存完整网址路径的，关闭原网站并解绑备用域名之后，进行批量替换。（缺点是可能会影响在搜索引擎的网站权重）
部分有定时器的网站要注意，如果两个网站的定时器都正常开启会导致意外的，需要停止其中一个网站的定时器。
当然每种方法都有优缺点，选择可以接受且方便的一种即可。
更多文章：
默认端口带来安全隐患，建议更改为 50000-60000 之间的端口号。
Windows 远程桌面（RDP）(3389)
在 Windows 防火墙中放行新端口：在“入站规则”中找到“Open RDP Port 3389”复制并粘贴该规则，修改端口和名称。
若没有这个规则：新建规则 - 端口 - TCP - 特定本地端口（填写新的端口号）- 允许连接 - 名称
如有其它防火墙或安全组也一并配置（如阿里云 ECS 的安全组）
打开注册表（regedit），展开到：HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Terminal Server\WinStations\RDP-Tcp，右侧双击“PortNumber”切换到“十进制”，将 3389 改为新端口号
重启生效
在防火墙和安全组中禁止原默认端口
SSH (22) 之 CentOS
从阿里云控制台登录服务器（如果未设置 root 密码则先设置），直接跳到第 4 步
在外部防火墙中放行新的端口号（如阿里云 ECS 的安全组）
在内部防火墙中放行新的端口号（如 firewalld 或 iptables），使用宝塔面板的直接在面板“安全”页面设置即可
打开 SSH 配置文件
sudo vi /etc/ssh/sshd_config找到并编辑 Port 行的商品号并启用
#Port 22重新加载使生效
sudo systemctl reload sshd在防火墙和安全组中禁止原默认端口
建议使用 SSH 密钥对代替传统账号密码登录
FTP (21) 之 FileZilla Server Windows 版
一般地，在 Windows Defender 防火墙中是以添加应用 filezilla-server.exe 的方式允许的，所以不需要更改端口。如果以端口方式允许的，那么在入站规则中允许新的端口。
如有其它防火墙或安全组也一并配置（如阿里云 ECS 的安全组）
打开 Administer FileZilla Server，打开菜单 - Server - Configure - Server listeners，右侧窗口中将 Port 改为新端口（强烈建议将 Protocol 改为“Require explicit FTP over TLS”，即禁止 FTP 协议，改为使用 FTPS 协议）
从防火墙和安全组移除 21 端口
FTP (21) 之 Pure-Ftpd（宝塔面板）
在防火墙中放行新的端口号（如阿里云 ECS 的安全组）
进入宝塔面板，打开“安全”，添加端口规则 TCP
在宝塔面板中进入软件商店，找到 Pure-Ftpd 并打开，切换到“配置修改”，搜索“Bind”，删除开头的“#”，将端口号 21 改为新端口号，保存（强烈建议将 TLS 项改为 2，即禁止 FTP 协议，仅允许 FTPS 协议）
切换到“服务”选项卡，点击“重启”
从防火墙和安全组移除 21 端口
MySQL (3306) 之阿里云云数据库 RDS MySQL 版
打开控制台 RDS 实例页，左侧菜单点击“白名单与安全组”，切换到“安全组”查看正在使用的安全组ID
（若使用了安全组）打开控制台 ECS 首页，左侧菜单点击“安全组”，找到这个安全组，放行新的端口
打开控制台 RDS 实例页，左侧菜单点击“数据库连接”，点击“修改连接地址”，在弹出框中修改端口
从防火墙和安全组移除原端口（确保没有其它实例正在使用此端口）
PolarDB (3306)
打开控制台 PolarDB 集群实例页，左侧菜单点击“集群白名单”，切换到“安全组”查看正在使用的安全组ID
（若使用了安全组）打开控制台 ECS 首页，左侧菜单点击“安全组”，找到这个安全组，放行新的端口
打开控制台 PolarDB 集群实例页，左侧菜单点击“基本信息”，点击“主地址”和“集群地址”的“配置”，在“网线信息”中点击“更多”更改端口
从防火墙和安全组移除原端口（确保没有其它实例正在使用此端口）
MSSQL (1433) 之阿里云云数据库 RDS SQL Server 版
打开控制台 RDS 实例页，左侧菜单点击“白名单与安全组”，切换到“安全组”查看正在使用的安全组ID
（若使用了安全组）打开控制台 ECS 首页，左侧菜单点击“安全组”，找到这个安全组，放行新的端口
打开控制台 RDS 实例页，左侧菜单点击“数据库连接”，点击“修改连接地址”，在弹出框中修改端口
从防火墙和安全组移除原端口（确保没有其它实例正在使用此端口）
Redis (6379) 之阿里云云数据库 Redis 版
打开控制台 Redis 实例页，左侧菜单点击“白名单设置”，切换到“安全组”查看正在使用的安全组ID
（若使用了安全组）打开控制台 ECS 首页，左侧菜单点击“安全组”，找到这个安全组，放行新的端口
打开控制台 Redis 实例页，在“连接信息”中点击“修改连接地址”，在弹出框中修改端口
从防火墙和安全组移除原端口（确保没有其它实例正在使用此端口）
宝塔面板 (8888)
在防火墙中放行新的端口号（如阿里云 ECS 的安全组），或直接在私网其它 ECS 上的浏览器上直接访问原 8888 端口的地址
进入宝塔面板，打开面板设置，切换到“安全设置”页，找到“面板端口”，点击“设置”
在防火墙和安全组中禁止原默认端口
IIS 管理服务（Web 部署）(8172)
在 Windows 防火墙中放行新端口：在“入站规则”中找到“Web 管理服务(HTTP 流量入站)”因其为预定义规则且复制也无法修改，所以按其设置新建一个，并指定新的端口。
如有其它防火墙或安全组也一并配置（如阿里云 ECS 的安全组）
打开 IIS 管理器 - 管理服务，右侧停止，左侧修改端口，右侧启动
VS 中发布配置修改“服务器(E)”项添加端口
在防火墙和安全组中禁止原默认端口
登录微信公众平台，在“草稿箱”中依次点击“新的创作”，“写新图文”：
顶部选择“小程序”，在弹出窗中搜索小程序名称，以“浙里办”为例：
点击“获取更多页面路径”，并输入你的微信号
在手机上打开小程序，并打开你要复制路径的页面，点击右上角菜单，点击“复制页面路径”
得到一串类似下面格式的路径：
pages/zwfwBase/index.html?data=***因需要将服务商账户改为月结账户，在抖店“电子面单”页面无法修改已申请的服务商，只能取消合作，再重新开通，这会导致易打单无法打印面单，提示“请设置抖音电子面单地址”。
解决方法是进入易打单，在“批量打印”页面点击“设置模板”，抖店电子面单项刷新并重新勾选，保存。
