使用Svelte开发Chrome Extension

宅哥聊构架 工具 2022-05-28

一、背景

起因 最近Chrome浏览器升级到96大版本后,二维码入口从地址栏移动至二级菜单。这对H5前端开发来说不太友好,每次需要页面二维码时都需要多点两下(* ̄︿ ̄)。

使用Svelte开发Chrome Extension

因此萌生了开发一个二维码Chrome Extension的想法(@ ̄ー ̄@)。

经过多方技术选型(React、原生、Vue、Svelte等),最终选择Svelte,原因是

  • 语法简单,心智负担小
  • 运行时代码少,打包体积小
  • 响应式

d=====( ̄▽ ̄*),接下来就开始Svelte × Chrome Extension之旅。

二、创建&开发

2.1 项目创建

2.1.1 项目初始化

使用Svelte Kit新建项目npm`` init svelte@next qrcode-extension ,目录结构如下:

使用Svelte开发Chrome 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类型定义
  1. 安装@types/chrome到devDependencies,并在tsconfig.json#compilerOptions#types中添加chrome类型。

2.2 功能开发

2.2.1 需求拆分

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

使用Svelte开发Chrome Extension

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 || '';
  })();
});
复制代码


Apipost 私有化火热进行中

评论