Chrome插件开发实例 – 开关灯(browser action)
本文由发表于4年前 | Javascript | 评论数 8 |  被围观 16,412 views+
这个文件包含的文件如下:background.htmlbackground.jsfunc.jsicon.pngjquery-2.0.2.jsmanifest.jsonpopup.htmlpopup.js下面就逐个文件说明:manifest.jsonpopup.htmlpopup.jsfunc.jsbackground.htmlbakcground.js

这里通过一个网页开关灯的例子来演示browser action,除了browser action之外,还会涉及到其他很多的chrome api或者manifest.json配置项。

20130614000050

这个文件包含的文件如下:
background.html

背景页,一个单独的长时间运行的脚本,是一个运行在扩展程序中的html页面。在应用的整个生命周期都存在,在同一个时间只有一个实例处于活动状态。

background.js

背景页的JS,一般不需要上面的background.html也可以,manifest.json中按照如下配置就可以了:

"background": {
          "scripts": ["background.js"]
      }
func.js

一个需要注入到页面中的 content script

icon.png

应用的图标 19px * 19px

jquery-2.0.2.js

需要注入页面中使用的jquery库

manifest.json

应用的配置文件

popup.html

点击浏览器工具栏时,应用的弹窗页面

popup.js

弹窗页面对应的JS文件,在popup.html中引入。

下面就逐个文件说明:
manifest.json
{
    "manifest_version": 2,
      "name": "pv show",
      "description": "__MSG_ext_desc__",
      "version": "2",
      "default_locale": "en",
      "icons": {
        "48": "images/icon_16.png",
        "48": "images/icon.png",
        "128": "images/icon_128.png"
       },
      "permissions": [
        "tabs", 
        "http://*/*", 
        "https://*/*", 
        "notifications"
      ],
      "browser_action": {
           "default_icon": "images/icon.png",
           "default_popup": "options.html",
        "default_title": "网页流量统计"
      },
      "background": {
          "scripts": ["background.js"]
      }
}
popup.html
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>开关灯</title>
        <style>
            div{
                width:100px;
                height:20px;
                line-height:20px;
                text-align:center;
                font-family: sans-serif;
                font-size:0.8em;
                background:#F3F3F3;
                margin-bottom:4px;
                cursor:pointer;
            }
            div:hover{
                background:#CCCCCC;
            }
            .day{
                background:#000;
            }
            .night{
                background:#FFF;
            }
        </style>
        <!-- 引入JS文件,这里引入的文件只能在popup.html页面中使用,不能再web页面中使用(页面中的为content script) -->
        <script src="popup.js"></script>
        <script src="jquery-2.0.2.min.js"></script>
    </head>
    <body>
        <div id="off">关灯</div>
        <div id="on">开灯</div>
    </body>
</html>
popup.js
/*
 * 
 * 这个JS文件表示对popup.html文档的操作
 * 比如直接在这里写的document也是代表了popup.html的文档流
 */

// 这里的document代表了popup.html的文档流,所以也是注册这个页面中的dom事件
document.addEventListener('DOMContentLoaded', function(){
    var divs = document.querySelectorAll('div');
    var obj = {"name":"root", "password":"123"};
    for(var i=0; i<divs.length; i++){
        divs[i].addEventListener('click', function(e){
            // var jsonText = JSON.stringify(e);  // 转换报错
            // console.log(jsonText);
            // chrome.tabs.executeScript(null,
            //     {code:"switchLight('"+ obj +"');", allFrames: true}); // 这里如果传递一个e事件对象的话,会自动转换为字符串字面值,导致对象变成了字符串
            // 向页面注入JavaScript 脚本执行,由于这里调用的是一个JS方法switchLight(),该方法在func.js文件中,所以可以在background.js中把该JS(content script)注入到web页面中。
            chrome.tabs.executeScript(null,
                 {code:"switchLight('"+ e.target.id +"');", allFrames: true});
            // console.log("send");
            // chrome.extension.sendRequest(e);   // 发送请求方法可以传递JSON对象,但是这里chrome把e事件对象转换为JSON字符串时会报错:Uncaught TypeError: Converting circular structure to JSON
        });        
    }
});
func.js
// 一个简单的方法直接设置document.body的背景颜色,即开关灯效果
// 由于这个content script是注入到web页面中的,所以这里的document也就是代表web页面中的文档
function switchLight(lightAction){
    console.log(lightAction);
    if(lightAction == 'off'){
        document.body.style.backgroundColor='#000';
    } else {
        document.body.style.backgroundColor='#fff';
    }
}
background.html

背景页,应用的整个生命周期都存在,这个页面只是简单的引用了background.js文件,不用也可以,见上面的说明。

<html>
<head>
<script src="background.js"></script>
</head>
<body>
</body>
</html>
bakcground.js
/**
 * 注册标签页更新时的事件
 * 这里调用了initialize()事件,把func.js注入当前标签页中 
 */
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    initialize(tabId);
});

/**
 * 注册切换标签页时的事件
 * 这里调用了initialize()事件,把func.js注入当前标签页中
 */
chrome.tabs.onSelectionChanged.addListener(function(tabId, selectInfo) {
    initialize(tabId);
});

/**
 * 初始化方法 ,注入func.js事件
 * @param {Object} tabId
 */
function initialize(tabId){
    chrome.tabs.executeScript(tabId, {file: "func.js", allFrames: true});
    chrome.tabs.executeScript(tabId, {file: "jquery-2.0.2.js", allFrames: true});
}

/**
 * 启动一个chrome.extension.onRequest事件监听器用来处理消息
 */
chrome.extension.onRequest.addListener(
  function(request, sender, sendResponse) {
    chrome.tabs.executeScript(null, {code: "switchLight("+ request +");", allFrames: true});
});

源代码稍后补充...

除了文章中有特别说明,均为IT宅原创文章,转载请以链接形式注明出处。
本文链接:http://www.itzhai.com/chrome-plugin-development-example-switch-lights-browser-action.html
关键字: ,
arthinking Java技术交流群:280755654,入门群:428693174 more
分享到:
 
2013 6/5
文章评论
    8条评论
  1. zobor 2013年12月25日20:15:27  #-49楼 回复 回复

    赞。。。

  2. 过街老鼠 2014年10月19日14:32:53  #-48楼 回复 回复

    不知道是否还能提供源码

    • arthinking 2014年10月23日16:33:08 回复 回复

      这里:https://github.com/arthinking/google-plugins
      这个例子在example/browser-action 目录下面

  3. qdujunjie 2015年03月17日12:19:30  #-47楼 回复 回复

    你好,请问下chrome插件的话,可以控制popup.html自动弹出而不需要用户click吗?如果可以的话,能发给我邮箱吗:qdujunjie@126.com,谢谢!

    • wly2014 2015年05月16日14:50:40 回复 回复

      请问你解决了吗??

  4. wly2014 2015年05月16日14:49:17  #-46楼 回复 回复

    同样请问下chrome插件可以控制popup.html自动弹出而不需要用户click吗?如果可以的话,发送邮箱1059387852@qq.com。。谢谢

给我留言

有人回复时邮件通知我
Javascript的相关文章
随机文章 本月热门 热评
1 JVM笔记 – 自动内存管理机制(调优案例分析与实战) 2014/11/30
2 使用Eclipse开发Java Web过程中Debug调试的使用方法 2011/9/10
3 树形组建TreePanel从servlet中读取JSON数据 2011/4/10
4 Struts2笔记 – 简单数据验证 2011/6/19
5 禅茶 2014/3/23
6 中小应用关系型数据库设计基本思路 2014/8/31
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
Mr.5's Life 白天是一名程序员,晚上就是个有抱负的探索者
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
猜您喜欢
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

IT宅中的文章除了标题注明转载或有特别说明的文章,均为IT宅的技术知识总结,学习笔记或随笔。如果喜欢,请使用文章下面提供的分享组件。转载请注明出处并加入文章的原链接。 感谢大家的支持。

联系我们:admin@itzhai.com

Theme by arthinking. Copyright © 2011-2015 IT宅.com 保留所有权利.