zoukankan      html  css  js  c++  java
  • 利用Google Chrome开发插件,在网页中植入js代码

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

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

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

    1.首先第一步是新建一个文件夹,并新建一个manifest.json文件,内容如下

    {
      "manifest_version": 2,
    
      "name": "Js implants",
      "description": "在网页中植入写好的js",
      "version": "1.0",
    
      "icons": {
        "128" : "icon.png"
      },
      "permissions": [
        "tabs", "http://*/*","https://*/*"
      ],
      "content_scripts": [
        {"js":["maidian.js"],"matches":["http://www.baidu.com/"]}
      ]
    }

    字段解释:

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

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

    icons指插件显示在的图标。

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

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

    2.然后要定义好在manifest.json中声明的资源文件,如上包括了icon.png和maidian.js,然后把文件放在manifest.json的同级目录下。

    3.接着需要做的事就是加载我们自定义的插件了,打开chrome的拓展程序面板,选择“加载正在开发的拓展程序”,选择我们上述新建的文件夹,然后就可以看到我们自己的已经运行在chrome中了。

    4.看看插件的运行情况。

    可以看到我的js脚本已经作用在百度首页,并成功获取到了我们需要的数据。

    官方教程及api:https://developer.chrome.com/extensions/getstarted

  • 相关阅读:
    详解javascript实现自定义事件
    详谈LABJS按需动态加载js文件
    SeaJS入门教程系列之SeaJS介绍(一)
    Underscore.js 入门
    Underscore.js (1.7.0)-集合(Collections)(25)
    Underscore.js (1.7.0)-函数预览
    js/jquery判断浏览器的方法小结
    ParNew收集器
    CMS(Concurrent Mark-Sweep)
    java集合类深入分析之Queue篇(Q,DQ)
  • 原文地址:https://www.cnblogs.com/kkrimen/p/3866521.html
Copyright © 2011-2022 走看看