谷歌浏览器插件开发之消息传递

前言 本项目基于react+vite开发,content.js我用组件的js代替,popup用组件代替 &nb […]

前言

本项目基于react+vite开发,content.js我用组件的js代替,popup用组件代替

 

相关代码

content.js
// 发送数据,并打印接收
const onTranslationClick = () => {
  chrome.runtime.sendMessage({ type: 'translation' }, function (response) {
    console.log(response.message);
  });
}

// 按钮事件
<button className='btn btn-success' onClick={onTranslationClick}>一键翻译</button>

 

// background.js中的代码
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    if (request.type === 'translation') {
        console.log('开始翻译啦');

        // 回复消息
        sendResponse({ message: '翻译666' });
    }
});

 

效果

 

版权声明
文章标题:谷歌浏览器插件开发之消息传递
文章链接:https://blog.chiyuba.com/qianduanjishu/497.html
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布,转载或引用请注明出处。
温馨提示:本文最后更新于 2025年7月9日,部分内容可能存在时效性,请注意甄别。

相关推荐

更多教程

评论