谷歌浏览器扩展程序之探索,包含博客园markdown编辑器插件
从入门做的一个自动填充页面的扩展,到做了一个博客园markdown编辑器插件的扩展,当作笔记了。
chrome扩展程序--自动化操作页面
包含选项页、保存信息到缓存、扩展向页面发送数据
新建
新建任意文件夹,并新建文件manifest.json和myscript.js(UTF-8编码),内容如下
manifest.json
{
"name": "**", 扩展程序的名字
"manifest_version": 2,
"version": "1.0", 版本号
"description": "**",
"browser_action": {
"default_icon": "zz.png" 19*19图标(网上大神说的)
},
"content_scripts": [{
"matches": ["https://**/**/*", "https://**/**/*"], 在哪些网址下运行
"js": ["myscript.js"], 要执行的js
"css": ["mystyle.css"] 要应用的样式
}]
}
myscript.js
//myscript.js
$("#form1 tr td:nth-child(13) input").not("[readonly]").each(function () {this.value = "8.0"}); //改变13列的input的指为8.0
$("#form1 tr td:nth-child(8) select").each(function () {this.value = "9"});//改变8列的select的值为9
因为myscript.js用到了jquery,所以在manifest.json中引入,并下载对应jquery到新建的文件夹
{
"content_scripts": [{
"matches": ["https://**/**/*", "https://**/**/*"],
"js": ["jquery-3.3.1.min.js", "myscript.js"
]}
}
添加到浏览器、打包发布
添加到谷歌浏览器:谷歌浏览器---->扩展程序,添加已解压的扩展程序(即新建的文件夹),访问指定页面即加载扩展程序
打包扩展程序:在上一步添加的页面,有一个打包扩展程序选项,点击,打包扩展程序,发布
注:感谢github上小茗同学的项目https://github.com/sxei/chrome-plugin-demo.git
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· winform 绘制太阳,地球,月球 运作规律
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
2013-10-13 swap(a,b)值交换的4种方法(转载)