共计 1757 个字符，预计需要花费 5 分钟才能阅读完成。
一、背景
起因 最近 Chrome 浏览器降级到 96 大版本后，二维码入口从地址栏挪动至二级菜单。这对 H5 前端开发来说不太敌对，每次须要页面二维码时都须要多点两下(*~︿~)。
因而萌发了开发一个二维码 Chrome Extension 的想法 (@~ー~@)。
通过多方技术选型（React、原生、Vue、Svelte 等），最终抉择 Svelte，起因是
语法简略，心智累赘小
运行时代码少，打包体积小
响应式
d=====(~▽~*)，接下来就开始 Svelte × Chrome Extension 之旅。
二、创立 & 开发
2.1 我的项目创立
2.1.1 我的项目初始化
应用 Svelte Kit 新建我的项目 npm“ init svelte@next qrcode-extension，目录构造如下：
src：源文件目录
lib：组件库等
routes：约定式路由文件
app.html：入口模板文件
static：动态文件目录
svelte.config.js：svelte 配置
初始化我的项目之后能够间接 npm“ run dev 启动。
2.1.2 反对插件开发
manifest 文件
Extensions are built on web technologies such as HTML, JavaScript, and CSS.
—— Chrome 开发文档
Chrome 插件实质上是以 manifest.json 为入口规定的一系列前端资源汇合，基于 Chrome 浏览器提供的 API，实现各种性能。
因而在我的项目的动态资源文件目录中增加 manifest.json 文件：
{
“name”: “QrCode”,
“description”: “A simple qrcode extension powered by Svelte”,
“version”: “1.0”,
“manifest_version”: 3,
“permissions”: [“tabs”, “downloads”],
“action”: {
"default_popup": "index.html"},
“icons”: {
"16": "/images/qrcode-16.png",
"32": "/images/qrcode-32.png",
"48": "/images/qrcode-48.png",
"128": "/images/qrcode-128.png"}
}
复制代码
几个比拟重要的字段：
MV3 文件格式参考
manifest_version：manifest 版本，之前为 Manifest V2(MV2)，Chrome 举荐应用 Manifest V3(MV3)
permissions：扩大要应用的浏览器权限，大部分 Chrome 扩大 API 均有权限依赖
action：定义插件操作行为对应的页面
default_popup：点击插件图标时的页面
icons：插件图标
增加 chrome 类型定义
装置 @types/chrome 到 devDependencies，并在 tsconfig.json#compilerOptions#types 中增加 chrome 类型。
2.2 性能开发
2.2.1 需要拆分
参考 Chrome 浏览器二维码性能：
2.2.2 链接展现
须要获取 Chrome 浏览器以后关上的 tab，查阅开发文档可知对应 API 为 chrome.tabs，并在 manifest.json#permissions 增加 tabs 权限申明。
在首页加载时，获取以后 tab 的 url，url 展现到输入框，并作为二维码组件的输出属性。
async function getCurrentTab() {
if (typeof chrome === ‘undefined’ || typeof chrome.tabs === ‘undefined’) {
return {url: ''};}
let queryOptions = {active: true, currentWindow: true};
let [tab] = await chrome.tabs.query(queryOptions);
return tab;
}
import {onMount} from ‘svelte’;
let url = ”;
// get current tab’s url
onMount(() => {
(async () => {
const tab = await getCurrentTab();
url = tab.url || '';})();
});
复制代码