Chrome 扩大开辟——编写一个本身的浏览器插件

2024年2月22日 200次阅读 来源: cissy_9

此次的演习是做一个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插件开辟入门（二）——音讯通报机制

    原文作者：cissy_9
    原文地址: https://segmentfault.com/a/1190000006949838
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞