码迷,mamicode.com
首页 > 其他好文 > 详细

chrome 插件开发

时间:2015-06-15 00:22:15      阅读:122      评论:0      收藏:0      [点我收藏+]

标签:chrome   chrome插件   

最近在帮老婆做美国签证,需要填DS-160表,做到最后需要有五页的表需要选择yes和no,大部分客户的信息都选择NO,然后就机械的选择no no no~~~,next,no no no next ~~~no no no ~~~~好烦。既然是机械性的工作,那就用代码实现吧,做一个chrome插件,点击插件图标后本页的选择按钮全部选no,并挑到下一页。

1:

如何实现呢?

首先获取该页面的所有显示在页面的radio按钮

然后筛选出值为no的按钮 点击

再获取下一页按钮 点击


从chrome进入DS-160表Security and Background页,然后在页面上右键"审查元素",如下图

技术分享


























先选择放大镜,当放大镜变色后选择radio按钮,然后在右边就会找到描述这个按钮的代码,发现该按钮的tag为"input",type为"radio",value为"N".

再用相同的方式看看其他no按钮也是这样的,ok,点击Console. 执行下面的代码

v = document.getElementsByTagName('input');
var vshu = [];
for (var i = 0; i < v.length; i++) {
    if (v[i].getAttribute('type') == 'radio' && v[i].getAttribute('value') == 'N')
    vshu.push(v[i]);

}
查看vshu数组里面的内容,会发现里面存放的就是我们要点击的no按钮对象,然后点击每个对象

 for (var i = 0; i < vshu.length; i++){
	 vshu[i].click();

每个no按钮都点击了,成功。然后用相同的方法(找到该按钮与其他按钮的不同)获取下一页按钮的对象,点击。

	next = document.getElementsByClassName('next')[0];
 	next.click();

跳转到下一页了,成功。

最终代码

var clickFun = function() {
    v = document.getElementsByTagName('input');
    var vshu = [];
    for (var i = 0; i < v.length; i++) {
        if (v[i].getAttribute('type') == 'radio' && v[i].getAttribute('value') == 'N')
        vshu.push(v[i]);

    }

    for (var i = 0; i < vshu.length; i++) {
        vshu[i].click();

    }
    next = document.getElementsByClassName('next')[0];
    next.click();


}


2:

技术分享

三个箭头指向的就是chrome插件,做哪个?怎么做?通过查询知道五角星的插件是page action,

另外两个属于browser action,browser action长驻浏览器,page action只有根据需要才会显示,很明显咱的需求要选择page action,因为只有那5个页面才会用到这个插件嘛。

要完成咱的需求,最少要用到4个文件manifest.json,icon.png,background.js,content_script.js

icon.png,要显示的图标,就像上面的那个五角星。

background.js 只在插件加载的时候运行一次,在这里可以用来处理插件本身的一些逻辑,比如监听图标的点击事件。

content_script.js 添加的是与页面交互的代码,比如上面的clickFun 函数。

manifest.json 其他文件可以任意起名字,只有manifest.json是唯一指定了文件名和文件格式的文件,程序会通过manifest.json的配置信息来设定相关内容。

首先是能在特定网页显示图标。

manifest.json

{
    "manifest_version": 2,
    "name": "clickNO",
    "version": "1.0",
    "description": "美国DS-160表 点NO工具",
    "permissions": [
        "tabs", "http://*/*"
    ],
    "page_action": {
        "default_icon": "images/icon.png",
        "default_title": "clickNO"
    },
    "background": {
        "scripts": [
            "javascript/background.js"
        ]
    },
    "content_scripts": [
        {
            "matches": [
		"https://ceac.state.gov/GenNIV/General/complete/*"
            ],
            "js": [
                "javascript/content_script.js"
            ]
        }
    ]
}


background.js

function checkForValidUrl(tabId, changeInfo, tab) {

    if (tab.url.indexOf('ceac.state.gov/GenNIV/General/complete') > -1) {
	if(tab.url.indexOf('SecurityandBackground')>-1 ||tab.url.indexOf('workeducation3')>-1){
        chrome.pageAction.show(tabId);//显示插件图标

	}
    }
}

chrome.tabs.onUpdated.addListener(checkForValidUrl);



content_script.js 文件内容可以为空。将四个文件放到同一个文件夹下,比如MyChromeextensions

然后在chrome地址栏,输入chrome://extensions/,会看到

技术分享















点击打包扩展程序,会弹出对话框

技术分享








扩展程序根目录,选择MyChromeextensions,私有秘钥文件 第一次可以不选择。点击 打包扩展程序后,会在 和MyChromeextensions的同级目录下生成pem文件,当下次打包的时候要在 私有秘钥文件中选择 这个pem文件。同时还生成了crx文件,将crx文件拖到 chrome://extensions/ 页面下就会安装你刚刚打包的插件了。


然后就是监听插件图标点击事件 执行clickFun()函数了。

clickFun()函数是要放到content_script.js文件中的,监听点击函数要放在background.js文件中,两文件之间怎么通信?通过消息传递(Message Passing)。

消息分为三种  one-time requests, long-lived connections, cross-extension messages,而我们需要的是第一种.

background.js文件改为

function onClickListener(tab) {

    chrome.tabs.getSelected(null, 
    function(tab) {
        chrome.tabs.sendMessage(tab.id, {
            greeting: "myChromeExtension"

        },
        function(response) {
            console.log(response.farewell);

        });

    });


}

function checkForValidUrl(tabId, changeInfo, tab) {

    if (tab.url.indexOf('ceac.state.gov/GenNIV/General/complete') > -1) {
        if (tab.url.indexOf('SecurityandBackground') > -1 || tab.url.indexOf('workeducation3') > -1) {
            chrome.pageAction.show(tabId);

            chrome.pageAction.onClicked.addListener(onClickListener);//监听图标点击事件

        }

    }

}

chrome.tabs.onUpdated.addListener(checkForValidUrl);

content_script.js 文件中除了添加clickFun()函数外还要添加接受消息代码

chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
    console.log(sender.tab ? "from a content script:" + sender.tab.url: "from the extension");
    var greetin = request.greetin;
    if (document.getElementsByTagName(greetin).length == 0) {
        var newdiv = document.createElement(greetin);
        document.firstElementChild.appendChild(newdiv);
        clickFun();//执行需求逻辑代码
    }

});

除了执行clicFun函数外,其他代码是干嘛的呢?在测试的过程中,发现点击图标后,会发来两次点击消息,所以在第一次接收到点击消息后创建一个节点,在节点的子节点列表末添加新创建的这个子节点,当下次点击消息来得时候发现 已经创建过新节点,所以就不执行clickFun函数。



然后就是打包 安装。

完成~~~



chrome 插件开发

标签:chrome   chrome插件   

原文地址:http://blog.csdn.net/langzxz/article/details/46493857

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!