今天，我将简要介绍如何在Sveltekit开发Chrome扩展。

向michmich112大声喊叫，以创建一个精美的Sveltekit适配器，这使它变得简单

入门

我们将从我为此目的创建的a template开始。

1. 使用您选择的浏览器https://github.com/LukeHagar/sveltekit-extension-template

打开此GitHub回购

2. 单击创建新存储库
   将存储库命名为无论您想要什么，这将是您项目的回购

3. 用git clone <your GitHub repository>
   克隆您的github存储库

4. 安装依赖项
   

   npm install
   

5. 启动开发服务器
   

   npm run dev
   

   
   现在应该运行开发服务器，您可以更改和更新以构建Chrome扩展。

添加扩展特定功能

Chrome扩展功能是通过chrome全局名称空间实现的。您可以使用以下条件语句验证代码正在以Chrome扩展为运行。

window.chrome && chrome.runtime && chrome.runtime.id

Chrome API具有不同事物的许多不同功能和值，包括限制您可以做的和不能做的权限值。该列表进一步详细介绍了here

目前，我们将专注于在NAV栏中添加一个简单的项目，该项目检测到扩展名是否在Chrome或Dev环境中运行。

1. 我们将从+layout.svelte文件开始。在脚本标签中，我们将为环境添加一个变量。
   

   let environment: string;
   

2. 然后，我们将在Sveltekit OnMount内部添加IF语句以构建我们想要的完整环境字符串。
   

   let environment: string;
   
   // This will trigger when running as an extension
   onMount(() => {
       if (window.chrome && chrome.runtime && chrome.runtime.id) {
           environment = 'Chrome Extension';
       }
   });
   

3. 接下来我们要添加其他值
   

   let environment: string;
   
   onMount(() => {
       if (window.chrome && chrome.runtime && chrome.runtime.id) {
           environment = 'Chrome Extension';
       } else {
           environment = 'Development';
       }
   });
   

   
   现在，我们有一个反映当前环境的变量。

4. 让我们将其添加到标题中。我们正在使用骨架的Appbar，因此我们将转到Appbar的默认插槽，这是两个Svelte：Fragments。
   之间的部分。
   

   <AppBar>
           <svelte:fragment slot="lead">
               <strong class="text-xl uppercase">Skeleton</strong>
           </svelte:fragment>
   
           //Right here
   
           <svelte:fragment slot="trail">
               <a
                   class="btn btn-sm variant-ghost-surface"
                   href="https://discord.gg/EXqV7W8MtY"
                   target="_blank"
                   rel="noreferrer"
               >
                   Discord
               </a>
               <a
                   class="btn btn-sm variant-ghost-surface"
                   href="https://twitter.com/SkeletonUI"
                   target="_blank"
                   rel="noreferrer"
               >
                   Twitter
               </a>
               <a
                   class="btn btn-sm variant-ghost-surface"
                   href="https://github.com/skeletonlabs/skeleton"
                   target="_blank"
                   rel="noreferrer"
               >
                   GitHub
               </a>
           </svelte:fragment>
       </AppBar>
   

   
   我将添加一个简单的<p>标签，以使变量坐在中。
   

       <AppBar>
           <svelte:fragment slot="lead">
               <strong class="text-xl uppercase">Skeleton</strong>
           </svelte:fragment>
   
           <p class="text-center">{environment}</p>
   
           <svelte:fragment slot="trail">
               <a
                   class="btn btn-sm variant-ghost-surface"
                   href="https://discord.gg/EXqV7W8MtY"
                   target="_blank"
                   rel="noreferrer"
               >
                   Discord
               </a>
               <a
                   class="btn btn-sm variant-ghost-surface"
                   href="https://twitter.com/SkeletonUI"
                   target="_blank"
                   rel="noreferrer"
               >
                   Twitter
               </a>
               <a
                   class="btn btn-sm variant-ghost-surface"
                   href="https://github.com/skeletonlabs/skeleton"
                   target="_blank"
                   rel="noreferrer"
               >
                   GitHub
               </a>
           </svelte:fragment>
       </AppBar>
   

   
   

5. 最后，我将运行npm run build，加载构建文件夹作为Chrome中的未包装扩展名，您可以看到变量反映正确的环境。

这是该示例项目https://github.com/LukeHagar/dev-extension-template-demo

建立生产项目

当您完成并想在Chrome中预览扩展时，您可以通过运行
来构建最终项目

npm run build

然后，创建的构建文件夹是您的扩展程序，您可以将其装在基于铬的浏览器的扩展菜单中，例如Vivaldi，Chrome，Chrome，Brave和Edge。

如果您有任何疑问或想聊天，我主要是在Skeleton discord server中进行聚会。

快乐的发展！