Chrome插件开发之隐藏页面图片

这是本人第二次开发Chrome插件,本次开发主要两个目的,第一是练习Chrome插件开发时各个页面(沙盒)之间的消息传递,第二是在办公室看某些网站不想打开图片(你懂得。。。),但是几乎翻遍了webstore里都找不到满足要求的。

首先分析一下,在上一次开发Chrome插件开发之制作豆瓣电台歌词,我们主要使用pageAction和content_script,但是chrome的browser action插件最主要的background和popup都没有触及,而background、popup和content script三者之间的消息传递如下图所示:

Chrome插件开发之隐藏页面图片_第1张图片

而我们这次的消息传递有点击popup.html里隐藏或显示按钮时,将状态传递给content script,content script将页面所有图片隐藏并且把状态传给background.js,永久保存起来。

popup.js

$("input:radio[name='options']").change(function () {
        chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
            chrome.tabs.sendMessage(tabs[0].id, {name: "toggleImages", state: $("input:radio[name=options]:checked").val()},
                function (response) {
                    console.log(response.state);
                });
        });
    })

content script

chrome.runtime.onMessage.addListener(
        function (request, sender,sendResponse) {
            var name = request.name;
            if (name == "toggleImages") {
                var state = request.state;
                chrome.runtime.sendMessage({name: "setState", state: state});
                toggleImage(state);
                sendResponse({state:state});
            }
        });

background.js

chrome.runtime.onMessage.addListener(
            function (request, sender, sendResponse) {
                var name = request.name;
                if (name == "setState") {
                    var state = request.state;
                    if (state == "hide" || state == "show") {
                        localStorage.state = state;
                    }
                } else if (name == "getState") {
                    sendResponse({state: localStorage.state});
                }
            });

相信大家已经注意到了,background就是用来保存插件一些需要持久化的东西,例如用户的偏好设置,通常是使用localstorage,而popup是处理用户界面的接口,至于content script就是插件与web page打交道的控制器,这三个运行环境就像mvc模型,不得不说,Google设置的机制太好了。

剩下的消息传递还有,web page加载时根据当前用户的设置决定是否显示图片,这里我做的并不是很好,因为我一开始只是把img的display改成none,这确实能使图片隐藏,但是图片还是会加载到页面来,只是一瞬间又被隐藏起来,后来我索性把src也改了,但仍然不能解决该问题,我在这里向各位大神请教一下,能否拦截所有图片的加载来实现隐藏图片,还有对于通过JavaScript动态插入的img节点我也没办法隐藏,毕竟鄙人还是一个小白啊。。。以下是这次消息传递代码:

content script

chrome.runtime.sendMessage({name:"getState"},function(response){
        toggleImage(response.state);
    })

function toggleImage(state){
        switch (state) {
            case "hide":
                $("img").each(function(){
                    var originSrc=$(this).attr("src");
                        $(this).bind('load', function () {
                            $(self).hide().attr("src", originSrc + "null");
                            self.loaded=true;
                        })
//                    }
                })

                $("img").css({"display": "none"});
                break;
            case "show":
                $("img").css({"display": "block"});
                $("img").each(function(){
                    var changeSrc=$(this).attr("src");
                    if(changeSrc.lastIndexOf("null")!=-1) {
                        var originSrc = changeSrc.substring(0,changeSrc.lastIndexOf("null"));
                    }
                    $(this).attr("src",originSrc);
                })

                break;
        }
    }

background.js

chrome.runtime.onMessage.addListener(
            function (request, sender, sendResponse) {
                var name = request.name;
                if (name == "setState") {
                    var state = request.state;
                    if (state == "hide" || state == "show") {
                        localStorage.state = state;
                    }
                } else if (name == "getState") {
                    sendResponse({state: localStorage.state});
                }
            });

最后的一个消息传递是,弹出popup时根据用户当前显示开关,到底是隐藏还是显示图片

popup.js

chrome.extension.sendRequest({name: "initToggle"}, function (response) {
        var state = response.state;
        if (state == "hide" || state == "show") {
            $("input:radio#" + state).parent('label').addClass('active');
        }
        console.log(response.state);
    })

background.js

chrome.extension.onRequest.addListener(
            function(requset,sender,sendResponse){
                var name=requset.name;
                if(name=="initToggle"){
                    sendResponse({state:localStorage.state});
                }
            }
        )

以下是运行截图:


插件的源码与打包程序下载地址:http://download.csdn.net/detail/xanxus46/7193505 希望对学习Chrome插件开发的朋友有帮助。

插件的安装教程查看上一篇博客:Chrome插件开发之制作豆瓣电台歌词



你可能感兴趣的:(JavaScript,图片,chrome插件)