使用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 支持插件开发

1. manifest文件

Extensions are built on web technologies such as HTML, JavaScript, and CSS.

—— Chrome开发文档

1. 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：插件图标

1. 添加chrome类型定义
2. 安装@types/chrome到devDependencies，并在tsconfig.json#compilerOptions#types中添加chrome类型。

2.2 功能开发

2.2.1 需求拆分

1. 参考Chrome浏览器二维码功能：

2.2.2 链接展示

1. 需要获取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 || '';
  })();
});
复制代码