RPCE用の高度な設定

VITEのためのRPCEは、我々が開発者使用ケースの良いサンプルを得るのに十分長いベータでした.問題を作成し、ディスカッションに参加して助けてくれたみんなに感謝!あなたの入力は非常に貴重です.
これらは、我々が守られた最も一般的な開発者の質問にいくつかの答えです.私はジャックスチーム、クリエイターrollup-plugin-chrome-extension , または短い間のRPCE.それで、あなたが余分なHTMLページを加えるのを見ているならば、構築時にマニフェストを広げて、新しいクロムスクリプトAPIを使用して、主なWorldスクリプトを注入してください、読んでください!

目次

Extra HTML pages

Dynamic manifest with TypeScript

Manifest icons and public assets

Web accessible resources

Dynamic content scripts

Injected main world scripts

余分のHTMLページ

マニフェストで宣言できないWebページを構築する必要があるのは、一般的です.たとえば、ユーザーがログインしたときにポップアップを変更したり、ユーザーが拡張モジュールをインストールしたときには歓迎ページを開きたい場合があります.Reveloper Developer ToolsのようなDevTool拡張子は、マニフェスト内の検査官パネルを宣言しません.
次のファイル構造とマニフェストを指定します.index.html and src/panel.html 開発中に利用可能ですが、プロダクションビルドでは使用できません.これを修正することができますvite.config.ts .

.
├── vite.config.ts
├── manifest.json
├── index.html
└── src/
    ├── devtools.html
    └── panel.html

// manifest.json
{
  "manifest_version": 3,
  "version": "1.0.0",
  "name": "example",
  "devtools_page": "src/devtools.html"
}

余分なHTMLページを構築するには、VITEドキュメントからMulti-Page Apps :

// vite.config.js
import { resolve } from 'path';
import { defineConfig } from 'vite';
import { chromeExtension } from 'rollup-plugin-chrome-extension';
import manifest from './manifest.json';

export default defineConfig({
  build: {
    rollupOptions: {
      // add any html pages here
      input: {
        // output file at '/index.html'
        welcome: resolve(__dirname, 'index.html'),
        // output file at '/src/panel.html'
        panel: resolve(__dirname, 'src/panel.html'),
      },
    },
  },
  plugins: [chromeExtension({ manifest })],  
});

ダイナミックマニフェスト

RPCEはマニフェストを設定オプションとして扱い、ビルドプロセス中に変換します.さらに、マニフェストはJavaScriptオブジェクトであるため、マニフェストを拡張するいくつかのエキサイティングな方法が開きます.
あなたのマニフェストをタイプスクリプトで書くことを想像してください.開発と生産のために別の名前を使用してください.と同期してバージョン番号を保つpackage.json . 🤔
RPCEはdefineManifest Viteのような機能defineConfig 関数を実行し、ビルド時にマニフェストを拡張しやすくするために、IntelliSenseを提供します.

// manifest.config.ts

import { chromeExtension, defineManifest } from 'rollup-plugin-chrome-extension'
import { version } from './package.json'

const names = {
  build: 'My Extension',
  serve: '[INTERNAL] My Extension'
}

// import to `vite.config.ts`
export default defineManifest((config, env) => ({
  manifest_version: 3,
  name: names[env.command],
  version,
}))

マニフェストアイコンと公共資産

あなたがウェブサイトのためにViteを使ったならば、あなたはよく知られているかもしれませんthe public directory . Viteの内容をコピーするpublic を返します.
マニフェスト内のパブリックファイルを参照できます.RPCEが一致しているファイルを見つけなければpublic , それはthe Vite project root と出力ファイルに資産を追加します.
これはあなたのアイコンを入れて無料ですpublic またはどこか他のあなたに意味を作る!

// manifest.json 
{
  "icons": {
    // from src/icons/icon-16.png
    "16": "src/icons/icon-16.png",
    // from public/icons/icon-24.png 
    "24": "icons/icon-24.png"
  },
  "web_accessible_resources": [{
    matches: ['https://www.google.com/*'],
    // copies all png files in src/images
    resources: ["src/images/*.png"]
  }]
}

RPCEもマッチするファイルをコピーしますglobs インweb_accessible_resources .
RPCEはglobsを無視する* and **/* . おそらくコピーしたくないpackage.json アンド・オールnode_modules . 本当の質問は、ウェブサイトが拡張子の中のすべてのファイルにアクセスできるようにすることですか?
どのようなWebアクセスリソース、とにかく?

Webアクセス資源

Chrome拡張モジュールのファイルはデフォルトでプライベートです.拡張子がファイルicon.png , 拡張子のページはそれにアクセスすることができますが、ランダムなウェブサイト(それはウェブにアクセス可能なリソースではありません)はできません.拡張リソースをWebアクセス可能にするには、以下のマニフェスト内のファイルを宣言する必要がありますweb_accessible_resources .
コンテンツスクリプトでイメージを使用する場合はどうすればよいですか?それはウェブにアクセスしなければならない.なぜ?コンテンツスクリプトはホストページの起源を共有しますhttps://www.google.com からのリクエストと同じですhttps://www.google.com 自身.
それはあなたが使用しているすべてのファイルでマニフェストを更新するには退屈な取得することができます.我々は、ビルドツールを使用しているので、なぜマニュアル作業の束を行う?コンテンツスクリプトにイメージをインポートすると、自動的にマニフェストが更新されます.🪄✨
あなたがしなければならないすべてはchrome.runtime.getURL 拡張URLを生成するには、次の手順に従います

import logoPath from './logo.png'

const logo = document.createElement('img')
logo.src = chrome.runtime.getURL(logo)

これらのファイルは、コンテンツスクリプトが実行されるのと同じURLにアクセスできます.また、これらの資産使用a dynamic url , だから悪意のあるウェブサイトは、あなたの拡張機能を指紋にそれを使用することはできません!

ダイナミックコンテンツスクリプト

The Chrome Scripting API クロム拡張子の背景からコンテンツスクリプトを実行できます.
マニフェストには動的なコンテンツスクリプトを宣言する場所がありませんので、どうやってVITEを教えてくれますか?もちろん、私たちは余分なHTMLページのようなVITE Configにそれらを加えることができました、しかし、RPCEはどのように我々が追加スクリプトを内容スクリプトであるつもりであるということを知っていますか?RPCEが提供するHMRのユニークな味が必要ですか?Webアクセス資源について
RPCE固有のインポートクエリを使用して、コンテンツスクリプトへのインポートポイントを指定します.インポート名がクエリで終了すると?script , デフォルトのエクスポートは、コンテンツスクリプトの出力ファイル名です.その後、このファイル名をクロムスクリプトAPIで使用して、そのコンテンツスクリプトを実行し、VITE HMRから利益を得ることができます.

import scriptPath from './content-script?script'

chrome.action.onClicked.addListener((tab) => {  
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    files: [scriptPath]
  });
});

ダイナミックコンテンツスクリプトのリソースはデフォルトですべてのURLに利用できますが、defineDynamicResource 機能

import { defineManifest, defineDynamicResource } from 'rollup-plugin-chrome-extension'

export default defineManifest({
  ...manifest,
  web_accessible_resources: [
    defineDynamicResource({
      matches: ['https://www.google.com/*'],
    })
  ]
})

ワールドスクリプト

コンテンツスクリプトrun in an isolated world , しかし、スクリプトがホストページの実行環境を変更する必要があります.内容スクリプトは通常、彼らのホストページのDOMにスクリプトタグを加えることによってこれをします.他の内容スクリプト資産のように、主なWorldスクリプトはウェブでアクセス可能でなければなりません.
ダイナミックな内容スクリプト・インポートは私たちを閉じます?script VITE HMRを加えるローダーファイルを含みます.残念ながら、ローダはコンテンツAPIにのみ利用可能なchrome APIに依存しますそれは主要な世界実行環境で働きません.私たちが必要とするのは簡単なESモジュールです.
を使用してローダファイルをスキップすることができます?script&module インポートクエリ

// content-script.ts
import mainWorld from './main-world?script&module'

const script = document.createElement('script')
script.src = chrome.runtime.getURL(mainWorld)
script.type = 'module'
document.head.prepend(script)

今すぐそこに出て、グローバル変数を読んで、リクエストをフェッチし、あなたの心のコンテンツにクラスのプロトタイプを飾る!

ロードマップ

RPCEのロードマップの次のことは適切なドキュメントとより良いリリースプロセスです.しかし、心配しないで、我々は機能を追加し、バグを修正する行われていませんあなたは将来のコンテンツスクリプトとより良いVueサポートで影DOMを楽しみにすることができます.私は、SvelteとTarwindの公式サポートを加えることに非常に興奮しています!
RPCEがあなたの開発者経験を改善するならば、give us a star on GitHub またはまた会いましょう.