金源码专注于织梦源码分享、织梦模板、discuz模板、wordpress主题等网站模板,为广大站长提供网站模板以及Discuz插件等素材。
用户名:
密码:
注册

织梦源码,源码网

VIP
浏览器插件的编写

浏览器插件的编写

  • 适用版本:
  • 语言编码:
  • 应用地址:
  • 下载用户:免费下载
  • 下载一提取码: 无演示 下载地址失效?
  • 详细描述

        做一个自动输入将url生成二维码的插件。。。
    开发流程:
    用到的工具:notepad++
    一个完整的插件:由4个部分组成,分别是manifest.json、.js文件、图标和HTML文件,设计插件就是设计这4类文件。
    manifest.json
    manifest.json的作用是定义插件的属性,例如名称、版本、类型等;
    {  
      "name": "URLTOWHOIS", //程序名称 
      "version": "1.0",  //版本号
      "description": "whois-interface",  //描述
      "browser_action": {  
        "default_icon": "icon.png" ,
        "default_title": "URL",
        "default_popup": "DETAIL.html"  //是点击之后的弹窗操作
      } ,
      "permissions": [ //需要用到的权限
            "tabs", 
            "http://*/*", 
            "https://*/*", 
            "notifications"
          ],
       "manifest_version": 2  //一定要注意了,没有这个的话在最新版本的Chrome中无法安装插件
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    js文件
    .js文件是一个跟浏览器互动的
    function getCurrentTabUrl(callback)
    {
    //获取当前标签的网址和标题
    chrome.tabs.getSelected(function(tab)
    {
    var tabUrl = tab.url;
    var tabTitle = tab.title;
    callback(tabUrl,tabTitle);
    });
    }
    //监听点击时间
    document.addEventListener('DOMContentLoaded', function() {
    getCurrentTabUrl(function(tabUrl,tabTitle)
    {
    var website = document.getElementById('website');
    var title = document.getElementById('title');
    website.textContent = "URL: " + tabUrl;
    title.textContent = "TILE: " + tabTitle;
    //生成二维码
        jQuery('#QRcode').qrcode(tabUrl);
    });
    });
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    HTML文件
    HTML文件具体实现插件的功能;
    <!DOCTYPE html>
    <html>
    <head>
    <title>Website2QRcode</title>
    <script src="jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="jquery.qrcode.min.js"></script>
    <script type="text/javascript" src="DETAIL.js"></script>
    </head>
    <body>
    <p id="website">
    http://blog.csdn.net/tangsilian
    </p>
    <p id="title">
    </p>
    <div id="QRcode"></div>
    </body>
    </html>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    写完几个文件后,就可以将插件载入浏览器中试用一下。首先将它们整理到同一个文件夹中,然后在Chrome的工具栏中选择“扩展程序”,进入扩展管理页,在右侧选择“开发人员模式”,再点击“载入正在开发的扩展程序”按钮,定位到这个文件夹,将整个文件夹载入Chrome中。
    实现效果如下:
     
     
    0x02结果
    遇到的问题:中文标题等乱码~应该是编码的问题 我全改成英文就好了
    收缩