码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-02-19 21:53:24      阅读:1144      评论:0      收藏:0      [点我收藏+]

标签:pre   rmi   提升   scripts   哪些   页面   网站   arc   入门介绍   

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

Google Chrome是一个很强大的浏览器,提供了各种各样的插件,大大提升了使用了的效率,比如vimium、honx等。

Google在提供这些插件的同时还允许用户开发自己的插件。

最近在写js的脚本采集程序,需要测试在网页中的运行情况,因此可以利用Chrome插件进行测试。

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

  1. 首先第一步是新建一个文件夹,并新建一个manifest.json文件,内容如下:
{
  "name": "第一个Chrome插件",
  "manifest_version": 2,
  "version": "1.0",
  "description": "我的第一个Chrome插件,还不错吧",
  "browser_action": {
    "default_icon": "1.png"
  },
  "content_scripts": [
    {
      "matches": ["http://chenyu.mydearest.cn/"],
      "js": ["test.js"]
    }
  ]
}

     

manifes_version声明是我们使用的版本。

name和description分别代表我们插件的名称和描述,version则是插件本身的版本号,这些是用来向用户展示所安装的插件的相关信息。

icons指插件显示在的图标。

permissions是插件使用的权限,tabs允许使用chrome.tabs和chrome.windows的api,后面则是匹配模式,指可以和该模式的网站运行的代码进行交互。

Content scripts是在Web页面内运行的javascript脚本。通过使用标准的DOM,它们可以获取浏览器所访问页面的详细信息,并可以修改这些信息。其中js指的是要注入的脚本,marches定义了在哪些页面注入Content scripts。

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

      3.新建js文件test.js

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

content_scripts是运行在打开页面的脚本,可以拿到整个页面的DOM对象,所以可以利用该脚本对页面进行操作。

      4.打开chrome,打开菜单,找到扩展程序选项我的在扳手->工具->扩展程序 路径下。点击加载正在开发的扩展程序,添加文件夹就OK啦!

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

标签:pre   rmi   提升   scripts   哪些   页面   网站   arc   入门介绍   

原文地址:http://www.cnblogs.com/cosyer/p/6417147.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!