• Chrome 侧边栏开发示例

    前言

    最近做项目，需要开发浏览器扩展，但是考虑页面布局兼容性问题，使用了Chrome114开始的侧边栏，浏览器自带的能力毕竟不会出现兼容性问题，不过Chrome123开始，侧边栏居然又可以选择固定右侧扩展栏了，交互变化很大。

    API

    官方文档:  https://developer.chrome.com/docs/extensions/reference/sidePanel/ 

    可惜需要科学上网

    大致意思是从Chrome114开始有了侧边栏的新功能，其中的open方式打开侧边栏的API是Chrome116开始的。

    笔者Chrome已经升级到123了，所以

    出现了固定按钮

    开发指南

    那么从无到有开发一个侧边栏吧

    官方示意图，不过Chrome各个版本API的迭代很快，网上很多教程都是基于老版本API和version开发的，在开发功能时，就需要考虑Chrome删除旧API的情况，毕竟新API出现很久了。

    Chrome插件的几个核心理念，popup（右上角的图标与相关的页面和事件）；content-script（页面注入和js注入，与Chrome的原始页面交互）；background（crx后台运行，只要插件启用且Chrome没关闭）；sidepanel（新功能，侧边栏）

    manifest

    定义扩展名称等元数据 

    1. {
    2.     "name": "Hello Demo",
    3.     "description": "Base Level Extension",
    4.     "version": "1.0",
    5.     "manifest_version": 2,
    6.  
    7.     "browser_action": {
    8.         "default_popup": "popup.html",
    9.         "default_icon": "popup.png"
    10. }

    定义图标，元数据版本号 ，当然需要一些敏感权限时还要申请权限，通过开发者模式就可以加载未封装的扩展了。

    点击扩展，就有弹窗，旁边是原扩展，笔者自己写的只能是提取图标了，根据开源协议是OK的

         

    如果我们打包，并安装未在Chrome商店的扩展就不能启用

    另外写的扩展有个错误，点击进去，不过到目前为止，还是可以用version为2的版本，另外sidepanel必须使用version为3.

    sidePanel

    升级v3版本，毕竟v2版本要被Chrome移除了，开启侧边栏

    基本上manifest各种配置都改了，API变化真大

    1. {
    2.     "name": "Hello Demo",
    3.     "description": "Base Level Extension",
    4.     "version": "1.0",
    5.     "manifest_version": 3,
    6.     "action": {
    7.         "default_title": "Click to view a popup",
    8.         "default_popup": "popup.html"
    9.     },
    10.     "icons": {
    11.         "128": "popup.png"
    12.     },
    13.     "background": {
    14.           "service_worker": "background.js" 
    15.         },
    16.     "side_panel": {
    17.         "default_path": "popup.html",
    18.         "openPanelOnActionClick": true
    19.     },
    20.     "permissions":["sidePanel"]
    21.  
    22. }

    Chrome123之前是右上角有个侧边栏的按钮，在侧边栏切换各个扩展，Chrome123可以邮件扩展图标

    事件联动

    实际上事件联动，一般会经过background的js进行中转，比如发送message

    比如先创建右键菜单，发送标签消息，就可以在content-script的js里面消费

    1. //background js
    2. function sendMessageToContentScript(message, callback){
    3. 	chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
    4. 		chrome.tabs.sendMessage(tabs[0].id, message, function(response){
    5. 			if(callback) callback(response);
    6. 		});
    7. 	});
    8. }
    9.  
    10.  
    11. chrome.contextMenus.create({
    12.     id: "send_panel",
    13. 	title: '使用侧边栏处理：%s', // %s表示选中的文字
    14. 	contexts: ['selection'] // 只有当选中文字时才会出现此右键菜单
    15. });
    16. chrome.contextMenus.onClicked.addListener(function(params){
    17.     if(params.menuItemId=='send_panel'){
    18.         console.log(params.selectionText);
    19.         sendMessageToContentScript({cmd:'test', value:params.selectionText}, function(response){
    20. 	        console.log('来自content的回复：'+response);
    21.         });
    22.     }
    23. });

    给权限

    "permissions":["sidePanel","contextMenus", "tabs"]

    重新加载后

     

    刷新网页，选中文本，右键

    用自己写的对文本进行发送消息，但是tab的消息只能当前tab消费，如果要给background和popup或者sidePanel发送消息，必须使用全局消息

    1. function sendMessageToContentScript(message, callback){
    2. 	/* chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
    3. 		chrome.tabs.sendMessage(tabs[0].id, message, function(response){
    4. 			if(callback) callback(response);
    5. 		});
    6. 	}); */
    7.     chrome.runtime.sendMessage(message, function(response) {
    8.         console.log('收到来自后台的回复：' + response);
    9.     });
    10. }

    在panel的js消费

    1. <html>
    2.     <header>
    3.         
    4.     header>
    5.     <body>
    6.         <h1 id="panel_demo">Hello panel Extensionh1>
    7.         <script type="text/javascript" src="panel.js">script>
    8.     body>
    9. html>
    10.  
    11. //js文件
    12. function recive_msg(){
    13.     chrome.runtime.onMessage.addListener(function(message, sender,sendResponse) {
    14.         if(message.cmd == 'test') {
    15.             //alert(message.value);
    16.             document.querySelector("#panel_demo").innerHTML = message.value;
    17.         }
    18.         sendResponse('我收到了你的消息！');
    19.     });
    20. }
    21.  
    22. alert("haha");
    23. recive_msg();

    这里要考虑一件事，在background是无法使用alert函数的。

     

    点击确定后

    总结

    实际上Chrome插件的开发比较简单，不过Chrome文档不好查看，现存的很多文档都是旧版本，而Chrome的扩展API变化很大，尤其是V3版本，示例中的侧边栏必须使用V3版本，而且需要Chrome114或者Chrome116的版本才能使用，并且在Chrome123版本侧边栏交互体验又重大变化，本身侧边栏的用处不是特别大，主要是网上文档比较少，所以写了一篇简单文档，本质上是需要查看Chrome扩展的官方文档，毕竟官方文档是最完整最新的文档。

  • 相关阅读:
    Java异常处理
    【html】H2_列表、表格与媒体元素
    C++异常
    vue.js javascript页面表单验证滚动
    【计算机网络笔记】计算机网络体系结构概念
    【jvm】程序计数器
    阿里云2024年服务器2核4G配置评测_CPU内存带宽_优惠价格
    【常用的 Git 命令及简要示例说明】
    【数据结构】排序
    刘二大人 PyTorch深度学习实践 笔记 P8 加载数据集
  • 原文地址：https://blog.csdn.net/fenglllle/article/details/138037224