Chrome扩展开发，页面栏位自动填值

参考文档：http://www.cnblogs.com/ligerleng/p/gmail_assist_2.html

　　　　   http://open.chrome.360.cn/extension_dev/overview.html

一、Chrome扩展中脚本类型：

　　1、injected ，即通过动态方法将脚本注入到网页中，最常见的方法是通过content script 注入脚本。

　　需要注意：必须在manifest中的 web_accessible_resources字段中声明所需注入文件。

var s = document.createElement('script');
s.src = chrome.extension.getURL('tableInited.js');
s.onload = function() {
    this.parentNode.removeChild(this);
};
(document.head || document.documentElement).appendChild(s);
View Code
"web_accessible_resources" : [
        "oauth2/oauth2.html",
        "js/tableInited.js",
        "css/style.css",
        "js/table_sort_script.js",
        "images/sort.gif",
  ]
View Code

　　2、content script，与injected script类似，也是被注入到页面中的，区别于，它是运行在专门为它们准备的隔离环境中，只能访问和操作页面DOM，无法访问页面js代码。在mainfest中的 content_scripts字段中声明。

　　3、popup，用户点击扩展图标时，都可以设置弹出一个popup页面，页面中可以有运行的脚本。这类脚本与（background），都称为"完全属于扩展程序的脚本"，不仅可以访问原始JS API，还可以访问chrome为扩展程序提供的专门API（即chrome.*）。

　　4、background，跑在后台页面中的脚本，运行在浏览器后台，与当前浏览页面无关。

后台脚本还分为运行于后台页面（background page）和 事件页面（event page）。后台页面持续运行，生命周期从打开浏览器到关闭浏览器。事件页面只在需要时处于活动状态，这两类通过persistent区别。

"background": {
    "scripts": ["background.js"],
    "persistent": false
},
View Code

二、这几类脚本之间的通信

　　1、content script 和 完全属于扩展程序脚本之间的通信

　　接受端的处理方式一致（content script 可以调用chrome.runtime.* API）

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log(sender.tab ?
                "from a content script:" + sender.tab.url :
                "from the extension");
    if (request.greeting == "hello")
      sendResponse({farewell: "goodbye"});
  });
View Code

　　从content script向扩展程序脚本发送消息：

chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
  console.log(response.farewell);
});
View Code

　　扩展程序脚本向content script发送消息：

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
    console.log(response.farewell);
  });
});//和上面的区别是，这种消息发送的方向，需要你指明你信息要发到哪个页面（用户浏览的页面）中，也就是哪个tab中（chrome中每个页面都在一个tab，即标签中打开嘛）的content script；但显然上面那种就不需要，而且在接收端也不需要。
View Code

　　2、injected script 和 content script 之间的通信

　　可通过window.addEventListener和window.postMessage来实现，原理为：二者之间唯一共享的就是页面DOM元素，window就是页面元素，可以用来传递消息。

// injected script 中
if(email_data) {
　　window.postMessage({"usrik": JSON.stringify(userik) }, '*');//userik就从GLOBALS中取得
}

// content script 中
window.addEventListener("message", function(event) {
if(event.data.usrik) {
　　　　usrik = event.data.usrik
　　　　console.log(usrik);
　　}
}, false);
View Code

 三、页面自动填值，扩展源代码

　　mainfest.json

{
    "manifest_version": 2,
    "name": "联合开户_资料登记",
    "version": "5.0",
    "description": "联合开户，资料登记页面自动填值",
    "browser_action": {
        "default_title": "自动填值",
        "default_popup": "popup.html"
    },
    "web_accessible_resources" : [
        "js/fxcp_load.js"
    ],
    "content_scripts": [
        {
            "matches": ["https://*/accept/apply/jzkh/20000/new*"],
            "js": ["js/jquery-1.8.0.min.js","js/jzkh_zldj.js"]
        }
    ]
}

　　jzkh_zldj.js

(function(){
    // 通过content_script 注入脚本
    var s = document.createElement('script');
    s.src = chrome.extension.getURL('js/fxcp_load.js');
    s.onload = function() {
        this.parentNode.removeChild(this);
    };
    (document.head || document.documentElement).appendChild(s);
})();

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse){
    sendResponse(message + " handle OK");
    if(message == 'zldj'){
        var str = '{"zjqsrq":"20140601"}';
        var reqData = JSON.parse(str);
        for(var name in reqData){ var $item = $("input[name='"+name+"']"); $item && $item.val(reqData[name]);}
        
    }else if(message == "fxcp"){
        window.postMessage({"command":"fxcp"}, "*");
    }
});

 　　popup.html

<html>
<head>
<style>
* {
    margin: 0;
    padding: 0;
}

body {
    width: 200px;
    height: 100px;
}

</style>
</head>
<body>
<div>
    <input type="button" id="btnzldj" value="zldj" />
    <br/>
    <input type="button" id="btnfxcp" value="fxcp" />
    <div id="test">...</div>
</div>
<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/menu.js"></script>
</body>
</html>

　　menu.js

    $("#btnzldj").click(function(){
        $("#test").text("btnzldj send");
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
            chrome.tabs.sendMessage(tabs[0].id, "zldj", function(response) {
                $("#test").text(response);
          });
        });
    });
    $("#btnfxcp").click(function(){
        $("#test").text("btnfxcp send");
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
            chrome.tabs.sendMessage(tabs[0].id, "fxcp", function(response) {
                $("#test").text(response);
          });
        });
    });

　　fxcp_load.js

window.addEventListener("message", function(event){ 
    if(event.data.command == "fxcp"){
        if(jzkh.req_data.khlb == "0"){
            dcwjjj_common.selectOldAnswer("280&2|281&1");
        }else{
            dcwjjj_common.selectOldAnswer("400&2|401&2");
        }
    }
});

 

posted @ 2017-09-28 11:43  chenyizh  阅读(531)  评论(0)    收藏  举报