专栏首页蜉蝣禅修之道Chrome插件开发之隐藏页面图片

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

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

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

而我们这次的消息传递有点击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插件开发之制作豆瓣电台歌词

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • android之改变对话框属性

    forrestlin
  • Extjs自定义多字段VTypes

    forrestlin
  • C++简单实现八皇后问题

    forrestlin
  • tensorflow学习笔记(三十七):如何自定义LSTM的initial state

    如何初始化LSTM的state LSTM 需要 initial state。一般情况下,我们都会使用 lstm_cell.zero_state()来获取 ini...

    ke1th
  • 设计模式小议:state【转】

    转自:https://blog.csdn.net/goodboy1881/article/details/635963

    用户3033338
  • weex里Vuex state使用storage持久化

    在weex里使用Vuex作为state管理工具,问题来了,如何使得state可以持久化呢?weex官方提供store模块,因此我们可以尝试使用该模块来持久化st...

    用户1177380
  • 一次性比较目前前端最流行的状态管理,mobx,vuex,redux-saga使用方式用方式

    杭州前端工程师
  • 几种服务器端IO模型的简单介绍及实现(下)

    5、使用事件驱动库libevent的服务器模型 Libevent 是一种高性能事件循环/事件驱动库。 为了实际处理每个请求,libevent 库提供一种事件机制...

    李海彬
  • 记一次腾讯SDK源代码审计后的CSRF攻击

    0x00 前言 初进ChaMd5安全团队,应M姐姐之邀写下这篇技术文章,这篇文章主要讲述本人近期代码审计腾讯的第三方登录SDK包时发现的一个漏洞,阅读这篇文章需...

    ChaMd5安全团队
  • vuejs初上手项目

    虽然vue的官方文档非常棒,在我读完文档之后还是会有一种感觉,知识点我都懂,然后呢?似乎大体知道该怎么利用vue全家桶去搭建一个项目,但具体下笔又有点模糊。vu...

    IMWeb前端团队

扫码关注云+社区

领取腾讯云代金券