Chrome Extension sendMessage & sendRequest【谷歌浏览器扩展之消息通信】

        嗯,标题不是翻译。

        简言 content_scripts 在浏览的网页中运行(注入),background & options_page 在应用里运行,但 content_scripts 可与应用通信,窗体的交互参考前面提供的文档或官方的图和介绍这里不赘述。


       前后台消息通信,刚开始接触时使用一些文档中提供的方法用不了。前后台的发送、接收消息的方式不同,长连接参考开发文档(文档中有的发送方式已不能使用了,下面的可用):

       从 content_scripts 发送消息或处理的数据发送给 background 时:

//content_scripts 发送消息给 background 
var oimgs = document.getElementsByTagName('img');
chrome.runtime.sendMessage({msg: 'send', imgs: oimgs}, function(response) {
	if(response){ //使用 response.status 如果返回的数据为空或不存在此值会报错
		//alert('完成');
	}
});


        background 接收来自 content_scripts 的消息

//background 接受来自 contentscript 的消息
var ocurTabId;
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以为你提供一个简单的谷歌浏览器插件,并教你如何在浏览器中测试它。 1. 首先,创建一个文件夹来存放插件文件,例如 "my-extension"。 2. 在该文件夹中创建一个名为 "manifest.json" 的文件,并添加以下代码: ``` { "manifest_version": 2, "name": "My Extension", "version": "1.0", "description": "A simple extension", "browser_action": { "default_popup": "popup.html" }, "permissions": [ "activeTab" ] } ``` 3. 在同一文件夹中创建一个名为 "popup.html" 的文件,并添加以下代码: ``` <!DOCTYPE html> <html> <head> <title>My Extension</title> <script src="popup.js"></script> </head> <body> <h1>My Extension</h1> <p id="message">Hello, world!</p> </body> </html> ``` 4. 在同一文件夹中创建一个名为 "popup.js" 的文件,并添加以下代码: ``` document.addEventListener('DOMContentLoaded', function() { chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { chrome.tabs.sendMessage(tabs[0].id, {message: 'hello'}, function(response) { var message = document.getElementById('message'); message.textContent = response.message; }); }); }); ``` 5. 打开 Chrome 浏览器并在地址栏中输入 chrome://extensions/ 进入扩展程序页面。 6. 在右上角打开开发者模式。 7. 点击“加载已解压的扩展程序”,选择刚才创建的文件夹并打开。 8. 插件就会被加载到浏览器中。现在,你可以在浏览器中测试它了。 9. 打开一个网页并点击插件图标,应该会弹出一个页面,上面显示 "Hello, world!"。 这只是一个简单的例子,但你可以根据自己的需求编写更复杂的插件,并在浏览器中测试它们。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值