大家都知道JS是执行在client的。所以,假设我们自己写一个浏览器的话。是一定能够往下载下来的网页源码中加入js的。可惜我们没有这个能力。只是幸运的是,chrome的扩展程序能够帮我们做到这件事。

本文会做一个chrome插件开发的入门介绍,实现利用chrome扩展实如今目标网页执行我们的js的功能。关于chrome扩展的具体内容,能够通过官网了解。

开发工具非常easy。记事本就OK了,当然还要有一个chrome浏览器。

新建一个目录,比方。HelloWorld

然后创建一个文本文件。作为这个扩展程序的配置文件,所以文件名称是manifest.json,注意扩展名是json,然后输入例如以下内容。

{
"name": "第一个Chrome插件",
"manifest_version": 2,
"version": "1.0",
"description": "我的第一个Chrome插件,还不错吧",
"browser_action": {
"default_icon": "1.png"
}
}

1.png的话,随便拖一张图片进来就OK啦。另外须要注意的是,该文本文件须要用UTF8字符集保存。

你的第一个chrome扩展就完毕了。

什么?完毕了?这么快?

确实是,打开chrome,打开菜单。找到扩展程序选项我的在扳手->工具->扩展程序 路径下。

点击载入正在开发的扩展程序

能够看到,你的1.png已经作为图标被放在地址栏旁边了。

仅仅只是如今毫无功能。

如今让我们把helloworld加入进去。

在manifest文件中加入几行这种代码。

"content_scripts": [
{
"matches": ["http://www.aaaaa.com/*"],
"js": ["myscript.js"]
}
]

注意跟之前的代码用逗号切割开。

能够看到我们新增了一个内容。就是content_scripts,具体的介绍应该去看官方文档,我在这里简要介绍下。content_scripts是执行在打开页面的脚本,能够拿到整个页面的DOM对象。所以能够利用该脚本对页面进行操作。

新建一个js文件myscript.js,里边代码非常easy。

alert("HelloWorld");
document.body.style.backgroundColor="gray";

在扩展程序页面又一次载入插件,就能够去看效果了。

当我打开百度的时候,Oh,my god!

点击确定后

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxNDQxOTUxMg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

丑爆了有木有,但确实变灰了。

另外百度,咱就不能换个背景透明的png做logo吗?

chrome扩展程序开发之在目标页面执行自己的JS的更多相关文章

  1. chrome扩展程序开发之在目标页面运行自己的JS

    大家都知道JS是运行在客户端的,所以,如果我们自己写一个浏览器的话,是一定可以往下载下来的网页源代码中加入js的.可惜我们没有这个能力.不过幸运的是,chrome的扩展程序可以帮我们做到这件事. 本文 ...

  2. 了解Chrome扩展程序开发--摘抄

    了解Chrome扩展程序开发 2018-01-11 边城到此莫若 鸡蛋君说前端 首先,我尝试来用简单几句话描述一下Chrome扩展程序: Chrome扩展主要用于对浏览器功能的增强,它强调与浏览器相结 ...

  3. Google Chrome 扩展程序开发

    根据公司的规定,每月八小时,弹性工作制.所以大家平时来的不太准时,如果有事,下班也就早些回去了.所以一个月下来工作时间可能不够,但是公司的考勤日历是这样的: 除了请假和法定节假日外,其他样式显示都是一 ...

  4. chrome扩展程序开发

    首先,明确两个概念的区别:chrome扩展程序和Web Apps.具体参考:http://www.chromi.org/archives/10106 本文只讨论chrome扩展程序. 最好的开发教程莫 ...

  5. 如何用原生js开发一个Chrome扩展程序

    原文地址:How to Build a Simple Chrome Extension in Vanilla JavaScript 开发一个Chrome扩展程序非常简单,只需要使用原生的js就可以完成 ...

  6. Chrome扩展程序的二次开发:把它改得更适合自己使用

    我当然知道未经作者允许修改别人程序是不道德的了,但作为学习研究之用还是无可厚非,这里仅供交流. 一切都是需求驱动的 话说某天我在网上猎奇的时候无意间发现这么一款神奇的谷歌浏览器插件:Extension ...

  7. 【前端工具】Chrome 扩展程序的开发与发布 -- 手把手教你开发扩展程序

    关于 chrome 扩展的文章,很久之前也写过一篇.清除页面广告?身为前端,自己做一款简易的chrome扩展吧. 本篇文章重在分享一些制作扩展的过程中比较重要的知识及难点. 什么是 chrome 扩展 ...

  8. ----转载----【前端工具】Chrome 扩展程序的开发与发布 -- 手把手教你开发扩展程序

    关于 chrome 扩展的文章,很久之前也写过一篇.清除页面广告?身为前端,自己做一款简易的chrome扩展吧. 本篇文章重在分享一些制作扩展的过程中比较重要的知识及难点. 什么是 chrome 扩展 ...

  9. 推荐一个有趣的Chrome扩展程序-查看任意网站的开发技术栈

    对于前端开发人员来说,目前的前端框架层出不穷,最受欢迎的莫过于所谓的前端框架三驾马车:Angular, React和Vue.在学习的过程中,肯定好奇现在的互联网公司的网站用的何种前端框架来开发的. C ...

随机推荐

  1. mvc 获取 HtmlHelper 表达式值

    public static MvcHtmlString Try<TModel, TProperty>( this HtmlHelper<TModel> htmlHelper, ...

  2. CentOS上部署Django+Nginx+Uwsgi环境

    在CentOS上部署Django+Nginx+Uwsgi环境 奇谭  2016-09-01 评论  Linux  python django nginx uwsgi VirtualEnv的作用:创建隔 ...

  3. Where do I belong

    先给数组排序,然后找到指定的值在数组的位置,最后返回位置对应的索引. 举例:where([1,2,3,4], 1.5) 应该返回 1.因为1.5插入到数组[1,2,3,4]后变成[1,1.5,2,3, ...

  4. configParse模块

    一.配置文件简介 在各种程序里面都有配置文件,为了对配置文件进行操作. python中引入了configParse模块进行操作. 配置数值类型: 配置文件中,我们看到的bool型,整数型,在我们操作的 ...

  5. 028——VUE中事件修饰符once

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 【zzuli-1923】表达式求值

    题目描述 假设表达式定义为:1. 一个十进制的正整数 X 是一个表达式.2. 如果 X 和 Y 是 表达式,则 X+Y, X*Y 也是表达式; *优先级高于+.3. 如果 X 和 Y 是 表达式,则 ...

  7. fidder设置断点,修改请求参数等

    设置断点(来自:http://jingyan.baidu.com/article/17bd8e52216c8d85ab2bb8e9.html): 可以看到当前有一个抓取的很多的包的链接的地址的信息,那 ...

  8. Flask项目中的蓝图简介及使用方式

    Blueprint概念 简单来说,Blueprint 是一个存储操作方法的容器,这些操作在这个Blueprint 被注册到一个应用之后就可以被调用,Flask 可以通过Blueprint来组织URL以 ...

  9. Linux:修改Shell命令提示符及颜色

    Linux修改Shell命令提示符及颜色   1. Linux登录过程中加载配置文件顺序: /etc/profile → /etc/profile.d/*.sh → ~/.bash_profile → ...

  10. Go语言打印调用堆栈

    Go语言打印调用堆栈 这两天看Go的代码,呃,协程太多,无数个携程调用了一个方法,彻底看不清了,所以就想到是不是可以把调用堆栈打印出来. 查了一下,发现Go的 runtime/debug 库可以把调用 ...