一、背景
起因 最近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展示到输入框，并作为二维码组件的输入属性。
代码语言：javascript复制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 || '';
})();
});
复制代码
