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

  • 相关阅读:
    02-css的选择器学习.html
    01-css-css的声明.html
    10-描点学习
    09-HTML-form标签学习.html
    08-HTML-框架标签学习.html
    07-HTML-内嵌标签学习.html
    06-HTML-表格标签学习.html
    05-HTML-超链接标签.html
    04-HTML-图片标签学习.html
    03-HTML-body标签(列表标签).html
  • 原文地址:https://www.cnblogs.com/kkrimen/p/3866521.html
Copyright © 2011-2022 走看看