chrome插件开发实践

首先我们来看一下chrome能做什么事情,其实主要的功能是往页面注入一段js代码,修改浏览器外观和获取浏览器内部信息。

chrome插件生命周期

  • 浏览器打开时执行一次的js代码

  • 每打开一个页面执行的js代码

  • 点击浏览器上插件按钮,打开一个页面,执行的js代码

开发chrome插件的准备工作

一个文本编辑器即可

一个hello world工程

新建一个文本文件:manifest.json

内容如下:

{
    "manifest_version": 2,
    "name": "优读Uread网页版插件",
    "version": "1.0",
    "description": "测试版",
    "permissions": [
        "tabs"
    ],
    "content_scripts": [
        {
            "js": ["index.js"]
        }
    ],
    "browser_action": {
        "default_popup": "index.html"
    },
    "background": {  
        "scripts": ["b.js"]  
    }  
}
  • manifest_version固定写2

  • name是插件的名字

  • version是自定义版本号

  • description是插件的描述

  • permissions是插件要用到的权限列表,如果不写上,则对应的api无法调用,可用权限请参考:http://open.chrome.360.cn/extension_dev/permissions.html

  • content_scripts是每次打开页面执行的js文件

  • browser_action是指定点击插件弹出的页面

  • background是打开浏览器只执行一次的js

往页面注入js实现特定需求

要注意一个问题,contentscripts指定的js的作用域与页面里面js的作用域是不同的,所以无法相互调用,唯一办法就是contentscripts操作页面的dom元素,达到注入js字符串的效果,然后通过注入的js字符串来与页面的js交互。

插件的消息传递

  • 长连接
// chrome插件监听tab页获取userid
chrome.runtime.onConnect.addListener(function(port) {  
    port.onMessage.addListener(function(msg) {

    });
});
  • 短连接
    chrome.tabs.getSelected(null, function(tab){
       chrome.tabs.sendMessage(tab.id, {target: "tab", "action": "openNowUrl", "html": html}, function(response) {
                    console.log(response);
                });  
    });


chrome.runtime.onMessage.addListener(  
    function(msg, sender, sendResponse) {

        if(msg.target == 'tab' && msg.action == 'openNowUrl'){

            try{
               document.getElementById('openUrlInUread').remove(); 
            }catch(e){

            }

            var div=document.createElement("div");
            div.innerHTML = msg.html ;
            document.body.appendChild(div);
           sendResponse(msg);
        }
});