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

本文会做一个chrome插件开发的入门介绍,实现利用chrome扩展实现在目标网页运行我们的js的功能。关于chrome扩展的详细内容,可以通过官网了解。

开发工具很简单,记事本就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,里边代码很简单。

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

在扩展程序页面重新加载插件,就可以去看效果了。

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

点击确定后

转自:http://www.tuicool.com/articles/7ZrEvi

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

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

    大家都知道JS是执行在client的.所以,假设我们自己写一个浏览器的话.是一定能够往下载下来的网页源码中加入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. WCF报 当前已禁用此服务的元数据发布的错误

    这是 Windows© Communication Foundation 服务. 当前已禁用此服务的元数据发布. 如果具有该服务的访问权限,则可以通过完成下列步骤来修改 Web 或应用程序配置文件以便 ...

  2. Ubuntu 12.04 安装 Chrome浏览器

    1,先到chrome官网下载一个安装包 http://www.google.com/intl/zh-CN/chrome/ 2,ctrl+alt+t 打开终端. 3,在终端里输入sudo apt-get ...

  3. dedecms后台批量替换文章中的关键词

    DEDECMS怎么样能快捷或者批量修改网站所有文章的超链接和锚文本,超链和所有关键词锚文本的链接需要修改? dedecms后台批量替换文章中的关键词

  4. 详解JavaScript中的Url编码/解码,表单提交中网址编码

    本文主要针对URI编解码的相关问题做了介绍,对Url编码中哪些字符需要编码.为什么需要编码做了详细的说明,并对比分析了Javascript 中和 编解码相关的几对函数escape / unescape ...

  5. SQL面试积累

    以下题目都在MySQL上测试可行,有疏漏或有更优化的解决方法的话欢迎大家提出,我会持续更新的:) 有三个表,如果学生缺考,那么在成绩表中就不存在这个学生的这门课程成绩的记录,写一段SQL语句,检索出每 ...

  6. HDOJ 1875

    畅通工程再续 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Sub ...

  7. BZOJ 1602 USACO2008 Oct 牧场行走

    翻翻吴大神的刷题记录翻到的... 乍一看是一个树链剖分吓瓜我...难不成吴大神14-10-28就会了树剖?orz... 再一看SB暴力都可过... 然后一看直接树上倍增码个就好了... 人生真是充满着 ...

  8. 使用msgfmt编译多语言文件

    msgfmt --statistics --verbose -o django.mo django.po

  9. macbook air电池保养方法

    转自: http://bbs.feng.com/read-htm-tid-5819895.html http://www.zhihu.com/question/22628030

  10. process vs thread

    process vs thread http://blog.csdn.net/mishifangxiangdefeng/article/details/7588727 6.进程与线程的区别:系统调度是 ...