1.背景
原因最近Chromeブラウザをバージョン96にアップグレードした後、QRコードエントリがアドレスバーからセカンダリメニューに移動されました。これはH5フロントエンド開発にはあまり適していません。ページのQRコードが必要になるたびに、2回クリックする必要があります（* ￣︿￣）。
そのため、QRコードChrome拡張機能を開発するというアイデアが生まれました（＠￣ー￣ ＠）。
複数の技術的な選択（React、native、Vue、Svelteなど）の後、私は最終的にSvelteを選択しました。
- シンプルな文法、低い精神的負担
- ランタイムコードが少なく、パッケージサイズが小さい
- レスポンシブ
d ======（￣▽￣ *）次に、Svelte×Chrome拡張機能の旅を開始します。
2.作成および開発
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プラグイン開発をサポートする
- マニフェストファイル
拡張機能は、HTML、JavaScript、CSSなどのWebテクノロジーに基づいて構築されています。
-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"
}
}
复制代码さらにいくつかの重要なフィールド：
manifest_version：マニフェストバージョン、以前はマニフェストV2（MV2）、Chromeはマニフェスト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 || '';
})();
});
复制代码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返回函数，则会执行）
- 输入/输出
- 组件中通过
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响应式代码块
- 利用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转换编译产物，默认提供的adapter是@sveltejs/adapter-auto，需要配置打包目标平台（Vercel、Cloudflare、Netlify）。一般使用@sveltejs/adapter-static打包静态产物。
默认打包路径为build，static文件夹下的静态资源会打包到根路径。
但用Chrome加载这个产物作为插件会报错，
エラー次のコンテンツセキュリティポリシーディレクティブに違反しているため、インラインスクリプトの実行を拒否しました："script-src'self'"。インライン実行を有効にするには、'unsafe-inline'キーワード、ハッシュ（'sha256-ri / Klr / GKqsTbCFK6rSYKj7VDIccXQJeipKxBmqg69g ='）、またはナンス（'nonce -...'）のいずれかが必要です。
その理由は、CSPポリシーに違反index.htmlし、インラインスクリプトスクリプトを使用しており、このファイルはパッケージ化中に動的に生成されるためです。エラーに記載されているunsafe-inlineキーワードまたはnonce-およびその他のメソッドはMV3ではサポートされていません。
解決策コンパイル後、htmlファイル内のすべてのインラインスクリプトを照合し、インラインスクリプトのコンテンツをjsファイルに書き込み、htmlファイル内のsctiptタグに置き換えます。アダプターをカスタマイズして、製品変換操作を完了します。
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/と入力します。
- 「解凍された拡張機能をロード」をクリックし、プラグインをロードするパッケージディレクトリを選択します
- 製品が更新されたら、プラグインを再構築して更新します
3.3効果
最終的な効果は次のとおりです。Webページのプラグインボタンをクリックして、対応するQRコードを表示します。
比較：
| Chromeには | qrcode-extension |
|---|---|
4.まとめ
この論文の主な仕事は次のとおりです。
- Svelteを使用してQRコードを開発するChrome拡張機能
- Chromeプラグインのセキュリティポリシーに適応するようにSvelteアダプターをカスタマイズします