vite+ts构建搭建谷歌插件开发环境

最近，根据需求开发了一款谷歌插件。所用前端脚手架就是目前最火的vite，以及typescript.本文将着重介绍利用vite+ts的搭建谷歌插件开发的具体过程。很多教程都说的是谷歌扩展v2的配置，本文是 根据最新的谷歌扩展文档开发的v3的开发。

一、创建一个vite项目：

pnpm create vite

二、在 src资源目录里面文件配置

1、在src资源目录里面创建一个manifest.ts ，具体配置：

const manifest = {
  manifest_version: 3,
  homepage_url: 'https://demo.xxx.com',
  name: 'chome  extension demo ',
  description: 'This is a demo',
  version: '1.0',
  icons: {
    '16': 'icon/icon-16.png',
    '32': 'icon/icon-32.png',
    '48': 'icon/icon-48.png',
    '64': 'icon/icon-64.png',
    '128': 'icon/icon-128.png'
  },
  action: {
    default_title: 'chrome demo',
    default_popup: './index.html',
    default_icon: {
      '16': 'icon/icon-16.png',
      '32': 'icon/icon-32.png',
      '48': 'icon/icon-48.png',
      '64': 'icon/icon-64.png',
      '128': 'icon/icon-128.png'
    }
  },
  /* externally_connectable: {
    matches: ['*://*.example.com/*', '*://localhost/*'],
    ids: ['*']
  }, */
  content_security_policy: {
    extension_pages:
      "script-src 'self'; object-src 'self'; frame-ancestors 'none';"
  },
  externally_connectable: {
    ids: ['*']
  },
  permissions: ['storage', 'activeTab', 'scripting', 'tabs'],
  background: {
    service_worker: './background.ts',
    type: 'module'
  },
  // content_scripts: [
  //  {
  //  matches: ['http://*/*', 'https://*/*', '<all_urls>'],
  // js: ['background.ts']
  // css: ['content.styles.css']
  //  }
  // ],
  commands: {
    _execute_action: {
      suggested_key: {
        windows: 'Alt+Shift+N',
        mac: 'Alt+Shift+N',
        chromeos: 'Alt+Shift+N',
        linux: 'Alt+Shift+N'
      }
    }
  },
  options_page: './options.html'
};

export default manifest;

如果还需要其他配置可以查看谷歌扩展的官方文档

谷歌插件自定义的图标可以放在public目录下

 

2、安装@samrum/vite-plugin-web-extension插件：

pnpm add @samrum/vite-plugin-web-extension -D

 3、配置vite.config.ts文件

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import webExtension from '@samrum/vite-plugin-web-extension';
import nodePolyfills from 'rollup-plugin-polyfill-node';
import { resolve } from 'path';
import manifest from './src/manifest';
// https://vitejs.dev/config/
export default ({ mode, command }) => {
  console.log(mode, command);
  return defineConfig({
    root: './src/',
    base: '/',
    envDir: '../',
    publicDir: '../public',
    plugins: [
      vue(),
      webExtension({
        manifest: {
          ...manifest
        }
      })
    ],
    define: {
      'process.env': {}
    },
    server: {
      host: '0.0.0.0',
      port: 30,
      strictPort: true,
      open: true
    },
    css: {
      devSourcemap: true
    },
    rollupOptions: {
      plugins: [nodePolyfills()]
    },
    resolve: {
      alias: {
        '@': resolve(__dirname, 'src')
      }
    },
    build: {
      outDir: '../dist',
      emptyOutDir: true,
      cssCodeSplit: true,
      sourcemap: true,
      rollupOptions: {
        input: {
          main: resolve(__dirname, './src/index.html'),
          options: resolve(__dirname, './src/options.html')
        },
        output: {
          chunkFileNames: 'static/js/[name]-[hash].js',
          entryFileNames: 'static/js/[name]-[hash].js',
          assetFileNames: 'static/[ext]/name-[hash].[ext]'
        }
      }
    }
  });
};

完成以上配置后，使用pnpm dev启动本地开发，本地开发完成后，使用打包命令：pnpm build，打包出dist文件夹。打开谷歌扩展列表chrome://extensions/，或者在设置下面点击扩展程序进入。

 点击已解压的扩展程序

选中刚才打包好的dist文件夹，进行上传。

这样扩展程序就导入到了谷歌扩展当中 

点击那个树叶一样的按钮，找到刚才导入的扩展固定，就可以看到在扩展栏目里面 看到刚才 导入的demo

具体代码可以查看 chrome-extension-demo