Chrome插件开发实例---刷论坛在线时间小程序

    前记：

      由于近日注册了某个技术论坛，其论坛要求转为正式会员必须50积分购买邀请号，回答官方预留的题目可以获得30积分，每日在线一小时可以获得1积分上限为5积分。本人回答了官方题目获得30积分，之后就只能每日在线刷积分，但是由于论坛系统要求你在线必须不断点击浏览网页才算在线，这就让像我这种只是为了混成正式会员而目前没时间盯在屏幕上刷网页的人很是郁闷。为了解决这个问题。我首先是谷歌了下看是否有前人的经验可以借鉴，遗憾这方面的内容稀缺呀。不过功夫不负苦心人我还是找到了一篇文章遇到的问题与我相似，他用了Chrome插件解决了问题。在参考他编写的程序时，由于目前Chrome扩展开发manifest_version的版本由1升到了版本2。使之代码出现了许多问题，而且网络上Chrome插件开发的源码多数都是基于版本1的。为此我打算把我编写这个小插件时候找到的一些资料写出来与大家分享。

 一、首先阐述下manifest_version的版本1与版本2的区别：

     1、不允许执行任何inline javascript代码（就是说在html内的任何JS代码都是非法的）

          解决方案 : 将html内的JS代码移除，放入单独JS文件内，将此文件添加到"background"内(下面实例将会说到)

     2、扩展程序包的资源默认情况下不再可用于外部网站(作为图片的src属性或者script标签)

          解决方案：可在mainfest.json文件中设置"web_accessible_resources"属性将可用于外部网站的资源加入白名单

     3、"background_page"属性需要更改为"background"属性

     4、Browser action一些改进：

         1）browser_actions及chrome.browserActions API需要用browser_action、chrome.browserAction API替代

         2）browser_actions中的icons属性需要用default_icon属性或chrome.browserAction.setIcon替代

         3）browser_action中的name属性需要用default_title属性或chrome.browserAction.setTitle替代
         4）browser_action的popup属性需要用default_popup属性或 chrome.browserAction.setPopup替代
         5）browser_action的default_popup属性不能再指定为对象，而必须为“字符串”

     5、Page action一些更改：
         1）page_actions及 chrome.pageActions API需要用page_action、chrome.pageAction替代
         2）page_action中的icons属性需要用default_icon属性或 chrome.pageAction.setIcon替代
         3）page_action 中的 name 属性需要用 default_title 属性或 chrome.pageAction.setTitle替代
         4）page_action 中的 popup 属性需要用 default_popup 属性或 chrome.pageAction.setPopup替代
         5）page_action 中的 default_popup 属性不能再指定为对象，而必须为“字符串”
         6）chrome.self API需要用 chrome.extension替代
     6、chrome.extension.getTabContentses与 chrome.extension.getExtensionTabs需要用chrome.extension.getViews({ “type”: “tab” })替代
     7、Port.tab 需要用Port.sender替代

     原文可参考：https://developer.chrome.com/extensions/manifestVersion.html

   二、之后阐述一下Chrome基本框架：

     每个应用(扩展)都应该包含下面的文件：

•      一个manifest文件
•      一个或多个html文件(除非这个应用是一个皮肤)
•      可选的一个或多个javascript文件
•      可选的任何需要的其他文件，例如图片
•      详细Chrome开发指南请参见：http://code.google.com/chrome/extensions/devguide.html
•      还有个中文版开发指南是360翻译的：http://open.chrome.360.cn/extension_dev/overview.html
• 
  

•     三、Chrome 刷论坛在线时间具体代码：

    manifest.json   

{
  "name": "Keep Active in url",
  "version": "0.2",
  "manifest_version": 2,
  "description": "Automatically keep a loginned user's status active in url.",
  "icons": {
    "48": "icon_48.png",
    "128": "icon_128.png"
  },
   "background": {
           "scripts": ["background.js"]
        }, //区别版本1，这里需要把JS代码放入background.js文件中
  "page_action": {
    "default_title": "start",
  	"default_icon": "icon_19.png"
  },//只在匹配页面的URL框中显示插件图标
    "permissions": [
    "tabs"
  ],
  "content_scripts": [
  {
    "matches": ["http://XXXXXX/"],//自己需要的URL
    "js": ["visit.js"]
  }
  ]
}

        此处的代码都为固定格式配置选项，具体属性含义讲解请参见Chrome开发文档，或中文文档http://open.chrome.360.cn/extension_dev/manifest.html

      visit.js代码：

chrome.extension.sendRequest({},function(response) {});

此代码在获得匹配URL后，它的作用是向扩展程序管理者发送一个请求消息。这个消息将被background.html捕。

      background.js代码：

var winid = 0;
var tabid = 0;
chrome.extension.onRequest.addListener(
               function(request,sender,sendResponse){ 
                      chrome.pageAction.show(sender.tab.id);
                      chrome.windows.getCurrent(function(Win){ 
                               winid = Win.id
                      });
                      circle();
            }
);
function circle()
{
      radomURL = "http://XXXXX/XXXXX?t=" + Math.floor(100000 + Math.random()*6000); //随机生成论坛网页代码，需要根据自己实际情况修改
      chrome.tabs.create({windowId:winid,url: radomURL,selected:false},function(tab){tabid = tab.id}); 
      chrome.tabs.remove(tabid); 
      setTimeout(circle,60000); 
}

           其中，chrome.extension.onRequest.addListener捕获前面visit.js传来的请求消息后执行。chrome.pageAction.show(sender.tab.id)在发送消息的tab上显示扩展程序图标。chrome.windows.getCurrent定位到当前的Chrome窗口，通过winid = Win.id获取当前窗口ID。接下来是一个函数circle()，它在要结束的时候延迟60秒调用自身，因而构成死循环。这个函数先生成一个指向论坛的随机的URL，然后在前面的这个窗口里创建一个新的标签chrome.tabs.create，并在里面打开这个随机URL，selected:false表明不选定这个标签，因而做到不影响用户的正常使用，同时用tabid = Tab.id获取创建的这个标签的ID，最后关闭这个标签。

      代码中的三个图标，尺寸分别为：19*19、48*48、128*128，这都是开发文档中要求的固定大小。本代码选用图标如下：

                            

     四、Chrome扩展程序调试

     首先需要把我们编写好的manifest.json 、visit.js、 background.js、icon_19.png、icon_48.png、icon_128.png六个文件放入一个文件夹内。之后选择Chrome浏览器中扩展程序里的开发者模式，点击“加载正在开发的扩展程序”选中你的文件夹(本文我设定文件夹名称为Chrome Keep Active)将程序加载，如下图：

      

      之后，点击加载上的Chrome插件的“检查试图”就能打开Chrome调速器啦，如下图。

       

       在调速器下我们可以设置断点调试我们开发的插件，进而修改代码错误。

     五、发布扩展程序

       般来说，有如下两种发布方式：

     1、打包为crx文件发布

       命令行执行如下命令即可

chrome.exe --pack-extension="C:\Chrome Keep Active"

 执行完之后，就在Chrome Keep Active文件夹同级目录下生成Chrome Keep Active.crx和私钥文件Chrome Keep Active.pem，私钥文件用于升级软件时使用。
        重新发布时使用的命令行是：

chrome.exe --pack-extension="C:\Chrome Keep Active"  --pack-extension-key=“C:\Chrome Keep Active.pem”

生成的crx文件就用于发布，而私钥文件则自己保留。

     2、上传到Chrome Extension Gallary

        在https://chrome.google.com/extensions/developer/dashboard发布完成的扩展程序。上传时是传的扩展程序目录所有文件打包成的一个.zip文件（注意不是.crx）。上传中，不需要用到pem文件。