如何在阿里云上建设网站,网站title字数,网站源码酒类,专业做网站的公司哪家更专业同学们可以私信我加入学习群#xff01; 正文开始 前言一、插件与普通前端项目二、开发插件——manifest.json三、插件使用edge浏览器中使用/加载插件chrome浏览器中使用/加载插件 总结 前言
chrome插件的出现#xff0c;初衷可能是为了方便用户更好地控制浏览器#xff0c…同学们可以私信我加入学习群 正文开始 前言一、插件与普通前端项目二、开发插件——manifest.json三、插件使用edge浏览器中使用/加载插件chrome浏览器中使用/加载插件 总结 前言
chrome插件的出现初衷可能是为了方便用户更好地控制浏览器只是经过漫长的发展如今已经出现各种骚操作与黑科技。
有了插件可以说人操作浏览器的动作都可以通过代码来自动化实现。
比如大学那些无聊的网课可以通过插件来刷新页面某些网站无聊的问答可以通过插件AI的方式自动回复某些网站的自动签到可以通过插件自动打开页面签到浏览器屏蔽广告……本系列所有工具都可通过博主的个人主页:https://lizetoolbox.top:8080/#/qrCode_contact来获取。
具体能实现什么需要同学们自行探索说的太多我就从一个分享者变成可刑之路的引领人。
其实很多同学的基础知识扎实上手插件开发可能只需要十分钟但是因为缺乏这方面的了解而感觉它很神秘。类似的还有爬虫、各类脚本……心疼那些花钱学这些的同学一秒钟。
一、插件与普通前端项目
学习插件开发前我们先看一下普通的前端项目以vue为例最终打包后的目录是什么样的 dist就是打包后的目录对前端有所了解的同学都知道把dist部署到Nginx或者tomcat中就可以作为一个web站点运行了。
它里面有assets、img、favicon.ico、index.html四个部分。其中img文件夹、favicon.ico都是和我业务相关的文件如果你是最干净的vue项目不一定有这些文件所以每个同学都会遇到真正基础的文件只有两个
assetsindex.html 有HTML基础的同学看到这里就会感觉很熟悉了这不就是一个最简单的html页面吗html文件只有一个index.html所有的js、css文件都放在assets中html中通过标签写入js和cssindex的代码如下 其中 script typemodule crossorigin src/assets/index-BywMMX96.js/scriptlink relstylesheet crossorigin href/assets/index-sDuVFabf.css就是在引入assets中的js和css。
上面就是一个最简单的vue项目打包编译后的代码结构。不管你是通过什么方式开发前端最终得到的都是类似关系的HTML、css、js文件这三类文件组成了前端的基础。
可能有同学会有疑惑文章不是要讲解chrome插件吗为什么花这么大篇幅介绍前端
因为chrome插件就是99%的前端1%的配置简而言之就是chrome插件就是在一个完整的前端项目中写入一个描述chrome插件的配置文件。最终的文件结构如下 对比普通前端的文件结构我们就会发现上面的图片和普通前端项目最重要的不同就是多了个manifest.json。
二、开发插件——manifest.json
既然我们已经知道关键文件就是manifest.json那我们研究一下这个文件基本就学会了chrome插件开发的大部分知识文件内的代码如下
{manifest_version: 2,name: 中二少年工具箱,version: 1.0,description: 中二少年学编程开发的工具箱微信公众号【前端系列教程】微信小程序【中二少年工具箱】csdn/掘金/知乎【中二少年学编程】,browser_action: {default_icon: {132: log.ico},default_title: 中二少年学编程,default_popup: index.html},permissions: [storage,tabs],content_security_policy: script-src self unsafe-eval; object-src self
}
上面是我开发的插件配置大部分配置相信大家看示例就能猜到用途。这里简单讲解其中比较重要的几个
manifest_version 扩展的清单版本号一般是一个整数按照开发其它软件的经验这个应该会在自动升级时被获取我的插件一般都是离线版并未上架商城所以我对这个没有深入研究。name:插件名称description对插件的描述default_icon插件的图标这个注意路径如果没有特殊情况最好就放在根目录下和index.html同级default_title:插件在浏览器中显示的名称。 permissions插件的权限按我上面配置就是指插件可以操作浏览器的缓存和标签页。content_security_policy插件的安全策略类比于普通前端项目设置在index.html页面的meta标签这里有没有效果其实我还没有测试。
上面就是插件配置的所有内容只要大家在自己index.html页面同级目录放入上面的配置文件那么就可以把我们的前端项目变成一个插件了。
三、插件使用
以谷歌和edge浏览器为例其它浏览器插件使用和开发请自行探索。
edge浏览器中使用/加载插件
edge浏览器的扩展通过打开浏览器右上角的设置对话框就可以快速找到 当然也可以直接在浏览器的地址栏输入地址edge://extensions/ 最终打开的页面如下 可以看出上面的只显示了我们浏览器中存在的插件但是没有添加插件的入口。这时候打开左侧开发人员模式打开后页面就会出现“加载插件”按钮 点击加载解压缩的扩展选择我们刚才的dist文件夹 最终在扩展列表会出现我们的插件 直接在当前页面就可以看到扩展对话框中存在我们的插件了
chrome浏览器中使用/加载插件
chrome浏览器与edge浏览器的内核都是chrome内核所以插件完全兼容加载、使用方式也大同小异。
打开扩展程序 或者在地址栏输入chrome://extensions/ 打开后的页面类似于edge浏览器 只要打开右上角的开发者模式就会出现对应的加载插件按钮。
然后参考上面edge浏览器的操作加载插件即可。 总结
大家如果需要联系博主或者获取博主各系列文章对应的资源可以通过中二少年学编程的个人主页来获取。
浏览器插件功能会形成一个系列后续会有各类浏览器插件免费提供给大家使用有定制需求的小伙伴可以私信博主反正免费的来薅一波羊毛吧
