最近,根据需求开发了一款谷歌插件。所用前端脚手架就是目前最火的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文件夹,进行上传。
扫描二维码关注公众号,回复:
14972027 查看本文章
这样扩展程序就导入到了谷歌扩展当中
点击那个树叶一样的按钮,找到刚才导入的扩展固定,就可以看到在扩展栏目里面 看到刚才 导入的demo
具体代码可以查看 chrome-extension-demo