制作一个简单的chrome插件

开始

既然是简单的插件，那么我们就只要一些必须有的。
首先创建一个文件夹,我的文件夹叫做ChromeExtensions，然后在文件夹中建立两个文件，分别是manifest.json和index.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这几种语言，当然，不会也没关系，如果不是需要实现一些牛逼的功能，那就不过是依葫芦画瓢罢了。
当大家真的认真去看文章的时候其实会发现做一个插件其实真的不难，就像是给我点个赞和关注那么简单嘿嘿

制作一个简单的chrome插件相关推荐

制作一个简单的Chrome extensions并发布到应用商店
制作一个简单的Chrome extensions并发布到应用商店制作一个简单的Chrome extensions并发布到谷歌商店一个简单的ShowTime extension 注:工具推荐使用VS ...
搜索引擎快捷导航：一个简单的chrome插件（教程）
搜索引擎快捷导航使用方法 :下载crx扩展名文件,拖入chrome应用管理界面即可 github地址:https://github.com/mouday/chrome-search-tool 编写一 ...
php如果实现日历的制作,教你如何制作一个简单的PHP日历
PHP是一款功能强大的后端编程软件,我们在学习PHP的过程中要经过很多实际的战斗,现在让我们做一个日历来巩固PHP的基础,今天爱站技术频道小编为大家整理了教你如何制作一个简单的PHP日历,希望能帮到大 ...
php怎么做考勤行事例,PHP开发制作一个简单的活动日程表Calendar
材料取之深入PHP与JQuery开发,这本书实际上就是讲述一个活动日程表. 此文章适合从其它语言(如java,C++,python等)转到php,没有系统学习php,或者是php初学者,已经对程序有较 ...
如何制作一个简单的短视频 app
如果想制作一个简单的短视频 app,可以考虑以下步骤: 确定 app 的目标和功能:需要明确 app 的目标受众和提供的功能,以确定 app 的整体设计方向. 选择开发平台:根据自己的技术能力和预算选 ...
使用 Flutter 制作一个简单的笑话生成器应用程序
在本教程中,我将向您展示如何使用 Flutter 制作一个简单的笑话生成器应用程序对于这个项目,我们将从 RESTful API 获取数据 API的链接: 随机笑话对于这个项目,我不会关注应用程序 ...
Android-实现一个简单的自动翻译插件
目录实现一个简单的自动翻译插件实现思路几个重要的实现方法 1.解析xml 2.写文件 3. 翻译使用实现一个简单的自动翻译插件最近在开发项目是要将Android相关的资源进行国际化,需要将 ...
实例学习SSIS（一）--制作一个简单的ETL包
http://www.cnblogs.com/tenghoo/archive/2009/10/archive/2009/10/archive/2009/10/16/ssis_lookup.html 导 ...
python计算器教程,用Python程序制作一个简单的计算器
用Python程序制作一个简单的计算器在此示例中,您将学习创建一个简单的计算器,该计算器可以根据用户的输入进行加,减,乘或除. 要理解此示例,您应该了解以下Python编程主题: 通过函数创建简单计 ...

制作一个简单的chrome插件

开始

1

2

附言

制作一个简单的chrome插件相关推荐

最新文章

热门文章