关于svelte:使用Svelte开发Chrome-Extension

一、背景
起因 最近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 || '';

})();
});
复制代码