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

定义扩展名称等元数据

{"name": "Hello Demo","description": "Base Level Extension","version": "1.0","manifest_version": 2,"browser_action": {"default_popup": "popup.html","default_icon": "popup.png"
}

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

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

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

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

sidePanel

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

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

{"name": "Hello Demo","description": "Base Level Extension","version": "1.0","manifest_version": 3,"action": {"default_title": "Click to view a popup","default_popup": "popup.html"},"icons": {"128": "popup.png"},"background": {"service_worker": "background.js" },"side_panel": {"default_path": "popup.html","openPanelOnActionClick": true},"permissions":["sidePanel"]}

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

事件联动

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

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

//background js
function sendMessageToContentScript(message, callback){chrome.tabs.query({active: true, currentWindow: true}, function(tabs){chrome.tabs.sendMessage(tabs[0].id, message, function(response){if(callback) callback(response);});});
}chrome.contextMenus.create({id: "send_panel",title: '使用侧边栏处理：%s', // %s表示选中的文字contexts: ['selection'] // 只有当选中文字时才会出现此右键菜单
});
chrome.contextMenus.onClicked.addListener(function(params){if(params.menuItemId=='send_panel'){console.log(params.selectionText);sendMessageToContentScript({cmd:'test', value:params.selectionText}, function(response){console.log('来自content的回复：'+response);});}
});

给权限

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

重新加载后

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

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

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

在panel的js消费

<html><header></header><body><h1 id="panel_demo">Hello panel Extension</h1><script type="text/javascript" src="panel.js"></script></body>
</html>//js文件
function recive_msg(){chrome.runtime.onMessage.addListener(function(message, sender,sendResponse) {if(message.cmd == 'test') {//alert(message.value);document.querySelector("#panel_demo").innerHTML = message.value;}sendResponse('我收到了你的消息！');});
}alert("haha");
recive_msg();

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

点击确定后

总结

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