Entwicklung von Chrome-Erweiterungen mit Svelte

1. Hintergrund

Ursache Nachdem der Chrome-Browser kürzlich auf Version 96 aktualisiert wurde, wurde der QR-Code-Eintrag von der Adressleiste in das sekundäre Menü verschoben. Dies ist nicht sehr freundlich für die H5-Frontend-Entwicklung, und jedes Mal, wenn Sie einen Seiten-QR-Code benötigen, müssen Sie zweimal klicken (*￣︿￣).

Daher wurde die Idee geboren, eine QR-Code Chrome Extension zu entwickeln (＠￣ー￣＠).

Nach mehreren technischen Auswahlen (React, native, Vue, Svelte usw.) habe ich mich schließlich für Svelte entschieden, weil

• Einfache Grammatik, geringe mentale Belastung

• Weniger Laufzeitcode, kleine Paketgröße

• Reaktionsschnell

d======(￣▽￣*), dann starten Sie die Reise von Svelte × Chrome Extension.

2. Erstellen und entwickeln

2.1 Projekterstellung

2.1.1 Projektinitialisierung

Verwenden Sie Svelte Kit , um ein neues Projekt npm`` init svelte@next qrcode-extension mit der folgenden Verzeichnisstruktur zu erstellen:

• src: Quelldateiverzeichnis

  • lib: Komponentenbibliothek usw.
  • routes: Herkömmliche Routing-Datei
  • app.html: Eintragsvorlagendatei

• static: statisches Dateiverzeichnis

• svelte.config.js:schlanke Konfiguration

Es kann direkt nach der Initialisierung des Projekts gestartet werden npm`` run dev .

2.1.2 Unterstützung der Plug-in-Entwicklung

1. manifest-Datei

Erweiterungen basieren auf Webtechnologien wie HTML, JavaScript und CSS.

- Chrome-Entwicklerdokumentation

1. Chrome-Plug-ins sind manifest.jsonim Wesentlichen eine Reihe von Front-End-Ressourcensammlungen, die für den Eintrag angegeben sind, und implementieren verschiedene Funktionen basierend auf der vom Chrome-Browser bereitgestellten API.

Fügen Sie also die Datei im Verzeichnis der statischen Ressourcendateien Ihres Projekts hinzu 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"
  }
}
复制代码

Noch ein paar wichtige Felder:

Referenz zum MV3-Dateiformat

• manifest_version: Manifest-Version, vorher Manifest V2 (MV2), Chrome empfiehlt Manifest V3 (MV3)

• permissions：扩展要使用的浏览器权限，大部分Chrome扩展API均有权限依赖

• action：定义插件操作行为对应的页面

  • default_popup：点击插件图标时的页面

• icons：插件图标

2. 添加chrome类型定义

1. 安装@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 || '';
  })();
});
复制代码

2.2.3 Svelte组件

二维码组件代码定义在libs/QrCode.svelte中。

1. 组件代码

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>
复制代码

2. 生命周期

• onMount：组件已挂载到DOM上（SSR时不执行）

• beforeUpdate：组件状态变更时立即执行，第一次会在onMount之前执行

• afterUpdate：组件更新后

• onDestroy：组件卸载（如onMount返回函数，则会执行）

3. 输入/输出

1. 组件中通过export声明输入属性。

export let text;
export let option: QRCodeToDataURLOptions = {
  type: 'image/png',
  margin: 2,
  width: 240
};
复制代码

1. 使用createEventDispatcher创建事件，当生成二维码图片base64时，触发ready事件。

import { createEventDispatcher } from 'svelte';

const dispatch = createEventDispatcher();

dispatch('ready', { url });
复制代码

4. 响应式

1. 参考：svelte响应式代码块

1. 利用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

Svelte使用adapter转换编译产物，默认提供的adapter是@sveltejs/adapter-auto，需要配置打包目标平台（Vercel、Cloudflare、Netlify）。一般使用@sveltejs/adapter-static打包静态产物。

默认打包路径为build，static文件夹下的静态资源会打包到根路径。

但用Chrome加载这个产物作为插件会报错，

FEHLER Die Ausführung des Inline-Skripts wurde abgelehnt, da es gegen die folgende Richtlinie zur Inhaltssicherheit verstößt: „script-src 'self'“. Entweder das Schlüsselwort „unsafe-inline“, ein Hash („sha256-ri/Klr/GKqsTbCFK6rSYKj7VDIccXQJeipKxBmqg69g=“) oder ein Nonce („nonce-...“) ist erforderlich, um die Inline-Ausführung zu ermöglichen.

Der Grund dafür ist, dass es gegen die CSP-Richtlinie verstößt und index.htmlein Inline-Skriptskript verwendet, und diese Datei während des Packens dynamisch generiert wird.Das Schlüsselwort „unsafe-inline“ oder nonce- und andere im Fehler erwähnte Methoden werden in MV3 nicht unterstützt.

Lösung Gleichen Sie nach dem Kompilieren alle Inline-Skripte in HTML-Dateien ab, schreiben Sie den Inhalt von Inline-Skripten in js-Dateien und ersetzen Sie sie durch Sctipt-Tags in HTML-Dateien. Passen Sie den Adapter an, um den Produktkonvertierungsvorgang abzuschließen.

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 Debuggen

Öffnen Sie nach dem Verpacken des Produkts den Chrome-Browser und geben Sie chrome://extensions/ ein.

• Klicken Sie auf „Entpackte Erweiterung laden“ und wählen Sie das Paketverzeichnis aus, um das Plugin zu laden

• Wenn das Produkt aktualisiert wird, erstellen und aktualisieren Sie das Plugin neu

3.3 Effekte

Der endgültige Effekt ist wie folgt: Klicken Sie auf die Plug-in-Schaltfläche auf der Webseite, um den entsprechenden QR-Code anzuzeigen.

Vergleichen:

Chrom kommt mit	QRCode-Erweiterung

4. Zusammenfassung

Die Hauptarbeit dieser Arbeit lautet wie folgt:

• Verwenden von Svelte zum Entwickeln von QR-Code-Chrome-Erweiterungen

• Passen Sie den Svelte-Adapter an die Sicherheitsrichtlinie des Chrome-Plug-ins an