js写一个chrome 插件
访问网站的时候,最烦的就是一些弹窗和广告。于是,就想着能不能在访问特定网站的时候,执行一段js脚本,去除页面的广告。于是乎,好像 chrome 插件可以实现。
这里,以 百度 的网站为例
新建 simple01 文件夹:
内部文件结构如图:

主要是 manifest.json的配置:
{
"manifest_version":2,
"version":"1.0.0",
"name":"myAdSafe",
"description":"百度插件",
"browser_action":{},
"permissions":["*://www.baidu.com/"],
"background":{},
"content_scripts":[{
"matches":["*://www.baidu.com/"],
"js":["index.js"],
"run_at":"document_end",
"all_frames":true
}]
}
manifest_version
manifest文件内容格式的版本,目前版本为2,本次介绍的格式都是基于该版本的.
version
该浏览器插件的版本。
name
该浏览器插件的名称。
description
该浏览器插件的描述信息。
browser_action
浏览器插件的工具栏图标。
permissions
浏览器插件需要的权限,支持正则匹配。google对于安全性是相当重视,该配置也是重要的环节!
background
浏览器插件后端程序,大部分浏览器插件api,以及https网站都需要后端程序来完成。如:获取浏览器插件的版本号。
content_scripts
页面注入配置。例如:向域名为xx的注入一串输出hello world的脚本,就需要该配置,同时也需要配置拥有该域名xx的权限。
页面如何注入scripts文件
1.manifest.json permissions配置
"permissions":["*://www.baidu.com/"],
2.manifest.json content_scripts配置
"content_scripts":[{
"matches":["*://www.baidu.com/"],
"js":["index.js"],
"run_at":"document_end",
"all_frames":true
}]
matches: 需要注入的脚本页面的URL,支持正则表达式。
js: 注入的脚本文件,相对路径。
run_at: 注入的位置,document_start文档的开始,document_idel文档的中间 , document_end文档的末尾。
all_frames: 是否全frame注入,比如页面使用了iframe或者frame。
3.编写 index.js
语法为javascript,当然你也可以引入jquery,方式和 index.js 一样
index.js 中输入内容:
document.getElementById("kw").value = "插件自动输入";
其主要是在 浏览器打开百度的时候,输入框自动填充内容
4.安装插件进入浏览器:

和安装其他插件一样,直接在上面页面,打开开发模式。。然后直接将,simple01 文件拖入
浏览器即可。
5、打开 百度:

注意: 网址配置后面一定要有斜杆,否则会报错

既然能够开发插件了,那么就可以针对自己常用的网站,,,进行自己的定制脚本了
更多内容可以查看: https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html
js写一个chrome 插件的更多相关文章
- 动手做第一个Chrome插件
Chrome插件是令人惊讶的简单,一旦你弄懂它的工作和实现原理.它是由一部分HTML,一部分Js,然后混合了一个叫做manifest.json的Json文件组合而成的整体.这意味着你可以使用你最擅长的 ...
- chrome 浏览器插件开发(一)—— 创建第一个chrome插件
最近在开发一个chrome插件,在网上找到了一些的文章,虽说按照文章可以写出对应的例子,但若要进行实际开发,发现还是有不少文章中没有的坑.下面我将结合我在开发过程中遇到的几个方面,对这些坑做一下补充. ...
- 如何通过写一个chrome扩展启动本地程序
@(编程) [toc] 本文介绍如何利用Chrome 的插件, 从我们的一个网站中启动一个我们的本地程序.本文的环境是windows10,本文的例子是通过点击网页上的一个button,调用本地的wor ...
- 为PhoneGap写一个android插件
为PhoneGap写一个android插件,要怎么做? 其实这句话应该反过来说,为android写一个PhoneGap插件,要怎么做? 这里以最简单的Hello World!为例,做个说明: 1.第一 ...
- 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- 如何写一个jquery插件
本文总结整理一下如何写一个jquery插件?虽然现今各种mvvm框架异常火爆,但是jquery这个陪伴我们成长,给我们带来很多帮助的优秀的库不应该被我们抛弃,写此文章,作为对以往欠下的笔记的补充, ...
- JS写一个简单日历
JS写一个日历,配合jQuery操作DOM <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...
- 前端与编译原理——用JS写一个JS解释器
说起编译原理,印象往往只停留在本科时那些枯燥的课程和晦涩的概念.作为前端开发者,编译原理似乎离我们很远,对它的理解很可能仅仅局限于"抽象语法树(AST)".但这仅仅是个开头而已.编 ...
- 如何使用 js 写一个正常人看不懂的无聊代码
如何使用 js 写一个正常人看不懂的无聊代码 代码质量, 代码可读性, 代码可维护性, clean code WAT js WTF https://www.destroyallsoftware.com ...
随机推荐
- HTML5+CSS3点击指定按钮显示某些内容效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【JavaScript】 使用extend继承对象的prototype方法
之前有学习过通过prototype模式来构造类,并通过prototype来添加方法.好处大概有以下几点: 1.类方法可以都放在prototype中,可以提高性能效率. 2.可以用prototype来实 ...
- 一起学Python——数据类型详解
和学习其他编程语言一样,首先要了解一门语言的数据类型. Python的数据类型有整型.浮点型.字符串.布尔型.日期时间类型.list列表.set集合.tuple元组.dict词典等. 1.整型 就是数 ...
- Docker 学习1 容器技术基础入门
一.虚拟化 1.主机级别虚拟化(两种) a.类型一虚拟化:在硬件上直接安装hyper-ver,然后再安装虚拟机 1).操作系统就两棵树:进程树,文件系统树. 2).一个内核只能有一个root b.类型 ...
- P1525 关押罪犯 并查集
题目描述 SS城现有两座监狱,一共关押着NN名罪犯,编号分别为1-N1−N.他们之间的关系自然也极不和谐.很多罪犯之间甚至积怨已久,如果客观条件具备则随时可能爆发冲突.我们用“怨气值”(一个正整数值) ...
- c++sort函数的使用总结
sort类函数: 函数名 功能描述 sort 对给定区间所有元素进行排序 stable_sort 对给定区间所有元素进行稳定排序 partial_sort 对给定区间所有元素部分排序 partial_ ...
- 程序猿最浪漫的表白,肯定会得到你的她——Jason niu 原文来自GitHub,本人已部分修改
程序猿最浪漫的表白,肯定会得到你的她——Jason niu 原文来自GitHub,主页本人已部分修改,感谢程序猿大神wuxia2001和hackerzhou的开源,感谢这两位大神! 视频结果展示 ...
- Linux 解压命令tar
1. 参数说明: -c :建立一个打包文件: -x :解开一个打包文件: -t :查看 tar包里面的文件: (c/x/t仅能存在一个,不可同时存在,因为不可能同时压缩与解压缩.) -z :打包后用g ...
- iOS12系统应用发送普通邮实现发送
iOS12系统应用发送普通邮实现发送 构建好邮件以后,可以发送该邮件.此时需要使用mailComposeDelegate属性,该属性用来设置委托,其语法形式如下: unowned(unsafe) va ...
- Huginn定时时间不准确或延后问题
碰巧遇到的:Huginn定时为每天晚上九点执行的任务,却在午后1点执行了, 查了下,午后一点,正好是太平洋时间前一天的晚上9点,一开始没考虑到,午后调试程序,它莫名其妙执行了一次,才发现问题, 那就换 ...