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

定义扩展名称等元数据

html 复制代码

{
    "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变化真大

html 复制代码

{
    "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里面消费

html 复制代码

//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);
        });
    }
});

给权限

html 复制代码

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

重新加载后

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

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

html 复制代码

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 复制代码

<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扩展的官方文档，毕竟官方文档是最完整最新的文档。