30分钟开发一款抓取网站图片资源的浏览器插件(2)

上一篇 / 下一篇  2022-09-07 13:14:28

  3、通信机制
  对于一个相对复杂的浏览器插件来说,我们不仅仅只操作dom或者提供基本的功能就行了,我们还需要向第三方或者自己的服务器抓取有用的页面数据,这个时候就需要用到插件的通信机制了.因为content_script脚本存在于当前页面,受同源策略影响,导致我们无法将捕获到的数据传给第三方平台或者自己的服务器, 所以我们需要基于浏览器的通信API.以下是谷歌浏览器插件的通信流程:
  (1)popup和background相互通信
  由官方文档可知popup可以直接访问background页的方法,所以popup可以直接与其通信:
  // background.js
  var getData = (data) => { console.log('拿到数据:' + data) }
  // popup.js
  let bgObj = chrome.extension.getBackgroundPage();
  bgObj.getData(); // 访问bg的函数
  复制代码
  3.2 popup或者background页和content_script通信
  这里我们使用chrome的tabs API,如下:// popup.js
  // 发送消息给content_script
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.sendMessage(tabs[0].id, "activeBtn", function(response) {
        console.log(response);
      });
    });
  // 接收消息
  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"});
    });
  content_script接收和发送消息:
  // 接收消息
  chrome.runtime.onMessage.addListener(
    function(message, sender, sendResponse) {
      if (message == "activeBtn"){
        // ...
        sendResponse({farewell: "激活成功"});
      }
   });
   // 主动发送消息
   chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
     console.log(response, document.body);
     // document.body.style.backgroundColor="orange"
  });
  有关消息的长连接,在谷歌官网也写的很清楚:
  我们可以采用如下方式进行长连接:
  // content_script.js
  var port = chrome.runtime.connect({name: "徐小夕"});
  port.postMessage({Ling: "你好"});
  port.onMessage.addListener(function(msg) {
    if (msg.question == "你是做什么滴?")
      port.postMessage({answer: "搬砖"});
    else if (msg.question == "搬砖有钱吗?")
      port.postMessage({answer: "木有"});
  });
  // popup.js
  chrome.runtime.onConnect.addListener(function(port) {
    port.onMessage.addListener(function(msg) {
      if (msg.Ling == "你好")
        port.postMessage({question: "你是做什么滴?"});
      else if (msg.answer == "搬砖")
        port.postMessage({question: "搬砖有钱吗?"});
      else if (msg.answer == "木有")
        port.postMessage({question: "太难了."});
    });
  });
  4、数据存储
  chrome.storage用来针对插件全局进行数据存储,我们在任何一个页面(popup或content_script或background)下存储了数据,我们在以上三个页面都可以获取到, 具体用法如下:
  chrome.storage.sync.get('imgArr', function(data) {
    console.log(data)
  });
  // 保存数据
  chrome.storage.sync.set({'imgArr': imgArr}, function() {
      console.log('保存成功');
    });
  // 另一种方式
  chrome.storage.local.set({key: value}, function() {
    console.log('Value is set to ' + value);
  });
  5、应用场景
  谷歌浏览器的插件应用场景很多,正如文章开头的思维导图中写的.以下是笔者总结的一些应用场景,大家感兴趣可以尝试去实现:
  ·谷歌浏览器自定义桌面。
  · 网页性能分析工具。
  · 网页爬虫。
  · 埋点工具。
  · 网页热力图生成工具。
  · 安全拦截插件。
  · 广告过滤插件。
  · 网站动态换肤。
  · 第三方数据导入。
  · 代码格式化工具。
  · 在线协作工具。
  · 防作弊插件。
  还有很多实用工具可以开发,大家可以好好把玩。接下来就来通过实现一个网页图片提取插件,来总结以下浏览器插件开发流程。
  6、开发一款抓取网站图片资源的浏览器插件
  首先还是按照笔者的风格,在开发任何一种工具之前都要明确需求,所以我们来看看该插件的功能点:
  · 能植入网页按钮,通过点击按钮捕获网页图片。
  · 能在用户端展示捕获的图片。
  · 点击插件能预览捕获的图片。
  基本上就这几个功能,接下来我会展示核心代码,在介绍代码之前我们先预览一下插件的实现效果:
  插件目录结构如下:
  因为插件的开发比较简单,所以我直接用jquery开发。这里我们主要关注popup.js和content_script.js, popup.js中主要用来获取从content_script页传过来的图片数据,并展示在popup.html中,另外又一个需要注意的是当页面没有注入生成按钮时,popupu需要发送信息给content页面,主动让其生成按钮,代码如下:
  chrome.storage.sync.get('imgArr', function(data) {
    data.imgArr && data.imgArr.forEach(item => {
      var imgWrap = $("<div class='img-box'></div>")
      var img = $("<img src='" + item + "' alt='" + item + "' />")
      imgWrap.append(img);
      $('#content').append(imgWrap);
      $('.empty').hide();
    })
  });
  $('#activeBtn').click(function(element) {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.sendMessage(tabs[0].id, "activeBtn", function(response) {
        console.log(response);
      });
    });
  });
  对于content页面,我们需要实现的是动态生成按钮,并且在页面中植入弹窗来展示获取到的图片,另一方面需要将图片数据传递给storage,以便popup页面可以获取图片数据。
  由于页面比较简单,笔者就不用过多的第三方库了,笔者先简单手写一个modal组件,代码如下:
  // 弹窗
  ~function Modal() {
    var modal;
    if(this instanceof Modal) {
      this.init = function(opt) {
        modal = $("<div class='modal'></div>");
        var title = $("<div class='modal-title'>" + opt.title + "</div>");
        var close_btn = $("<span class='modal-close-btn'>X</span>");
        var content = $("<div class='modal-content'></div>");
        var mask = $("<div class='modal-mask'></div>");
        close_btn.click(function(){
          modal.hide()
        })
        title.append(close_btn);
        content.append(title);
        content.append(opt.content);
        modal.append(content);
        modal.append(mask);
        $('body').append(modal);
      }
      this.show = function(opt) {
        if(modal) {
          modal.show();
        }else {
          var options = {
            title: opt.title || '标题',
            content: opt.content || ''
          }
          this.init(options)
          modal.show();
        }
      }
      this.hide = function() {
        modal.hide();
      }
    }else {
      window.Modal = new Modal()
    }
  }()
  第一步,我们先批量获取页面图片数据:
  var imgArr = []  $('img').each(function(i) {    var src = $(this).attr('src');    var realSrc = /^(http|https)/.test(src) ? src : location.protocol+ '//' + location.host + src;    imgArr.push(realSrc)  })
  因为图片的src路径可能是相对地址,所以笔者在这里用正则简单处理以下,当然我们可以进行更细粒度的控制。
  第二步,将图片数据存储到storage中:
  chrome.storage.sync.set({'imgArr': imgArr}, function() {
      console.log('保存成功');
    });
  第三步,生成预览图片的弹窗,这里用笔者上面实现的modal组件:
  Modal.show({
    title: '提取结果',
    content: imgBox
  })
  第四步,当popup发送激活按钮的通知时,我们要在网页中动态插入生成按钮:
  chrome.runtime.onMessage.addListener(
    function(message, sender, sendResponse) {
      if (message == "activeBtn"){
        if(!$('.crawl-btn')) {
          $('body').append("<div class='crawl-btn'>提取</div>")
        }else {
          $('.crawl-btn').css("background-color","orange");
          setTimeout(() => {
            $('.crawl-btn').css("background-color","#06c");
          }, 3000);
        }
        sendResponse({farewell: "激活成功"});
      }
   });
  setTimeout那段纯属是为了吸引用户视线,当然我们可以用更优雅的方式来处理。插件核心代码主要是这些,当然还有很多细节要考虑,我把配置文件和一些细节放到github了,如果感兴趣的朋友可以安装感受一下。
  github地址:https://github.com/MrXujiang。
  2022软件测试行业前景如何?哪些测试类型会成为主流趋势?快来填写行业调查问卷一同助力行业发展吧!点击下方链接参与问卷,还有测试课程等你来拿~

TAG: 软件开发 Python

 

评分:0

我来说两句

Open Toolbar