Chrome插件开发入门

最新推荐文章于 2025-04-14 11:03:51 发布

毛毛的猫毛

最新推荐文章于 2025-04-14 11:03:51 发布

阅读量4.1k

点赞数 2

分类专栏：面试阿里巴巴文章标签： android 前端后端

本文链接：https://blog.youkuaiyun.com/m0_67400973/article/details/126098936

版权

本文详细介绍了Chrome插件的开发过程，包括从创建helloWorld插件开始，到JavaScript基本用法、storage、option_page、消息通知、contextMenus、徽章Badge、pageAction、content_scripts、注入代码、语音朗读等多个功能的实现。通过实例，演示了如何使用chrome插件进行功能扩展，如金额计数器、网页通知、右键菜单、语音朗读等，涵盖了插件开发的多个重要方面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

视频作者：猿伙伴的个人空间_哔哩哔哩_bilibili

源码：https://pan.baidu.com/s/1EUOUo6QwHezyddmslyFsJQ 提取码：xtex

八、针对特定页面的插件pageAction

九、向页面注入代码content_scripts

十、重写浏览器页面chrome_url_overrides

十一、谷歌翻译案例

十二、语音朗读案例

十三、content_scripts简介

十四、更便捷地注入代码executeScript

十五、设置背景图web_accessible_resources

一、第一个插件helloWorld

1、首先新建文件夹helloWorld，用于放入插件代码，并将文件夹拖入vscode内；

2、在vscode内该文件夹中，创建manifest.json文件，进行插件信息的配置；

{
“manifest_version”:2,//版本号，由google指定为2
“name”: “helloWorld”,//插件名称
“version”:“1.0”,//插件版本
“description”:“hello world 插件”,//插件描述
“icons”:{//插件图标
“128”:“img/logo.png”,
“48”:“img/logo.png”,
“16”:“img/logo.png”
},
“browser_action”:{
“default_icon”:“img/logo.png”,//插件图标
“default_popup”:“popup.html”//点击图标后弹出的html互动文件
}

}
3、创建popup.html文件，进行点击图标后弹出窗口的配置；
helloWorld
你好
4、将插件图标文件移入到插件根目录文件夹下；

5、进入Chrome浏览器，输入chrome://extensions/进入扩展程序界面，找到位于右上角的开发者模式，打开；
6、点击加载已解压的扩展程序，找到刚才的helloWorld文件夹，选择即可加载插件；

**问题：**此处疑似需要使用原生的png图片，我用了jpg图片转png图片后，插件图标一直显示不出来，不太清楚是什么原因，后来换成原生的png图片就可以显示了。

7、点击右上角的扩展程序按钮，找到对应的helloWorld插件，点击固定按钮，将插件固定在Chrome主界面上；

8、点击右上角的helloWorld插件按钮，插件开发完毕。

二、JavaScript的基本用法

**目的：**为了给插件添加一个输入框，并实现随着输入框的输入不同，插件弹出的语句也不同的功能。
1、在上一节的基础上，在根目录下创建js包；

2、在js包中，首先引入jquery库简化JavaScript代码，jquery库可以从jquery包全版本下载网址下载，将下载好的jquery文件放入到js文件夹下；

3、在js包中，创建popup.js文件，写入JavaScript代码，实现插件的逻辑功能；

$(function(){
$(‘#input1’).keyup(function(){
$KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲message').text(\dots$ (‘#input1’).val())
})
})
4、进入popup.html文件，在标签内更改html代码，导入jquery.js及popup.js；
helloWorld
你好
5、在Chrome上传插件，即可完成插件开发。

三、storage的用法

**目的：**为了在第3节中实现一个金额计数器的功能插件，需要使用到chrome的storage存储功能，该功能可以将插件中需要保存的数据写入到本地磁盘，从而帮助存储每次累加的金额，而不至于下一次打开插件，金额就归0需要重新计算。
1、首先在第2节的基础上，在manifest.json中加入下列语句，赋予chrome.storage的权限；

{
“manifest_version”:2,
“name”: “helloEverything”,
“version”:“1.0”,
“description”:“hello everything 插件”,
“icons”:{
“128”:“img/logo.png”,
“48”:“img/logo.png”,
“16”:“img/logo.png”
},
“browser_action”:{
“default_icon”:“img/logo.png”,
“default_popup”:“popup.html”
},
“permissions”:[
“storage”
]
}
2、在popup.html文件中，在标签内，写入以下html语句，实现金额计数器的UI界面；
helloWorld
总金额:

本次使用: