chrome 扩展从内容脚本发送消息到


chrome extension send message from content script to

我有一个 chrome 扩展，它为每个 chrome 选项卡和添加按钮动态创建一个 iframe。
从 background.js 我发送消息到 content.js

1
chrome.tabs.sendMessage(tabs[0].id, {action:"load_ifram~"+id}, function(response) {});

content.js:

1
2
3
4
5
6
7
8
9
10
chrome.extension.onMessage.addListener(function(msg, sender, sendResponse) {
split_message = msg.action.split("~");
if (split_message[0] == 'load_ifram') {    
var id = split_message[1];
var height = '35';
var iframe = document.createElement('iframe');      
iframe.src = chrome.extension.getURL('toolbar1.html');
document.documentElement.appendChild(iframe);
}
});

toolbar1.html

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>  
<script type="text/javascript" src="test.js">
</head>
<body>
    <input type="text" name="value" id="value" value=""/>      
    <button id="p_button" style="float:right;line-height:15px;margin-top:-1px;font-family:century gothic;">Click ME</button>
</body>

test.js:

1
2
3
4
5
6
document.addEventListener('DOMContentLoaded', function () {
var p_status = document.querySelector('#p_button');
if(p_status ){  
    p_status.addEventListener('click', p_open);
}
});

在 content.js 中，我从 background.js 获取 id。此 id 应该是我的按钮的值(单击我的 id)。我也想在我的按钮点击函数(p_open())中使用这个 id。我怎样才能做到这一点？请帮忙！！提前感谢

Chrome 提供了 chrome.storage，通过它我们可以将值从后台脚本传递给内容脚本和其他 js。

要实现这一点，我们需要先更新清单权限
"权限"：[
"存储"]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//to set the storage in background script
chrome.storage.local.set({'id': myid}, function() {});
chrome.storage.local.set({'name': myname},function() {});

//retrive the storage value in other js file
chrome.storage.local.get('id', function (result) {
id= result.id;
});
chrome.storage.local.get('name', function (result) {
name= result.name;
});
chrome.storage.local.get('myname', function (result) {
myname= result.myname;
});