1. webstack前端栈首页
  2. 经验/观点

实现一个简单的chrome插件

我们在上网的时候,都会用到浏览器,但是浏览器并非拥有我们想要的所有功能,我们可以根据自己的需要,实现自己的插件来满足需求。比如网页中经常会有大量的广告,如果你希望拥有一个纯净的网页,可以实现一个插件来删除网页中的广告部分,如果你觉得浏览器自带的下载工具不太方便,可实现一个插件来管理下载的所有文件,文本以实现一个记录所有打开的网页地址为例,分享一下对浏览器插件开发的认识。

我们在上网的时候,都会用到浏览器,但是浏览器并非拥有我们想要的所有功能,我们可以根据自己的需要,实现自己的插件来满足需求。比如网页中经常会有大量的广告,如果你希望拥有一个纯净的网页,可以实现一个插件来删除网页中的广告部分,如果你觉得浏览器自带的下载工具不太方便,可实现一个插件来管理下载的所有文件,文本以实现一个记录所有打开的网页地址为例,分享一下对浏览器插件开发的认识。

要实现一个浏览器插件,需要从一个配置文件开始,这个配置文件就是manifest.json文件,任何插件的实现都离不开这个JSON格式的文件。

初识manifest.json文件

  1. 设置基本信息

               "manifest_version": 2, // 文件版本,基本不变            "name": "Record Web Address Extension", // 这里输入插件名称            "version": "1.0.1", // 自己实现的插件版本,在打包完插件的时候,根据这个字段来判断插件是否需要更新            "description": "The first extension that yangyanjun made.", // 这里输入对此插件的详细描述 以上几个字段给插件添加一个入口。
  2. 设置入口信息

               "browser_action": {                 "default_icon": "pinzhi_logo.png",                "default_title": "记录浏览地址",                 "default_popup": "popup.html"              }
    • “browser_action” 字段配置好之后,插件加载后在浏览器的地址栏右侧就会生成一个入口图标,如下图所示。
    • “default_icon”字段配置图标的地址,
    • “default_title”字段配置鼠标移到图标上显示的文字,
    • “default_popup”配置单击图标所执行的文件。

需要注意的是,这里的文件地址都是相对路径,相对于manifest.json文件。
实现一个简单的chrome插件

3.设置此插件所能访问的浏览器权限

            "permissions": [                  "http://*/*",                 "https://*/*",                 "tabs",                 "storage"             ]   

“permissions”字段是一个数组,列出本插件所使用到的浏览器权限,如果这里没有授权,则插件是无法使用的。此插件用到的浏览器的权限。

4.设置插件后台页面。

    "background":{         "page":"background.html"     }

“background”字段表明插件所运行的环境,在浏览器前台看不到的页面,需要打开扩展程序的开发者模式才能看到。如下图所示:

实现一个简单的chrome插件

5.设置对页面内容进行操作的脚本

    "content_scripts": [{  //对页面内容进行操作的脚本          "matches": ["http://*/*","https://*/*"],            "js": ["js/jquery-1.9.1.min.js", "js/js.js"],          "run_at": "document_start",            "all_frames": true     }]

“matches”字段设置执行该脚本的环境,比如本插件的该脚本在http或https协议下才执行,在其他协议的网页中是不执行内容脚本的。
“js”字段依次加载脚本文件地址。
“run_at”指定在document加载时执行该脚本

插件中几个环境的总结

  1. popup.html: 点击插件图标所显示的页面,只有点击图标才会显示,这可区别于background.html的运行周期。这个页面中运行的js脚本叫做popup.js,它会在每次点击插件入口图标时重新载入。 popup.html页面如下图所示:

  2. background.html: 这个页面是插件运行的后台页面,没有显示在窗口中,与当前浏览页面无关。这个页面存在于插件运行的整个周期。插件启动后就常驻后台,只有一个,这个页面运行的js脚本叫做background.js。
  3. content.js:这个是注入在web页面中的JavaScript脚本,可以是多个,如上所述,可以设置注入条件。

实现一个简单的chrome插件

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

三个主要部分消息传递总结

  • popup调用background中变量或方法:

       let bgMessage = chrome.extension.getBackgroundPage(); //可直接获取background页面    console.log(bgMessage.tabUrl);  //直接调用background的变量或方法。   
  • background调用popup中变量或方法:

       let popMessage = chrome.extension.getViews({type:'popup'});//可直接获取popup页面    console.log(popMessage[0].name); // 调用第一个popup的变量或方法。

    注意: 因为个Extension可以同时拥有若干个页面。这些页面分为五种类型为除了background和popup页面外,还有tab:像正常网页一样在浏览器的Tab中打开的页面、infobar:在浏览器顶部信息栏显示的信息页面、notification:在浏览器底部显示的通知页面。它们分别代表在不同窗口打开的页面。 所以这里一定要指定获取页面的type类型,如果没有指定,则获取Background Page之外的所有Extension Page的window对象。

  • 内容脚本发消息给background

       chrome.runtime.sendMessage({conyent: message || '我是content-script'},    function(response) {            console.log('来自background的回复:' + response);        }    );    
  • background监听内容脚本所发送的消息,并作出回应

       chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)    {     ...     sendResponse(JSON.stringify(request)); // 监听到消息之后,对收到的消息做一些处理并做出回应    }); 

本插件实现的两个重要点

  1. 获取当前tab页面的url

    这部分逻辑要写在background.js中,可以直接使用谷歌提供的插件接口来获取当前页面的url chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {     console.log(tab.url) //可以获取当前页面的url地址 })  
  2. 将获取的url地址存储起来

     可以使用谷歌的storage来存储,由于在manifest.json中已经授予了storage权限,所以这里可以直接使用     chrome.storage.local.set({'address': tabUrl}, function() {     console.log('success')   } )  

可以选择同步的方式或者本地方式存储,若选择前者(sync), 存储的数据会自动同步到你登录的任何Chrome浏览器。若选择storage.local,则只能够将数据存储在当前登录的设备本地。详细用法可参见 https://developer.chrome.com/…
实现一个简单的chrome插件

加载调试

设置 —>拓展程序—>加载已解压的拓展程序—>选择manifest.json所在的文件夹即可

实现一个简单的chrome插件

注意:代码修改之后,需要重新加载文件。

小结

本文只是简单分享了如何开发一个简单的谷歌浏览器插件,以及一些注意事项,并且提到了如何授权和使用谷歌插件api,重点介绍了插件开发必备的manifest.json入口文件和插件中几个重要环境以及环境之间的通信。本文内容并不是很全面,就当是chrome插件开发的学习笔记,不足之处还望指出。本文内容并未完结,在以后学习的过程中,会不断补充。

参考资料:
https://developer.chrome.com/…
https://developer.chrome.com/…
https://blog.csdn.net/luoshen…

原创文章,作者:webstack,如若转载,请注明出处:https://www.webstacks.cn/experience/1826.html

发表评论

登录后才能评论

联系我们

在线咨询:点击这里给我发消息

邮件:webstacks@163.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code