博客 (13)

本文基于 manifest v3

插件使用 Web 技术开发

浏览器提供额外的插件 API

插件与网页分离，运行在一个独立的环境中

插件 API 功能

• 管理 Tabs、窗口、历史记录、书签、Cookies、下载、浏览数据、通知、网站权限

• 管理浏览器的外观和感觉 - 背景、主题、右键菜单、新标签页、启动页面

• 定制 DevTools

• 向网页注入脚本，与网页通信，与系统中的 Native 应用程序通信

• 修改/监听发送的 HTTP 请求/接收的回复

插件构成

* 即便 content script 是注入到网页中的，而且是运行在 Renderer 进程（与主网页相同的进程），但是它们仍运行在不同的世界（world）。主网页运行在 main world，插件的 content script 运行在 isolated world。比如说 main world 中有一个变量，它在 isolated world 中是访问不到的，但是如果修改了 dom，对其它世界是有影响的。

将 Chrome 插件迁移到 Edge

• 移除 Chrome 独有的 API（如调用 Google 账户）

• 移动 update_URL 字段（如果是从 Chrome 商店直接下载的包会有这个字段）

• 改名 Chrome 相关的文字（插件名称、描述文字）
  

参考文献

1. Microsoft Edge 扩展入门（官方）

2. 一小时精通Edge扩展开发Microsoft Edge 文档（视频）
   

前言：本文操作需要你具备浏览器安装和使用扩展插件的能力、以及简单的使用命令行的能力。

第一步：下载视频

首先我使用 Edge 浏览器（Chrome 操作类似，不过安装扩展需要科学上网）。

2023 年初的时候，用 FetchV 这个扩展是非常方便的，它会自动嗅到网页中的视频，即使没有嗅到也可以用录制的方式来保存。

但到了过了一两个月发现 FetchV（及其马甲）经常打不开，或者无法嗅到视频流，更别提录制了。

所以我找到了另一款专业视频下载神器：

当然它的马甲们用法也是大同小异，主界面是这样的：

开启捕获，同意下载多个文件，然后播放视频，耐心等待。

心急的朋友可以用修改播放速度的扩展（如 视频加速减速控制），例如我用 10 倍速，那么一个小时的视频用六分钟就播放完成了。

等小浮框提示“捕获完成 点击下载”的时候就可以保存到磁盘上了。

第二步：音频修复

下载后它会有两个 .mp4 文件保存到电脑上，其中较大的是视频部分，较小的是音频部分。

但是有个小问题是，这个音频文件用 Windows 自带播放器播放正常，用 potplayer 等第三方播放器或者一些视频编辑软件播放就会有问题，不知道是不是我在虚拟机操作不认声卡的原因。

我在 Microsoft Store 中找了一款叫 Movie Maker - Video Editor 的应用，

在这个软件中添加刚才的只有音轨的视频文件会提示转码，转码后的 .mp4 文件音轨就正常了。

具体步骤是依次点击“Create New Project”，“Add clip”，“Photo/Video”，选择文件后“Transcode”，保存以后默认会在文件名后加上“ (Transcoded).mp4”。

第三步：音视频合成

接下来是合成视频和音频，视频文件我命名为 v.mp4，音频文件我命名为 a.mp4。

在 FFmpeg 官网下载 Windows 版，然后使用这个命令从音频文件中提取音轨：

ffmpeg -i a.mp4 -vn -acodec copy a.aac

再用这个命令将 v.mp4 的视频和 a.aac 的音频合成一个新的文件

ffmpeg -i v.mp4 -i a.aac -c:v copy -c:a copy -map 0:v:0 -map 1:a:0 output.mp4

相比于其它的视频转换工具，ffmpeg 直接提取合并的速度是极快的。

Tips：

• 小鹅通中学习过的课程再次打开会从上次关闭的地方开始播放，这会导致捕获不全，可以将进度条手动拖到末尾，这样它会停止播放，再次刷新就会从头开始播放。

• 浮框中“点击下载”可能没反应，估计是在合成文件，过几秒钟多点几下，不会重复下载。

• 如果要下载的视频比较长或者比较多，可以像我一样在虚拟机里进行，把视频播放器的音量开到最大，把操作系统的声音关闭。

不知道从哪个版本的 Chrome 或 Edge 开始，我们无法通过 ctrl+v 快捷键将时间格式的字符串粘贴到 type 为 date 的 input 框中，我们想办法用 JS 来实现。

方式一、监听 paste 事件：

const input = document.querySelector('input[type="date"]');
input.addEventListener('paste', (event) => {
    input.value = event.clipboardData.getData('text');
});

这段代码实现了从页面获取这个 input 元素，监听它的 paste 事件，然后将粘贴板的文本内容赋值给 input。

经测试，当焦点在“年”的位置时可以粘贴成功，但焦点在“月”或“日”上不会触发 paste 事件。

方式二、监听 keydown 事件：

const input = document.querySelector('input[type="date"]');
input.addEventListener('keydown', (event) => {
    if ((navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey) && event.key === 'v') {
        event.preventDefault();
        var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
        input.value = clipboardData.getData('text');
    }
});

测试发现报错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'getData')

Uncaught TypeError: Cannot read properties of undefined (reading 'clipboardData')

看来 event 中没有 clipboardData 对象，改为从 window.navigator 获取：

const input = document.querySelector('input[type="date"]');
input.addEventListener('keydown', (event) => {
    if ((navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey) && event.key === 'v') {
        event.preventDefault();
        window.navigator.clipboard.readText().then(text => {
            input.value = text;
        });
    }
});

缺点是需要用户授权：

仅第一次需要授权，如果用户拒绝，那么以后就默认拒绝了。

以上两种方式各有优缺点，选择一种适合你的方案就行。接下来继续完善。

兼容更多时间格式，并调整时区

<input type="date" /> 默认的日期格式是 yyyy-MM-dd，如果要兼容 yyyy-M-d 等格式，那么：

const parsedDate = new Date(text);
if (!isNaN(parsedDate.getTime())) {
    input.value = parsedDate.toLocaleDateString('en-GB', { year: 'numeric', month: '2-digit', day: '2-digit' }).split('/').reverse().join('-');
}

以 text 为“2023-4-20”举例，先转为 Date，如果成功，再转为英国时间格式“20-04-2023”，以“/”分隔，逆序，再以“-”连接，就变成了“2023-04-20”。

当然如果希望支持中文的年月日，可以先用正则表达式替换一下：

text = text.replace(/\s*(\d{4})\s*年\s*(\d{1,2})\s*月\s*(\d{1,2})\s*日\s*/, "$1-$2-$3");

处理页面上的所有 <input type="date" />

const inputs = document.querySelectorAll('input[type="date"]');
inputs.forEach((input) => {
    input.addEventListener(...);
});

封装为独立域

避免全局变量污染，使用 IIFE 函数表达式：

(function() {
  // 将代码放在这里
})();

或者封装为函数，在 jQuery 的 ready 中，或 Vue 的 mounted 中调用。

在 Vue 中使用

如果将粘贴板的值直接赋值到 input.value，在 Vue 中是不能同步更新 v-model 绑定的变量的，所以需要直接赋值给变量：

<div id="app">
    <input type="date" v-model="a" data-model="a" v-on:paste="fn_pasteToDateInput" />
    {{a}}
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const app = Vue.createApp({
        data: function () {
            return {
                a: null,
            }
        },
        methods: {
            fn_pasteToDateInput: function (event) {
                const text = event.clipboardData.getData('text');
                const parsedDate = new Date(text);
                if (!isNaN(parsedDate.getTime())) {
                    const att = event.target.getAttribute('data-model');
                    this[att] = parsedDate.toLocaleDateString('en-GB', { year: 'numeric', month: '2-digit', day: '2-digit' }).split('/').reverse().join('-');
                }
            },
        }
    });
    const vm = app.mount('#app');
</script>

示例中 <input /> 添加了 data- 属性，值同 v-model，并使用 getAttribute() 获取，利用 this 对象的属性名赋值。 

如果你的 a 中还有嵌套对象 b，那么 data- 属性填写 a.b，方法中以“.”分割逐级查找对象并赋值

let atts = att.split('.');
let target = this;
for (let i = 0; i < atts.length - 1; i++) {
    target = target[atts[i]];
}
this.$set(target, atts[atts.length - 1], text);

User-Agent 字符串不会进行更新以区分 Windows 11 和 Windows 10。

但我们可以使用 JS 进行客户端判断是否为 Windows 11：

navigator.userAgentData.getHighEntropyValues(["platformVersion"])
 .then(ua => {
   if (navigator.userAgentData.platform === "Windows") {
     const majorPlatformVersion = parseInt(ua.platformVersion.split('.')[0]);
     if (majorPlatformVersion >= 13) {
       console.log("Windows 11 or later");
      }
      else if (majorPlatformVersion > 0) {
        console.log("Windows 10");
      }
      else {
        console.log("Before Windows 10");
      }
   }
   else {
     console.log("Not running on Windows");
   }
 });

支持客户端提示 User-Agent 浏览器：

本文写于 2021 年 7 月。

WebBrowser 不能改用 Chrome 内核。

在 .NET Frameworks 和 .NET Core 年代，常用的第三方组件有：WebKit.NET、CefSharp 等。

而并未找到适用于 .NET 5 的成熟的 Chromium 内核的浏览器组件。

不过还是推荐一款微软官方出品的 WebView2，需要安装 Microsoft Edge Canary 才能正常运行。

在升级 kernel 后若无法启动系统，网站无法打开，SSH 无法连接，无法 ping 通。

使用 VNC 进入操作界面：

一种界面是可选择次新的内核版本：

应该能正常启动。

另一种界面提示：

Give root password for maintenance

输入密码后可启动。

阿里云工程师的建议：

1、当前默认是以最新内核启动的，由于新版内核文件存在异常无法正常运行，在手动选择低内核版本启动后，可以先更改下默认内核引导顺序，配置默认使用低版本内核运行，避免重启再次出现问题。 修改内核引导顺序 https://help.aliyun.com/knowledge_detail/41463.html 2、升级内核本身属于高危操作，建议操作前先做好快照备份，同时更新时可以参考下文档方案 避免Linux实例升级内核系统无法启动的方法 https://help.aliyun.com/knowledge_detail/59360.html

刚开始，新增了名为 video 的用户群组，新增了名为 tv 的用户帐号，关联到这个群组，是能够在 DS video 中登录的。但今天登录却提示：

帐号或密码有误。请再试一次。

在勾选了这个帐号的所有权限和应用程序仍然无果后，尝试关联到 administrators 群组能正常登录。当然为了安全性，这个群组是不能随便关联的。

查阅了官网关于 DS video 的文档 https://www.synology.com/zh-cn/knowledgebase/Mobile/help/DSvideo，如果登录失败，请进行以下操作：请以 admin（或属于 administrators 群组的用户）的身份登录到 DSM，然后进入控制面板 > 权限以检查用户帐户是否有使用 Video Station 的权限。

既然官方建议使用 administrators 群组，那基本上没有其它的好办法了。

tv 帐号关联到 administrators 群组，并将所有权限“禁止访问”，将除“Video Station”外的所有其它应用程序设置为“拒绝”。

最后，尝试在 DSM 上登录 tv 帐号，提示：

您没有权限使用本项服务。

那就放心了。

在 MozillaWiki 中推荐了三种配置，分别是现代兼容性、中级兼容性（默认）和旧的向后兼容性。

现代兼容性
对于不需要向后兼容性的服务，以下参数提供更高级别的安全性。 此配置与 Windows 7，Edge，Opera 17，Safari 9，Android 5.0 和 Java 8 上的 Firefox 27，Chrome 30，IE 11 兼容。

listen 443 ssl http2;
ssl_protocols TLSv1.2;
ssl_ciphers ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256;

中级兼容性（默认）
对于不需要与旧客户端（主要是 WinXP）兼容但仍需要支持各种客户端的服务，建议使用此配置。 它与 Firefox 1，Chrome 1，IE 7，Opera 5 和 Safari 1 兼容。（推荐）

listen 443 ssl http2;
ssl_protocols TLSv1.2 TLSv1.1 TLSv1;
ssl_ciphers ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA:ECDHE-RSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-RSA-AES256-SHA256:DHE-RSA-AES256-SHA:ECDHE-ECDSA-DES-CBC3-SHA:ECDHE-RSA-DES-CBC3-SHA:EDH-RSA-DES-CBC3-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:DES-CBC3-SHA:!DSS;

旧的向后兼容性
这是旧的密码组件，它主要工作在 Windows XP / IE6 中，如果不是特别需要，建议放弃此配置。

listen 443 ssl http2;
ssl_protocols TLSv1.2 TLSv1.1 TLSv1 SSLv3;
ssl_ciphers ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-DSS-AES128-GCM-SHA256:kEDH+AESGCM:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA:ECDHE-ECDSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-DSS-AES128-SHA256:DHE-RSA-AES256-SHA256:DHE-DSS-AES256-SHA:DHE-RSA-AES256-SHA:ECDHE-RSA-DES-CBC3-SHA:ECDHE-ECDSA-DES-CBC3-SHA:EDH-RSA-DES-CBC3-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:AES:DES-CBC3-SHA:HIGH:SEED:!aNULL:!eNULL:!EXPORT:!DES:!RC4:!MD5:!PSK:!RSAPSK:!aDH:!aECDH:!EDH-DSS-DES-CBC3-SHA:!KRB5-DES-CBC3-SHA:!SRP;

一般情况下，使用中级兼容性（默认）的配置即可启用 HTTP2，你还可以通过 mozilla 的 Server side TLS Tools 根据你的服务器进行详细配置。

新项目上线，在 Windows XP 中使用 IE 访问网站，http 正常， https 提示“无法显示网页”，这是因为当前电脑不支持网站提供的 SSL 协议。遂简单整理了各 IE 版本在不同操作系统下 SSL/TLS 的支持情况，表格仅供参考，可能会因特殊情况而有所不同：

几个注意点：

• 宝塔面板（5.9.0）不支持 SSL 3.0 和 TLS 1.0，官方说已经恢复了 TLS 1.0 的支持，但我在 ssl_protocols 中添加 TLSv1 仍然不生效。后参考此文配置成功（同时更改 ssl_protocols 和 ssl_ciphers 项）

• 详细的支持请前往 MySSL.com 检测，“客户端握手模拟”小节中查看各操作系统和浏览器版本的测试结果

Dark Mode 亦称为 暗黑模式、黑暗模式、暗色模式、黑夜模式、深夜模式、夜间模式 等，以下介绍几种常用软件的 Dark Mode 的设置方法。

iOS：

【iOS 13+】在 设置 - 显示与亮度 - 选择“深色”

【iOS 11+】在 设置 - 通用 - 辅助功能 - 显示调节 - 反转颜色 中开启“智能反转”。

“智能反转”缺点：第三方应用上显示的图片会以“经典反转”的方式展示。

Android：

设置 - 显示 - 主题模式，选择“暗色主题”

版本支持：Android 9.0 - Pie（Android P）

macOS：

系统偏好设置 - 通用 - 外观，低版本系统中勾选“使用暗色菜单栏和 Dock”，高版本系统中直接点击预览图选择主题。

版本支持：在 OS X Yosemite 10.10 中提供支持，在 macOS Mojave 10.14 中全新升级。

Windows：

桌面右键“个性化”（或从 Windows 设置中打开），在“颜色”选项卡，选择默认应用模式“暗”。

版本支持：Windows 10 October 2018 Update（版本 1809）

Microsoft Office：

文件 - 选项 - 常规 - Office 主题：黑色

在一个组件中设置后（如 Word），会在其它的组件中同时生效（如 Excel）。但 Visio 没有“黑色”主题（至少在 2019 中），我尝试更改为“深灰色”，Word 也变为“深灰色”，然后在未关闭 Visio 的情况下再次更改 Word 为“黑色”，Visio 界面竟然也变成了“黑色”，设置选项中为空白。

版本支持：Office 2016

Adobe Photoshop：

点开 菜单：编辑 - 首选项 - 界面，根据自已喜爱更改颜色方案。

版本支持：Photoshop CS6（可能更早），新版中已默认启用

CorelDRAW：

点开菜单：工具 - 选项，左侧展开 工作区 - 外观，主题选择“暗”或“黑体”。

版本支持：CorelDRAW X8（可能更早）

Microsoft Visual Studio：

点开菜单：工具 - 选项 即可更改颜色主题为“深色”（左侧选项卡为 环境-常规）。 

版本支持：Visual Studio 2012

微信开发者工具：

点开菜单：设置 - 外观设置，选择“深色主题”

仅在文件代码面板有效

Microsoft Edge：

设置 - 自定义 - 选择一个模式 - 暗

Chrome：

在 Chrome 74 版本中支持。

其开发者工具（F12）早在 50 版本中已提供 Dark 主题，在开发者工具右上角展开竖状三点图标 - Settings - Theme: Dark

Windows 的 Chrome 的 Dark 模式无需设置，会根据 Windows 自身是否为暗模式来调整。

因其 Dark 模式不容易区分当前标签页，如需禁用 Dark 模式，参此文

Adobe Acrobat Reader DC：

点开菜单：视图 - 显示主题 - 深灰

HBuilder X：

点开菜单：工具 - 主题 - 酷黑

Code Write：

设置 - Editor - Theme - Dark（默认已启用）