Chrome浏览器插件开发－关于案例

  1. 前言
  2. 关于案例
  3. 下一章 版本更新提示案例

一、前言

　　上章我们提到过开发一个插件所需要的步骤：

　　　　Chrome浏览器插件开发－淘宝自动登录

　　并且还介绍了如何在页面上面注入脚本代码，并且成功的完成用户名和密码的自动输入功能。

 

　　本章将会以一些案例来介绍插件的一些新的开发技巧。案例将包括：

　　　　关于案例

　　涉及的技术点包括：

　　　　如何使用popup.html

　　　　popup如何使用js

　　　　如何使用chrome  api

 

二、关于案例

         任何一个成熟的产品都会有关于的标志，这是在法律的角度上面宣示自己拥有这个产品的所有权。

 

        以下案例将会介绍如何做个“关于”的案例，我们通过观察其它软件的“关于”都有相同的特性。

　　　　　　产品名称

　　　　　　产品版本号

　　　　　　产品编号／许可证／作者

　　　　　　产品法律效益宣示

 

      　本次案例将会介绍如何通过弹窗来实现本功能，具体运行界面图如下：

　　由界面运行图可得知，我们需要制作一个弹窗界面popup.html。

　　chrome插件制作弹窗非常简单，我们只需在manifest.json中配置browser_action项即可达到弹窗界面的功能。

"browser_action": {
    "default_icon": "1.png",
    "default_popup":"popup.html"
  }

　　browser_action

　　在浏览器主工具条的地址栏右侧增加一个图标

　　　　default_icon: 图标资源文件路径

　　　　default_popup:  点击弹窗界面资源文件路径

 

编写popup.html, 加入：

 

简单方便的完成了任务。

显然我们的任务并没这么简单，我们需要动态读取本插件产品的信息。

如何获取本插件产品的信息，我们需要通过Chrome API来获取：

chrome.app.getDetails()
//获取产品信息，包括manifest.json所有项.

下面图是通过backgroup获取产品信息的案例图，供参考：

 

 

 

 

popup.html如何使用js呢？

由于google的安全机制，该处将会出现安全错误提示（html里面不能出现內联js脚本）：

 

正确的用法是新建一个js文件，popup.html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-2.0.0.min.js"></script>
    <script src="popup.js"></script>
</head>
<body>
<div style="width: 200px;text-align: center" id="about-box">

</div>

</body>
</html>

popup.js文件

$(document).ready(function(){
    var details = chrome.app.getDetails();

    var html = "<p><img src='"+details.browser_action.default_icon+"'></p>"+
            "<h2>"+details.name+"</h2>"+
            "<p>版本:v"+details.version+"</p>"+
            "<p>作者:oshine</p>"+
            "<p>@copyright 2016, 不可用于商业用途</p>";
    $("#about-box").html(html);
});

manifest.json

{
  "manifest_version": 2,
  "version": "1.0.2",
  "name": "淘宝自动登录助手",
  "description": "淘宝自动登录助手",
  "browser_action": {
    "default_icon": "1.png",
    "default_popup":"popup.html"
  },
  "permissions": [
    "https://login.taobao.com/*"
  ],
  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [
    {
      "matches": ["https://login.taobao.com/*"],
      "js": ["taobao_login.js"],
      "run_at": "document_end",
      "all_frames": true
    }
  ]
}

运行结果：

 案例结果！！

 

Chrome Extension Developer QQ群： 15785475  

 

下一章 版本更新提示案例

posted @ 2016-04-12 17:17  oShine.Q  阅读(19051)  评论(2)  编辑  收藏  举报