使用Svelte开发Chrome Extension
大 厂 技 术 坚 持 周 更 精 选 好 文
一、背景
起因最近Chrome浏览器升级到96大版本后,二维码入口从地址栏移动至二级菜单。这对H5前端开发来说不太友好,每次需要页面二维码时都需要多点两下(* ̄︿ ̄)。
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b51dc844843ee2de62597ae43544940ac85ab6089785800ec207a1ffee2501efc.jpg)
因此萌生了开发一个二维码Chrome Extension的想法(@ ̄ー ̄@)。
经过多方技术选型(React、原生、Vue、Svelte等),最终选择 Svelte [1] ,原因是
-
语法简单,心智负担小
-
运行时代码少,打包体积小
-
响应式
d=====( ̄▽ ̄*),接下来就开始Svelte × Chrome Extension之旅。
二、创建&开发
2.1 项目创建
2.1.1 项目初始化
使用 Svelte Kit
[2]
新建项目 npm init svelte@next qrcode-extension
,目录结构如下:
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b8c72f8be5ceae4aff8dcdbe173fba5a084ca022e07db9401b890b18821624d5f.jpg)
-
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开发文档 [3]
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文件格式参考 [4]
-
manifest_version
:manifest版本,之前为Manifest V2(MV2),Chrome推荐使用Manifest V3(MV3)
-
permissions
:扩展要使用的浏览器权限,大部分 Chrome扩展API [5] 均有权限依赖
-
action
:定义插件操作行为对应的页面 -
default_popup
:点击插件图标时的页面
-
icons
:插件图标
-
添加chrome类型定义
安装 @types/chrome
到devDependencies,并在 tsconfig.json#compilerOptions#types
中添加chrome类型。
2.2 功能开发
2.2.1 需求拆分
参考Chrome浏览器二维码功能:
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393d6dbb4c0fa90c9e5eeb1772862da8133cc21aebd1a4b638e52fc97438b7519d8.jpg)
2.2.2 链接展示
需要获取Chrome浏览器当前打开的tab,查阅 开发文档
[6]
可知对应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 || '';
})();
});
2.2.3 Svelte组件
二维码组件代码定义在 libs/QrCode.svelte
中。
-
组件代码
Svelte与vue类似,提供单文件组件。包括三部分:
-
<script></script>
:js/ts业务逻辑
-
html:组件html模板
-
<style></style>
:css样式,编译时自动做样式隔离
组件详细代码如下所示,使用qrcode库生成二维码。
<script lang="ts">
import { toDataURL } from 'qrcode';
import type { QRCodeToDataURLOptions } from 'qrcode';
import { writable } from 'svelte/store';
import { createEventDispatcher } from 'svelte';
// 输入属性
export let text;
export let option: QRCodeToDataURLOptions = {
type: 'image/png',
margin: 2,
width: 240
};
const dataUrl = writable('');
const dispatch = createEventDispatcher();
// 响应式
$: {
if (text) {
toDataURL(text, option).then((url) => {
dataUrl.set(url);
// 派发组件事件
dispatch('ready', { url });
});
} else {
dataUrl.set('');
}
}
</script>
<div class="qrcode">
{#if $dataUrl}
<img src={$dataUrl} alt="qrcode">
{/if}
</div>
<style>
.qrcode {
width: 240px;
height: 240px;
border: 2px solid #e8eaed;
border-radius: 10px;
background: #f1f3f4;
}
img {
width: 100%;
height: auto;
border-radius: 10px;
}
</style>
-
生命周期
-
onMount:组件已挂载到DOM上(SSR时不执行)
-
beforeUpdate:组件状态变更时立即执行,第一次会在onMount之前执行
-
afterUpdate:组件更新后
-
onDestroy:组件卸载(如onMount返回函数,则会执行)
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b05ff845965c3ad1a07be3c87ff1f0d840fbf6f9ed235177164ef1f006c87cb7c.jpg)
-
输入/输出
组件中通过 export
声明输入属性。
export let text;
export let option: QRCodeToDataURLOptions = {
type: 'image/png',
margin: 2,
width: 240
};
使用 createEventDispatcher
创建事件,当生成二维码图片base64时,触发ready事件。
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
dispatch('ready', { url });
-
响应式
参考: svelte响应式代码块 [7]
利用label语法声明响应式逻辑,当输入属性text变化时更新二维码内容。
$: {
if (text) {
toDataURL(text, option).then((url) => {
dataUrl.set(url);
dispatch('ready', { url });
});
} else {
dataUrl.set('');
}
}
2.2.4 二维码下载
下载对应的Chrome API为 chrome.downloads
,同样在 manifest.json#permissions
添加downloads权限声明。
监听二维码组件ready事件,并更新dataUrl。点击下载按钮时触发二维码下载。
function downloadQrCode() {
if (!dataUrl) {
return;
}
chrome.downloads?.download({
url: dataUrl,
filename: getFilename(url),
});
}
<button class="qrcode-download" on:click={downloadQrCode}>下载</button>
三、调试&构建
3.1 构建
Before you can deploy your SvelteKit app, you need to adapt it for your deployment target. Adapters are small plugins that take the built app as input and generate output for deployment.
—— Svelte Adapter [8]
Svelte使用adapter转换编译产物,默认提供的adapter是 @sveltejs/adapter-auto
,需要配置打包目标平台(Vercel、Cloudflare、Netlify)。一般使用 @sveltejs/adapter-static
打包静态产物。
默认打包路径为 build
,static文件夹下的静态资源会打包到根路径。
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b72ee061a8ceb6dc41a9cbe8d6f824a2e7710ab19ed98a61ed4e6a984e1064605.jpg)
但用Chrome加载这个产物作为插件会报错,
ERROR Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-ri/Klr/GKqsTbCFK6rSYKj7VDIccXQJeipKxBmqg69g='), or a nonce ('nonce-...') is required to enable inline execution.
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b1518aab492157a9c8c7739830da4ad4a022aab0cb1f29c31a5d9ec948ea1fced.jpg)
原因是违反CSP策略, index.html
使用了内联script脚本,而这个文件是打包时动态生成的,错误中提到的unsafe-inline关键字或nonce-等方法在MV3中均不支持。
解决方案编译后匹配所有html文件中的内联脚本,将内联脚本内容写入js文件,并在html文件中替换为sctipt标签。自定义adapter完成产物转换操作。
import type { Adapter } from '@sveltejs/kit';
import * as glob from 'fast-glob';
import { readFileSync, writeFileSync } from 'fs';
import { dirname, join } from 'path';
interface Props {
/** dest for extension package dir */ dest: string;
}
function uuid() {
return Math.random().toString(36).slice(2);
}
function handleHtml(htmlPath, scriptTag) {
const html = readFileSync(htmlPath).toString();
const matchReg = /<script\b[^>]*>([\s\S]*)</script>/gm;
const result = matchReg.exec(html);
return result && result[1]
? {
html: html.replace(matchReg, scriptTag),
script: result[1],
}
: null;
}
export function extensionAdapter({ dest }: Props): Adapter {
return {
name: 'crx-adapter',
async adapt({ utils }) {
utils.rimraf(dest);
utils.copy_static_files(dest);
utils.copy_client_files(dest);
utils.rimraf(join(dest, '_app'));
await utils.prerender({ all: true, dest: dest });
const fileNames = await glob(join(dest, '**', '*.html'));
for (const fileName of fileNames) {
const dir = dirname(fileName);
const scriptFileName = `start-${uuid()}.js`;
const res = handleHtml(
fileName,
`<script type="module" src="/${scriptFileName}"></script>`,
);
if (res) {
writeFileSync(fileName, res.html);
writeFileSync(join(dir, scriptFileName), res.script);
}
}
},
};
}
3.2 调试
产物打包好后,打开Chrome浏览器,进入chrome://extensions/
-
点击“加载已解压的扩展程序”,选择打包目录以加载插件
-
当产物更新时,重新build并刷新插件即可
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b8935d71746a6e8a7576f761d0050606d1e26e23455a9cec8647dad4138bd63b9.jpg)
3.3 效果
最终效果如下,在网页中点击插件按钮,即显示对应二维码。
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4bf36969759555c450445a725c3ed9ca1835ea12c9de805c698f7a1d89e97920e6.jpg)
对比一下:
Chrome自带 | qrcode-extension |
---|---|
![]() |
![]() |
四、总结
本文主要工作如下:
-
使用Svelte开发二维码Chrome Extension
-
自定义Svelte Adapter适配Chrome插件安全策略
参考资料
Svelte: http://svelte.dev/
Svelte Kit: http://kit.svelte.dev/
Chrome开发文档: http://developer.chrome.com/docs/extensions/mv3/overview/
MV3文件格式参考: http://developer.chrome.com/docs/extensions/mv3/manifest/
Chrome扩展API: http://developer.chrome.com/docs/extensions/reference/
开发文档: http://developer.chrome.com/docs/extensions/reference/#stable_apis
svelte响应式代码块: http://svelte.dev/docs#component-format-script-3-$-marks-a-statement-as-reactive
Svelte Adapter: http://kit.svelte.dev/docs#adapters
:heart: 谢谢支持
以上便是本次分享的全部内容,希望对你有所帮助^_^
喜欢的话别忘了 分享、点赞、收藏 三连哦~。
欢迎关注公众号 ELab团队 收获大厂一手好文章~
我们来自字节跳动,是旗下大力教育前端部门,负责字节跳动教育全线产品前端开发工作。
我们围绕产品品质提升、开发效率、创意与前沿技术等方向沉淀与传播专业知识及案例,为业界贡献经验价值。包括但不限于性能监控、组件库、多端技术、Serverless、可视化搭建、音视频、人工智能、产品设计与营销等内容。
欢迎感兴趣的同学在评论区或使用内推码内推到作者部门拍砖哦
字节跳动校/社招投递链接:
http://job.toutiao.com/s/FtGqRb6
内推码: 8BSWTYU
- 使用 WebAssembly 打造定制 JS Runtime
- 前端也要懂算法,不会算法也能微调一个 NLP 预训练模型
- 联机游戏原理入门即入土 -- 入门篇
- Plasmo Framework:次世代的浏览器插件开发框架
- 深入理解 Mocha 测试框架:从零实现一个 Mocha
- Single Source of Truth:XCode SwiftUI 的界面编辑的设计理念
- 深入理解 D3.js 可视化库之力导向图原理与实现
- 浅析神经网络 Neural Networks
- Cutter - Web视频剪辑工具原理浅析
- 你可能需要一个四舍五入的工具函数
- 浅析eslint原理
- 最小编译器the-super-tiny-compiler
- Git存储原理及部分实现
- 浅谈短链的设计
- Web组件构建库-Lit
- 使用Svelte开发Chrome Extension
- Web3.0开发入门
- vscode插件原理浅析与实战
- 深入浅出 Web Audio API
- 探秘HTTPS