Chrome 扩展开发——编写一个自己的浏览器插件

im, 无色
im, 无色
im, 无色
884
文章
0
评论
2019年7月5日10:12:27 评论 611

这次的练习是做一个Chrome的扩展,分享一下入门开发过程。因为在消息传递那块纠结了特别久,所以我会重点总结消息传递那块。

这次做这个插件的功能很简单,就是点击按钮后可以对当前网页的模块进行选择隐藏。
做这个插件一方面是练习实例,还有一方面是,有的时候查资料啊,边上总有很多花花绿绿动来动去的小广告!
很烦有木有,还根本不能关闭!就算有关闭按钮,点击了竟然还跳转到广告页面了(゚Д゚≡゚Д゚)
所以就想做个小插件,让自己可以选择隐藏这些不想看的模块。

配置文件

每一个扩展都有一个JSON格式的manifest文件,叫manifest.json。

所以第一步我们将创建一个manifest.json文件。如下:

{ 
    "manifest_version": 2, //固定的
    "name": "Cissy's First Extension", //插件名称
    "version": "1.0", //插件使用的版本
    "description": "The first extension that CC made.", //插件的描述
    "browser_action": { //插件加载后生成图标
        "default_icon": "cc.gif",//图标的图片
        "default_title": "Hello CC", //鼠标移到图标显示的文字 
        "default_popup": "popup.html" //单击图标执行的文件
    }, 
    "permissions": [ //允许插件访问的url
        "http://*/", 
        "bookmarks", 
        "tabs", 
        "history" 
    ], 
    "background":{//background script即插件运行的环境
        "page":"background.html"
        // "scripts": ["js/jquery-1.9.1.min.js","js/background.js"]//数组.chrome会在扩展启动时自动创建一个包含所有指定脚本的页面
    }, 
     "content_scripts": [{  //对页面内容进行操作的脚本
         "matches": ["http://*/*","https://*/*"],  //满足什么条件执行该插件 
         "js": ["js/jquery-1.9.1.min.js", "js/js.js"],   
         "run_at": "document_start",  //在document加载时执行该脚本
    }] 
}

每个字段的信息我都用注释标明了,接下来就重点说下一些重要字段。

需要注意:

chrome不允许扩展中的HTML页面内直接内嵌js脚本,而要求所有的脚本都作为外部src来引入

browser_action

  1. 如果browser action拥有一个popup(即设置了default_popup),popup 可以包含任意你想要的HTML内容,并且会自适应大小。popup 会在用户点击图标后出现。若没有设置default_popup,将执行chrome.browserAction.onClicked的内容,若没有设置,就什么都不执行了。也就是如果设置了default_popup,就不会执行chrome.browserAction.onClicked了。
  2. 和browser_action对应的还有一个page_action,区别在于:Browser Action对在浏览器中加载的所有网页都生效;Page Action针对特定的网页生效。一个Extension最多可以有一个Browser Action或者Page Action。这里选用Browser Action。

background

  1. background是插件的运行环境。若设置了scripts字段,浏览器的扩展系统会自动根据scripts字段指定的所有js文件自动生成背景页。也可以直接page字段,指定背景页。两者只能设置一个。
  2. 一般情况下,我们会让将扩展的主要逻辑都放在 background 中比较便于管理。其它页面可以通过消息传递的机制与 background 进行通讯。理论上 content script 与 popup 之间也可以传递消息,但不建议这么做。

消息传递

由于插件的js运行环境有区别,所以消息传递机制是一个重要内容。

一次简单的请求

如果仅需要给你自己的扩展的另外一部分发送一个消息(可选的是否得到答复),你可以简单地使用chrome.extension.sendRequest()或者chrome.tabs.sendRequest()方法。这个方法可以帮助你传送一次JSON序列化消息从content script到扩展,反之亦然。如果接受消息的一方存在的话,可选的回调参数允许处理传回来的消息。

sendRequest() 是Chrome33之前的API,33之后还是使用sendMessage()吧。

  1. 内容脚本发送消息到扩展程序
    chrome.extension.sendMessage({hello: "Cissy"}, function(response) {
        console.log(response.farewell);
    });
  2. 扩展程序发送消息到内容脚本
    chrome.tabs.sendMessage(tab.id, {hello: "Cissy"}, function(response) {
        console.log(response.farewell);
    });
  3. 接收消息
    chrome.extension.sendMessage()向扩展内的其它监听者发送一条消息。此消息发送后会触发扩展内每个页面的chrome.extension.onMessage()事件。

我用的是长时间的保持连接,原理差不多,就是调用接口的区别,所以就不具体介绍这个了 详细的可以看开发文档

长时间的保持连接

background 和 popup

同一个Extension的Extension Page(包括background、popup、tab、infobar、notification)都是运行在同一个进程中的,所以background 和 popup 之间可以直接相互调用对方的方法,不需要消息传递。

  1. popup调用background中变量或方法
    var bg = chrome.extension.getBackgroundPage();//获取background页面
    console.log(bg.a);//调用background的变量或方法。
  2. background调用popup中变量或方法
    var pop = chrome.extension.getViews({type:'popup'});//获取popup页面
    console.log(pop[0].b);//调用第一个popup的变量或方法。

    这里要注意一定要指明type,如果没有指定,则获取Background Page之外的所有Extension Page的window对象 。(。•ˇ‸ˇ•。)这个地方真的纠结好久。然后就是background是一个运行在扩展进程中的HTML页面。它在你的扩展的整个生命周期都存在,而popup是在你点击了图标之后才存在,所以,在获取popup变量时,请确认popup已打开。

background 和 content

持续长时间的保持会话需要在content script和扩展建立一个长时间存在的通道。当建立连接,两端都有一个Port 对象通过这个连接发送和接收消息。

  1. 内容脚本发送消息到扩展程序
    var bac = chrome.extension.connect({name: "ConToBg"});//建立通道,并给通道命名
    bac.postMessage({hello: "Cissy"});//利用通道发送一条消息。
  2. 扩展程序发送消息到内容脚本
    扩展程序发送消息到内容脚本与前面类似,但需要指定哪个标签需要连接,(获取tab.id的方法我试了很多,但只有下面这个有效,所以如果大家有什么其他有效的方法,求求求分享!!)

    chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {//获取当前Tab
        var cab = chrome.tabs.connect(tabId, {name: "BgToCon"});//建立通道,指定tabId,并命名
        cab.postMessage({ hello: "Cissy"});//利用通道发送一条消息。
    }
  3. 接收消息
    为了处理正在等待的连接,需要用chrome.extension.onConnect 事件监听器,对于content script或者扩展页面,这个方法都是一样的

    chrome.extension.onConnect.addListener(function(bac) {//监听是否连接,bac为Port对象
        bac.onMessage.addListener(function(msg) {//监听是否收到消息,msg为消息对象
            console.log(msg.hello);
        })
    })

安装调试

设置 —>拓展程序—>加载已解压的拓展程序—>选择文件就行了,记得要打开开发者模式哦

总结

插件功能的开发我就不写了,实现起来比较简单,这篇文章就当是chrome拓展开发的学习笔记了,不足之处还望指出,最后还是放一下插件源码吧,写的比较乱很多没用到的代码也没删掉,因为是练习中用到的。嗯嗯好了去吃饭。

参考资料:
官方文档
360极速浏览器开发文档
Chromium扩展(Extension)机制简要介绍和学习计划
Chrome插件开发入门(二)——消息传递机制

im, 无色
  • 本文由 发表于 2019年7月5日10:12:27
Microsoft Edge 通过扩展添加功能 Edge

Microsoft Edge 通过扩展添加功能

Microsoft Edge 已非常适合浏览 Web,但是现在扩展可帮助你做更多事情。扩展是将功能添加到浏览器的小程序。 扩展可以: 为你提供与浏览器交互的新方法。例如,使用鼠标手势扩展,你可以通过右...
Chromium插件架构 Chrome开发

Chromium插件架构

背景 在阅读这个文档前,你应当熟悉Chromium的多进程架构。 概述 插件是浏览器不稳定的主要来源。插件也会在渲染器没有实际运行时,让进程沙箱化。因为进程是第三方编写的,我们无法控制他们对操作系统的...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: