🤡如何开发谷歌扩展

type
status
date
slug
summary
tags
category
icon
password

前言

扩展（Extension），指的是通过调用 Chrome 提供的 Chrome API 来扩展浏览器功能的一种组件，工作在浏览器层面，使用 HTML + Javascript 语言开发[*]。比如著名的 Adblock plus。
下面我会以一个简单的 demo 来讲,该 demo 是一个简单翻译扩展，输入要翻译内容后把翻译结果输出到页面上。

一、目录结构

demo 主要目录结构如下：

二、配置 manifest.json

manifest.json 是扩展的配置文件，可以在里面配置在那个页面使用哪个 js 文件，以及一些其他配置
在 2021 年 9 月 23 日 发布下图时间线全力推 manifest V3
下面可以看看大概结构

三、各个文件代码

index.html
效果如下：
notion image
translate.js
youdao.js
后面可以点击测试： https://fanyi.youdao.com/index.html#/?i=杀杀杀
background.js,这个虽然有，但还没有写任何东西，后面会用到

四、打包

打包的时候需要注意，如果你的扩展需要用到第三方库，那么需要在 manifest.json 中的 content_scripts 中的 js 中引入，否则打包后会报错
打开谷歌扩展页，上面有几个选项 [加载已解压的扩展程序]、[打包扩展程序]、[更新]，可以选择[打包扩展程序],选择源码路径，再点击确定就会生成一个 crx 文件，这个文件就是我们的扩展了。

五、运行效果

notion image

六、源码地址

GiteeGithub
位运算上传项目至GitHub