制作一个简单的chrome插件

开始

既然是简单的插件,那么我们就只要一些必须有的。
首先创建一个文件夹,我的文件夹叫做ChromeExtensions,然后在文件夹中建立两个文件,分别是manifest.jsonindex.js,注意:manifest的文件名不能改,但是index随便看你自己喜欢。项目文件目录如图
在这里插入图片描述
然后就是开始编辑了。
接下来部分实现的是把百度的所有网页的背景变为黑色
接下来就是输入代码了
在manifest文件中输入以下代码

{
    "name": "Handsome Wu's first extension",
    "version": "1.0",
    "manifest_version": 2,
    "content_scripts": [
        { "matches": ["<all_urls>"], "js": ["index.js"] }
    ]
}

前三行是必须有的,具体什么意思想必会点英语都能懂,可以当作是默认要求的写
解释一下"content_scripts"这一块的意思:
使用"content_scripts"你可以修改你当前访问的页面的dom,主要是靠js实现的,里面的"matches"是一个数组,里面装的是一些匹配的规则,意思就是当你的页面的地址满足数组里面的值的时候就会操作js文件,如果你只想要某个网页实现效果而不是整个百度都实现时,那你就把all_urls改成你想要的网址就行了。而"js"里面的是具体的操作,具体操作就是要自己写了。

index.js文件里面代码就一行

document.body.style.background = "#000";
/*  
    *document是获取的是网页的文档
    *body获取的是网页文档中body部分
    *style是样式属性
    *background是背景属性
    *#000是黑色
    *灰色部分是注释你可以不要输入进去
 */

然后你就完成了所有输入工作。nice~
最后的工作就是加入把这个脚本放入到chrome浏览器中,操作如图

1

在这里插入图片描述

2

在这里插入图片描述
然后就可以用了,效果如图
在这里插入图片描述

另外再写一点js的其他效果,要实现的话自己到js文件里面去添加就行

//可以实现每次打开新页面时在浏览器输出一句话
alert('在这输入你想显示的话') 

/**************************************************/

//实现输出该页面有多少张图片
var imgs = document.querySelectorAll('img');  
alert(imgs.length);
//ps:这个方法如果遇到页面里面很多图片可能要加载很久才能出来

附言

做一个chrome插件运用到的有html,css,JavaScript,以及json这几种语言,当然,不会也没关系,如果不是需要实现一些牛逼的功能,那就不过是依葫芦画瓢罢了。
当大家真的认真去看文章的时候其实会发现做一个插件其实真的不难,就像是给我点个赞和关注那么简单嘿嘿

课程背景 Modbus 协议是工业自动化控制系统中常见的通信协议,协议的全面理解是个痛点。 本课程主讲老师集10多年在Modbus协议学习、使用中的经验心得,结合当前物联网浪潮下Modbus协议开发的痛点,推出这套面向Modbus 协议初学者的课程。本课程不同于以往市面课程只是协议讲解无实现代码,而是采用讲解与实践并重的方式,结合STM32F103ZET6开发板进行手把手编程实践,十分有利于初学者学习。 涵盖了学习者在Modbus协议方面会遇到的方方面面的问题,是目前全网首个对Modbus协议进行全面总结的课程。 课程名称    <<Modbus协议讲解及实现>> 课程内容 1、Modbus 协议的基础。 2、Modbus协议栈函数编程实现。 3、Modbus协议在串行链路编程实现。 4、Modbus协议在以太网链路编程实现。 5、常见问题的解决方法。 带给您的价值 通过学习本课程,您可以做到如下: 1、全面彻底的理解Modbus协议。 2、理解在串行链路,以太网链路的实现。 3、掌握Modbus协议解析的函数编程方法,调试工具的使用。 4、掌握多个串口,网口同时运行同一个Modbus协议栈的方法。 5、掌握Modbus协议下,负数,浮点数等处理方法。 讲师简介 许孝刚,山东大学工程硕士,副高职称,技术总监。 10多年丰富嵌入式系统开发经验,国家软考“嵌入式系统设计师”。 2017年获得“华为开发者社区杰出贡献者”奖励。
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页