访问网站的时候,最烦的就是一些弹窗和广告。于是,就想着能不能在访问特定网站的时候,执行一段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 插件的更多相关文章

  1. 动手做第一个Chrome插件

    Chrome插件是令人惊讶的简单,一旦你弄懂它的工作和实现原理.它是由一部分HTML,一部分Js,然后混合了一个叫做manifest.json的Json文件组合而成的整体.这意味着你可以使用你最擅长的 ...

  2. chrome 浏览器插件开发(一)—— 创建第一个chrome插件

    最近在开发一个chrome插件,在网上找到了一些的文章,虽说按照文章可以写出对应的例子,但若要进行实际开发,发现还是有不少文章中没有的坑.下面我将结合我在开发过程中遇到的几个方面,对这些坑做一下补充. ...

  3. 如何通过写一个chrome扩展启动本地程序

    @(编程) [toc] 本文介绍如何利用Chrome 的插件, 从我们的一个网站中启动一个我们的本地程序.本文的环境是windows10,本文的例子是通过点击网页上的一个button,调用本地的wor ...

  4. 为PhoneGap写一个android插件

    为PhoneGap写一个android插件,要怎么做? 其实这句话应该反过来说,为android写一个PhoneGap插件,要怎么做? 这里以最简单的Hello World!为例,做个说明: 1.第一 ...

  5. 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  6. 如何写一个jquery插件

      本文总结整理一下如何写一个jquery插件?虽然现今各种mvvm框架异常火爆,但是jquery这个陪伴我们成长,给我们带来很多帮助的优秀的库不应该被我们抛弃,写此文章,作为对以往欠下的笔记的补充, ...

  7. JS写一个简单日历

    JS写一个日历,配合jQuery操作DOM <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  8. 前端与编译原理——用JS写一个JS解释器

    说起编译原理,印象往往只停留在本科时那些枯燥的课程和晦涩的概念.作为前端开发者,编译原理似乎离我们很远,对它的理解很可能仅仅局限于"抽象语法树(AST)".但这仅仅是个开头而已.编 ...

  9. 如何使用 js 写一个正常人看不懂的无聊代码

    如何使用 js 写一个正常人看不懂的无聊代码 代码质量, 代码可读性, 代码可维护性, clean code WAT js WTF https://www.destroyallsoftware.com ...

随机推荐

  1. Ubuntu16.04下Hadoop的本地安装与配置

    一.系统环境 os : Ubuntu 16.04 LTS 64bit jdk : 1.8.0_161 hadoop : 2.6.4 部署时使用的用户名为hadoop,下文中需要使用用户名的地方请更改为 ...

  2. sql语句表连接删除

    DELETE 表1,表2FROM 表1 LEFT JOIN 表2 ON 表1.id=表2.id WHERE 表1.id=需要删除的ID

  3. sql防止注入

    使用PreparedStatement的参数化的查询可以阻止大部分的SQL注入.在使用参数化查询的情况下,数据库系统不会将参数的内容视为SQL指令的一部分来处理,而是在数据库完成SQL指令的编译后,才 ...

  4. Ubuntu14.04和16.04官方默认更新源sources.list和第三方源推荐(干货!)

    不多说,直接上干货! 写在前面:笔者由于还在学校学习,学校没有开发给Linux用的上网客户端,所以只能用在windows系统中通过安装虚拟机运行linux比较方便,但没有外网,只有学校的教育网,所以我 ...

  5. spark伪分布式的安装

    不依赖hadoop 百度分享安装包地址:http://pan.baidu.com/s/1dD4BcGT 点击打开链接 解压 并重命名: 进入spark100目录: 修改配置: Cd conf 配置单击 ...

  6. Codeforces.871D.Paths(莫比乌斯反演 根号分治)

    题目链接 \(Description\) 给定\(n\),表示有一张\(n\)个点的无向图,两个点\(x,y\)之间有权值为\(1\)的边当且仅当\(\gcd(x,y)\neq1\).求\(1\sim ...

  7. Synergy简单使用小记

    需求: 两台笔记本用两套键盘鼠标,那体验,糟透了. 怎样才能使得两个主机公用一套鼠标和键盘呢?上网搜索到Synergy这款软件 参考: 具体使用方法参考了这篇博文 基本使用: 这款软件分为服务端和客户 ...

  8. 容器加載Web工程的Web.xml文件介紹

    转 容器加載Web工程的Web.xml文件介紹 [-] 这篇文章主要是综合网上关于webxml的一些介绍希望对大家有所帮助也欢迎大家一起讨论 ---题记 一            Webxml详解 一 ...

  9. 白盒测试实践-day03

    一.任务进展情况 完成了基本的测试过程,下一步整理文档. 二.存在的问题 对于JUnit测试,对测试系统还不是太了解,导致测试脚本无法写. 三.解决方法 熟悉测试系统的结构,上网搜集资料.

  10. chrome浏览器上传图片反应很慢,延迟很久才弹出窗口

    chrome浏览器上传图片反应很慢,延迟很久才弹出窗口 一个上传图片的控件,点击按钮上传图片,用chrome(谷歌浏览器)时,点击按钮后,要等好几秒才弹出文件选择窗口 可以试一下,把网络断开,这个问题 ...